Sigojoven.com by Diego Ocampo Pérez

Universidade de Vigo Escuela de Ingeniería de Telecomunicación

Proyecto Fin de Carrera

Desarrollo y optimización de una red social particular utilizando el framework Ruby on Rails Autor: Diego Ocampo Pérez Tutor: Raúl Fernando Rodríguez Rubio Curso 2010-2011

E. E. Telecomunicación

Sigojoven.com

Proyecto Fin de Carrera

Desarrollo y optimización de una red social particular utilizando el framework Ruby on Rails Autor: Diego Ocampo Pérez Tutor en la empresa: Jesús Miguel Gutiérrez-Barquín (CEO en Sigojoven.com)

Proyecto desarrollado bajo convenio con la empresa Sigojoven.com AgeAdventure – La aventura de la edad S. L.

Resumen Título: Desarrollo y optimización de una red social particular utilizando el framework Ruby on Rails Autor: Diego Ocampo Pérez Tutor: Raúl Fernando Rodríguez Rubio

SigoJoven.com es una red social orientada a usuarios mayores de 40 años que busca implantarse como red social de referencia para este grupo de usuarios en España y otros países de habla hispana. En el presente documento se analizan su estructura y funcionalidad, modelo de negocio, sistemas de captación de usuarios, etc. Además se hace un seguimiento del desarrollo y optimización de varias secciones utilizando el framework Ruby on Rails. Palabras clave: Redes sociales, Ruby on Rails, Sigojoven.com, Facebook, modelos de negocio de las redes sociales.

Agradecimientos y dedicatoria En primer lugar deseo expresar mi agradecimiento a mi tutor, Raúl F. Rodríguez Rubio, por guiarme a lo largo de la elaboración de este proyecto de fin de carrera, ofreciéndome su apoyo y dedicación; y siempre dejando total libertad para mis ideas y sugerencias. Gracias por el optimismo, motivación y confianza transmitidos en cada momento, desde la propuesta inicial hasta los últimos párrafos de esta memoria. A lo largo del desarrollo de este proyecto, que me ha llevado más tiempo del que hubiese deseado, he pasado por momentos buenos y malos; pero he tenido la suerte de tener siempre buenas personas a mi lado con las que compartirlos. He realizado el período de prácticas sobre las que se basa esta memoria en Madrid, y en esos pocos meses, he conocido a personas que ya nunca olvidaré. Mi más sincero agradecimiento a todo el equipo de Sigojoven y muy especialmente a esas dos grandes amistades que hice en la capital. Agradezco a todos mis amigos de siempre y colegas de la universidad su apoyo y ánimos en todo momento; también a la gente que conozco fuera de España, sobre todo a mi buena amiga Caro de Méjico y a todos mis amigos y amigas de Turquía, un país muy especial para mi. A mis hermanos, a mis padres y a mi abuela; por cuidarme, escucharme y comprenderme, ¡gracias!. Y gracias Bea por compartir conmigo este momento (y los que están por venir), por tu sinceridad y cariño, y por aguantar mis manías, ¡que no son pocas!.

Quiero dedicar este proyecto y memoria a Çiğdem Acıoğlu, mi ángel de la guarda.

Índice general 1. Introducción

1.1. Objetivos del proyecto y estructura de esta memoria . . . . . . . . . . .

1.1.1. Objetivos del proyecto . . . . . . . . . . . . . . . . . . . . . . . .

1.1.2. Estructura de la memoria . . . . . . . . . . . . . . . . . . . . . .

1.2. Las redes sociales en la actualidad . . . . . . . . . . . . . . . . . . . . .

1.2.1. ¿Qué es una red social? . . . . . . . . . . . . . . . . . . . . . . .

1.2.2. Breve historia de las redes sociales. Redes sociales más destacadas en la actualidad . . . . . . . . . . . . . . . . . . . . . . . . . . .

1.2.3. Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1.3. Qué es SigoJoven y a quién va dirigido . . . . . . . . . . . . . . . . . . .

1.4. Situación de SigoJoven.com en el panorama de las redes sociales en España 31 2. Presentación de la aplicación

2.1. Características, objetivos de la aplicación . . . . . . . . . . . . . . . . .

2.2. Descripción técnica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.2.1. Lenguajes empleados en el desarrollo . . . . . . . . . . . . . . . .

2.2.2. Ruby on Rails

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.2.3. Plugins y gemas . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.2.4. Estructura de directorios y ficheros que componen SigoJoven . .

2.2.5. Base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.3. Descripción funcional . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.3.1. Privacidad en Sigojoven . . . . . . . . . . . . . . . . . . . . . . .

2.3.2. Fuente de ingresos de la empresa. Modelo de negocio . . . . . . .

3. Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios 66 3.1. Brainstorming y priorización de tareas . . . . . . . . . . . . . . . . . . .

3.2. Sistemas de captación de usuarios . . . . . . . . . . . . . . . . . . . . . .

3.2.1. Mejorar el posicionamiento en buscadores (técnicas SEO) . . . .

Índice general 3.2.2. Campañas online: newsletters, google adwords, facebook ads y landing pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.3. Diseño de la web adecuado a este público objetivo y herramientas para el crecimiento automático de la red . . . . . . . . . . . . . . Apéndice A: Soluciones ante la falta de espacio en el servidor . . . . . . . . .

71 74 78

4. Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com 81 4.1. Objetivos y priorización de las tareas de rediseño . . . . . . . . . . . . . 81 4.2. Herramientas para la implementación. Entornos de prueba . . . . . . . . 84 4.3. Fase 1: Adaptación de la aplicación para la introducción de publicidad . 89 4.4. Fase 2: Nueva sección de actividades . . . . . . . . . . . . . . . . . . . . 93 4.5. Fase 3: Creación de la sección de ofertas . . . . . . . . . . . . . . . . . . 102 4.6. Fase 4: Rediseño de la sección “Mis datos” . . . . . . . . . . . . . . . . . 105 4.7. Fase 5: Rediseño de la sección de mensajes . . . . . . . . . . . . . . . . . 108 Apéndice A: Desde la idea inicial a la puesta en producción. Seguimiento del proceso completo para un caso específico . . . . . . . . . . . . . . . . . . 115 5. Conclusiones 119 5.1. Sigojoven en cifras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 5.2. Evolución. Sigojoven en la actualidad . . . . . . . . . . . . . . . . . . . . 120 5.3. Crítica y posibles mejoras . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Índice de figuras 1.1. 1.2. 1.3. 1.4. 1.5.

Seis grados de separación . . . . . . . . . . . . . . . . . . . . . . . . . . Un perfil de usuario en Thefacebook (2004) . . . . . . . . . . . . . . . . Herramientas de estadísticas y distribución de los anuncios. . . . . . . . Ejemplo de un juego en Facebook. . . . . . . . . . . . . . . . . . . . . . Comparativa entre las opciones de privacidad por defecto de Noviembre de 2009 y Abril de 2010. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.6. Penetración de uso de Redes Sociales y otras comunidades. . . . . . . . 1.7. Pertenencia a redes sociales/comunidades. . . . . . . . . . . . . . . . . . 1.8. Acceso por edad. Usuarios con cuenta y activos. . . . . . . . . . . . . . . 1.9. Frecuencia de acceso. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.10. Evolución de pertenencia a redes sociales. . . . . . . . . . . . . . . . . . 1.11. Comparativa de visitas únicas diarias en España. . . . . . . . . . . . . . 1.12. Usuarios de Facebook por rangos de edad. . . . . . . . . . . . . . . . . . 1.13. SigoJoven, Facebook y Tuenti posicionados según la edad de sus usuarios. 2.1. 2.2. 2.3. 2.4.

17 22 26 27 29 32 33 34 35 35 36 37 38

Utilización correcta de la arquitectura MVC. . . . . . . . . . . . . . . . Ficheros creados y modificados por el método Scaffolding the Rails. . . . Popularidad de los lenguajes de programación. . . . . . . . . . . . . . . Evolución en la popularidad del lenguaje Ruby (y por tanto del framework Ruby on Rails). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Evolución en la popularidad del lenguaje PHP. . . . . . . . . . . . . . . Estructura de una aplicación creada con Ruby on Rails. . . . . . . . . . Algunas de las empresas financiadas (o parcialmente financiadas) por DAD. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publicidad en el Sigojoven.com actual. . . . . . . . . . . . . . . . . . . . Paquetes especiales de publicidad. . . . . . . . . . . . . . . . . . . . . .

49 50 54

3.1. Ejemplo de redacción destacando palabras clave en Sigojoven. . . . . . . 3.2. Ejemplo de landing page. . . . . . . . . . . . . . . . . . . . . . . . . . .

69 73

2.5. 2.6. 2.7. 2.8. 2.9.

44 46 49

60 62 65

Índice de figuras 3.3. Página de SigoJoven en Facebook. . . . . . . . . . . . . . . . . . . . . . 3.4. Modelo de página de inicio implementando un sistema de puntos para obtener cuentas premium. . . . . . . . . . . . . . . . . . . . . . . . . . .

4.1. 4.2. 4.3. 4.4. 4.5. 4.6. 4.7.

85 86 87 88 89 90

Estructura de directorios en el servidor. . . . . . . . . . . . . . . . . . . Escenario de desarrollo típico. . . . . . . . . . . . . . . . . . . . . . . . . Pantalla de error de Rails, en entornos de producción y de desarrollo. . Información de formularios mostrada por la extensión Web Developer. . Dimensionado de las secciones en Sigojoven. . . . . . . . . . . . . . . . . Fichero css original y comprimido. . . . . . . . . . . . . . . . . . . . . . Gráfico que muestra el uso de los distintos navegadores entre Enero de 2002 y Agosto de 2009. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.8. Código css redundante, las líneas de código ignoradas por el navegador aparecen tachadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.9. Interconexión de las páginas que componen la sección de actividades . . 4.10. Página inicial de la sección de actividades . . . . . . . . . . . . . . . . . 4.11. Vista de una actividad específica . . . . . . . . . . . . . . . . . . . . . . 4.12. Página de añadir actividad. . . . . . . . . . . . . . . . . . . . . . . . . . 4.13. Interconexión de las páginas que componen la sección de actividades . . 4.14. Oferta destacada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.15. Interacción del botón “Recibir sus ofertas”. . . . . . . . . . . . . . . . . 4.16. Formulario y porcentaje completado del perfil. . . . . . . . . . . . . . . 4.17. Opciones de privacidad por defecto. . . . . . . . . . . . . . . . . . . . . 4.18. Trabajo con CSS en los listados de mensajes. . . . . . . . . . . . . . . . 4.19. Mensajes enviados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.20. Formato de los mensajes. . . . . . . . . . . . . . . . . . . . . . . . . . . 4.21. Agenda de contactos para seleccionar destinatarios. . . . . . . . . . . . .

91 92 94 96 100 101 103 104 105 106 107 111 112 113 114

5.1. Evolución de Sigojoven desde Marzo de 2009. Información extraída de alexa.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 5.2. A comienzos del 2011 muchos usuarios cambiaron su imagen de perfil como protesta por los varios fallos técnicos de la web. . . . . . . . . . . 127

1 Introducción 1.1.

Objetivos del proyecto y estructura de esta memoria

1.1.1.

Objetivos del proyecto

En este proyecto, fruto de seis meses de prácticas en la empresa Sigojoven.com, se diferencian dos objetivos fundamentales: 1. Realizar un completo análisis de la relevancia actual de las redes sociales, tanto en nuestro país como a nivel internacional. Hacer el seguimiento, como miembro de una compañía que se encuentra en pleno desarrollo de una aplicación de red social, de las dificultades, estrategias y procedimientos que se siguen para intentar destacar en un mercado competitivo y en auge como es el de las redes sociales y las aplicaciones web en general. 2. Obtener, desde un punto de vista más técnico, conocimientos sobre las distintas opciones para el desarrollo de aplicaciones web. Profundizar en Ruby on Rails por ser el framework escogido por Sigojoven.com para su desarrollo y analizar el proceso, planteando problemas y soluciones, de la creación y rediseño de varias secciones de la aplicación web.

1.1.2.

Estructura de la memoria

La memoria del proyecto está dividida en cinco capítulos en los que se analizan desde la relevancia de las redes sociales y su situación en el mercado actual de las aplicaciones web, hasta el proceso de su implementación, profundizando en el desarrollo de una red social específica y su problemática:

1 Introducción 1. En este primer capítulo se presenta el concepto de red social, se hace un repaso breve a la historia de las redes sociales y se describen algunas redes sociales de relevancia en la actualidad, prestando especial atención al caso de la red social Facebook. Además, se presenta Sigojoven.com, la red social en la que se centra este proyecto y memoria, y se sitúa ésta dentro de la situación actual de competitividad por el mercado de las redes sociales en nuestro país. 2. El segundo capítulo extiende la presentación de la aplicación web Sigojoven.com. Se discuten sus objetivos a corto y largo plazo y se hace una descripción detallada de la aplicación tanto a nivel técnico como a nivel funcional. 3. En el tercer capítulo se analiza la organización de Sigojoven.com como empresa y mi función dentro del grupo de desarrollo de la aplicación. Además se exponen aquellas tareas relacionadas con la captación de nuevos usuarios y el mantenimiento de la aplicación que realicé durante mi periodo de prácticas. 4. El cuarto capítulo es una descripción detallada de la implementación realizada en el proceso de rediseño de la aplicación que me fue asignado en la empresa. Se divide en varias secciones correspondiendo, por orden cronológico, a cada una de las fases del proceso de diseño e implementación realizado. 5. Conclusiones. Se dan datos sobre la situación actual de la aplicación y su evolución a lo largo de 12 meses. Para finalizar expongo una crítica sobre esta red social basada en mis impresiones personales.

1.2.

Las redes sociales en la actualidad

1.2.1.

¿Qué es una red social?

Antes de explicar lo que son las redes sociales es conveniente aclarar el significado del concepto “red social” dentro del contexto de Internet y las redes de ordenadores. Red social es un término muy general que abarca cualquier estructura social compuesta de personas (u organizaciones u otras entidades), las cuales están conectadas por uno

1.2 Las redes sociales en la actualidad o varios tipos de relaciones, tales como amistad, parentesco, intereses comunes, intercambios económicos, relaciones sexuales, o que comparten creencias, conocimiento o prestigio[1]. El Análisis de redes sociales es ampliamente utilizado en diversas ciencias sociales, entre las que se incluyen la sociología, la antropología, la psicología social, la economía, la geografía, las ciencias políticas, la cienciometría, los estudios de comunicación, estudios organizacionales y la sociolingüística. La forma de una red social ayuda a determinar la utilidad de la red para sus individuos. Las redes más pequeñas y más estrictas, pueden ser menos útiles para sus miembros que las redes con una gran cantidad de conexiones sueltas (vínculo débil) con personas fuera de la red principal. Las redes más abiertas, con muchos vínculos y relaciones sociales débiles, tienen más probabilidades de presentar nuevas ideas y oportunidades a sus miembros que las redes cerradas con muchos lazos redundantes. En otras palabras, un grupo de amigos que sólo hacen cosas unos con otros ya comparten los mismos conocimientos y oportunidades. Un grupo de individuos con conexiones a otros mundos sociales es probable que tengan acceso a una gama más amplia de información. Es mejor para el éxito individual tener conexiones con una variedad de redes en lugar de muchas conexiones en una sola red. Del mismo modo, los individuos pueden ejercer influencia o actuar como intermediadores en sus redes sociales, de puente entre dos redes que no están directamente relacionadas (conocido como llenar huecos estructurales)[1]. Además de su aplicación en el campo de las Ciencias Sociales el análisis de redes sociales ha sido empleado también en el campo de la investigación. Ejemplos de su uso en investigación es su aplicación en epidemiología para ayudar a entender cómo los patrones de contacto humano favorecen o impiden la propagación de enfermedades como el VIH en una población o su uso como herramienta eficaz para la vigilancia masiva (por ejemplo, el Total Information Awareness1 realizó una investigación a fondo sobre las estrategias para analizar las redes sociales para determinar si ciudadanos de EE.UU. eran o no amenazas políticas). Cuando de aquí en adelante se haga referencia al concepto red social, estaremos refiriéndonos a las redes sociales en el contexto de las redes de ordenadores aunque el 1

El Total Information Awareness es el nombre de un proyecto de la agencia Defense Advanced Research Projects Agency (DARPA) perteneciente al departamento de defensa de los EE.UU. El objetivo de este proyecto es extraer y recolectar todo tipo de información relacionada con personas y entidades para prevenir posibles amenazas terroristas.

1 Introducción término correcto para referirse a este conjunto más concreto de las redes sociales es “servicios de red social”. Las redes sociales en Internet se pueden definir como servicios web que permiten a sus usuarios (1) construir un perfil público o semi público dentro de un sistema limitado, (2) definir una lista de otros usuarios que comparten una conexión con el usuario, y (3) ver y recorrer su lista de conexiones y aquellas hechas por otros usuarios dentro del sistema. La naturaleza y nomenclatura de esas conexiones pueden variar de sitio a sitio[3]. Estos tres aspectos son lo más básico que tiene que incluir un servicio web para ser considerado una red social. Normalmente incorporan muchos otros servicios, entre ellos: Modificación del aspecto y contenido del perfil público, con posibilidad de subir fotos o incluso añadir módulos (“aplicaciones”) como ocurre en Facebook. Posibilidad de comunicarse con un usuario mediante mensajes en su perfil público (comentarios) o mediante mensajería privada. Un modo de compartir fotos, vídeo o audio con otros usuarios, así como la posibilidad de crear entradas de un blog asociado al perfil del usuario. Mensajería instantánea. La gran mayoría de las redes sociales en la actualidad incluyen todas estas funciones, y sin embargo, aún siendo Facebook la red social más activa hoy en día, hay un gran número redes sociales conviviendo con un elevado número de usuarios activos y grandes beneficios obtenidos.

¿Qué hace que ciertos usuarios prefieran unas redes sociales a otras? El principal factor es la fidelidad que los usuarios tienen a la web. Un usuario puede haberse registrado en una red social porque en ese momento era popular en su región o por que algún amigo le ha enviado una invitación. Una vez un usuario tiene un número elevado de contactos y de contenido añadido en una red social va a necesitar encontrar algo realmente atractivo en otra red social o estar muy molesto con la red social que está utilizando para dejar de acceder a la web o cerrar su cuenta.

1.2 Las redes sociales en la actualidad Para el usuario no son tan importantes las características que ofrece un servicio de red social como los lazos que haya establecido en ella. La altísima popularidad de Facebook en algunos países está haciendo que muchos usuarios de redes sociales se sientan casi obligados a registrarse en Facebook si quieren estar en contacto con algunos de sus amigos. En muchos casos una misma persona es usuario de más de una red social como es común que suceda entre los jóvenes de España con Tuenti y Facebook. Otro importante factor es la especialización de la red social. Mientras que Facebook es una red social extendida a nivel internacional y orientada a todo tipo de contenido, Flickr está especializada en compartición de imágenes entre usuarios, Myspace ha sido siempre preferida por músicos para promocionar su música y Tuenti fue desarrollada para usuarios españoles y ofrece características más “regionales” que Facebook (como por ejemplo la sección “Sitios”2 ). Aunque todas redes sociales comparten la mayoría de los servicios anteriormente comentados, las pequeñas diferencias en la implementación de estos servicios, pueden suponer el éxito o fracaso de un negocio basado en un servicio de red social. Una diferencia es el modo en que se hacen contactos en la red social. Una petición de amistad puede requerir una confirmación bidireccional o pueden establecerse lazos de tipo “fan” o “seguidor” en los que automáticamente se establece el vínculo sin necesidad de una confirmación por parte del otro usuario. Otras diferencias de gran importancia para los usuarios están relacionadas con la privacidad. Badoo y Windows Live Spaces le permiten a un usuario saber qué otros usuarios han visitado su perfil recientemente3 , esto puede suponer una molestia para sus usuarios o por el contrario darle más dinamismo a la red social. Otro ejemplo es cómo Linkedin permite a sus usuarios esconder su lista de contactos en su perfil, a pesar de ser esta una característica fundamental de las redes sociales. Puede haber cierta confusión respecto a si es adecuado calificar de redes sociales a ciertos servicios como son Flickr, Twitter o Youtube que quizás disten un poco de lo que estamos acostumbrados a interpretar como redes sociales (Facebook, Tuenti, Myspace). 2

La sección Tuenti Sitios fue estrenada en Marzo del 2010 y ofrece una base de datos con locales, zonas de marcha y cualquier otro tipo de localización que los usuarios pueden explorar a través de recomendaciones, un buscador o un mapa dinámico actualizándose con nuevos sitios en tiempo real. 3 A fecha de Febrero de 2011 Windows Live Spaces se encuentra en un proceso de migración de todos los blogs a la plataforma WordPress. A partir de Abril de 2011 el proceso se habrá completado y Windows Live Spaces dejará de funcionar.

1 Introducción Lo cierto es que aunque Youtube o Flickr ofrecen un servicio de espacio difusor de material audiovisual son también redes sociales ya que constan de un perfil público y se fomentan los lazos entre los usuarios (subscriptores en Youtube, seguidores en Twitter o amigos y familiares en Flickr). Se hablará de Twitter más adelante.

¿Porqué tienen tanto éxito las redes sociales? Las redes sociales son para el usuario un punto de encuentro con sus amigos, familiares y conocidos, un medio para hacer nuevas amistades y para mantenerse en contacto con personas que se encuentran lejos. También son un lugar donde compartir sus ideas, hobbies, fotos o música; una agenda de los eventos más próximos que pueden ser de su interés, un medio para encontrar oportunidades laborales o formar parte de grupos de interés común. Son incluso un medio que le permite, de una forma pasiva, informarse de todas aquellas noticias que le son relevantes. Las redes sociales permiten a las personas acceder a conexiones de amistad u otro tipo de relación que les están ocultas en el mundo real. Además consiguen que cualquier mensaje, idea o elemento multimedia que un usuario quiera compartir pueda extenderse rápidamente por toda la red (no sólo entre sus contactos). El fenómeno que explica la facilidad con la que un mensaje de cualquier tipo puede ser transmitido rápidamente a lo largo de la red se conoce como Mundo Pequeño. El fenómeno conocido como Mundo Pequeño esta basado en la teoría de los Seis grados de separación. Esta teoría establece que cualquier persona puede estar conectada a cualquier otra persona en el planeta a través de una cadena de conocidos que no tiene más de seis intermediarios. Según esta Teoría, cada persona conoce de media, entre amigos, familiares y compañeros de trabajo o escuela, a unas 100 personas. Si cada uno de esos amigos o conocidos cercanos se relaciona con otras 100 personas, cualquier individuo puede pasar un recado a 10.000 personas más tan solo pidiendo a sus amigos que pasen el mensaje a sus contactos. Estos 10.000 individuos serían contactos de segundo nivel, que un individuo no conoce pero que puede conocer fácilmente pidiendo a sus amigos y familiares que se los presenten, y a los que se suele recurrir para ocupar un puesto de trabajo o realizar una compra. Si cada uno de esos 10.000 conoce a otros 100, la red ya se ampliaría a 1.000.000 de personas conectadas en un tercer nivel, y siguiendo el mismo razonamiento se llegarían a 100.000.000 en un cuarto nivel, a 10.000.000.000 en un quinto nivel y a 1.000.000.000.000

1.2 Las redes sociales en la actualidad en un sexto nivel. En seis pasos, y con las tecnologías disponibles, se podría enviar un mensaje a cualquier individuo del planeta[4].

Figura 1.1: Seis grados de separación

1.2.2.

Breve historia de las redes sociales. Redes sociales más destacadas en la actualidad

Las redes sociales en Internet son un fenómeno imparable. El primer proyecto que se ajusta al concepto de red social, SixDegrees.com, se lanzó en 1997. Desde entonces las redes sociales han experimentado un crecimiento exponencial, han evolucionado y se han especializado hasta abarcar infinidad de campos y enfocarse a cualquier tipo de usuario. En la actualidad cerca de una centena de redes sociales superan el millón de usuarios registrados y tienen, junto a los blogs, un ritmo de crecimiento muy superior a otros sectores de gran importancia como son el email o los motores de búsqueda. Las redes sociales conectan personas, ideas e información. Permiten a sus usuarios expandir sus amistades más allá de las barreras físicas del mundo real, compartir aficiones, intercambiar todo tipo de información y trabajar en equipo. Aunque inicialmente estaban más enfocadas al aspecto lúdico, estas redes están adquiriendo cada vez más importancia en el mundo laboral y académico; están representando además una herramienta esencial para promover negocios, crear campañas online y generar publicidad.

1 Introducción Una de las primeras redes sociales más populares, Friendster.com, apareció en el año 2002, y fue creada para ayudar a encontrar amigos de amigos. Desde su comienzo hasta la difusión oficial del sitio, en mayo del 2003, había crecido por el “boca a boca” hasta la cantidad de 300 mil usuarios. Con el paso del tiempo, al no estar preparado el sistema para la gran cantidad de registros que crecían día a día, han sufrido problemas técnicos y la web dejaba de estar disponible ocasionalmente. Un rumor que comenzó a crecer entre los usuarios decía que los administradores de Friendster empezarían a cobrar por su servicio. Esto, sumado a los problemas técnicos, harían que el crecimiento comenzara a aminorar. Pero el modelo de Friendster fue seguido por otras compañías que supieron ver la oportunidad de negocio en la creación de redes sociales[2]. Desde el 2003 hasta la actualidad, muchas redes sociales se han ido gestando. Myspace.com se lanzó precisamente en 2003 para competir con la idea de captar a los usuarios no muy conformes con los rumores de que Friendster iría a cobrar honorarios a los usuarios. MySpace.com fue creado por los empleados de la compañía de marketing eUniverse y se aprovecharon los recursos tanto técnicos como de cantidad de usuarios suscritos a eUniverse para dar a la red social un gran impulso inicial. En Junio de 2006 (según comScore) MySpace.com era la red social más popular en Estados Unidos y no fue sobrepasada por Facebook hasta Abril de 2008. Paralelamente a MySpace.com estaba siendo desarrollada Fotolog.net, sitio dedicado a compartir fotografías, dio sus primeros pasos en mayo del 2002 y actualmente cuenta con 30 millones de usuarios registrados aproximadamente4 . La red social Linkedin.com apareció en el 2003, está pensada para el registro de profesionales que establecen lazos con otros usuarios para fines laborales; muy utilizada para encontrar y ofrecer oportunidades de trabajo. Muchas otras importantes redes sociales fueron surgiendo hasta la llegada de Facebook, la red social más relevante hoy en día y de la que se hablará con detalle más adelante. A continuación se citan algunas de las redes sociales más relevantes[2, 1, 5]: Badoo: Basa su modelo de negocio en una serie de servicios de pago como son “Subir arriba” o “Superpoderes” que permiten a los usuarios ser más fácilmente encontrados por otros usuarios o ver que usuarios han estado interesados en su perfil entre otras ventajas. Dado que la relación entre usuarios está sobre todo 4

Las estadísticas más recientes, extraídas de Google trends y Alexa.com muestran un claro descenso en la popularidad del servicio Fotolog.

1.2 Las redes sociales en la actualidad orientada a las citas, las medidas para proteger la privacidad de sus usuarios son menos rígidas. Classmates: Red social de gran éxito en los Estados Unidos. Orientada al reencuentro con viejos amigos, o compañeros de estudio. Es en una web básicamente de pago. La funcionalidad ofrecida tras el registro gratuito es muy limitada y es requisito contratar la modalidad de pago para que un usuario pueda contactar con otro. Flixster: Es una red social orientada al mundo del cine. Los usuarios comparten opiniones y puntuaciones de películas y conocen a otros usuarios con los mismos gustos. Flickr: Es un servicio de almacenamiento de imágenes y una comunidad online con funciones de red social. En noviembre de 2008, Flickr albergaba más de tres mil millones de imágenes. Cada minuto se agregan a Flickr alrededor de 5000 imágenes. Habbo: Enfocado a jóvenes y adolescentes, presenta salas de chat con formas de habitaciones de un hotel, renderizadas en proyección isométrica. El registro y la entrada a Habbo es totalmente gratuito, pero el acceso a servicios adicionales requieren la compra de "Habbo Créditos" con dinero real, que es la moneda dentro del Hotel. Los "Habbo Créditos" sirven para adquirir elementos extras dentro del hotel, por ejemplo el Habbo Club y la capacidad de comprar muebles, denominados "furnis". Hi5: Es una red social de carácter general de gran éxito a nivel mundial pero principalmente en América Latina. Last.fm: Es una red social, una radio vía Internet y además un sistema de recomendación de música que construye perfiles y estadísticas sobre gustos musicales, basándose en los datos enviados por los usuarios registrados. Algunos de estos servicios son de pago, pero aún existen países donde sigue siendo gratuito. En la radio se puede seleccionar las canciones según las preferencias personales (de acuerdo a un algoritmo y a las estadísticas) o de otros usuarios. MyHeritage: Es una red social en Internet orientada a la familia y a la genealogía. Le permite a sus usuarios o miembros registrados crear un sitio de la familia en la

1 Introducción Red, compartir fotografías y vídeos, organizar eventos familiares, crear sus árboles genealógicos y buscar ancestros. Más de 50 millones de usuarios. MyLife: (Conocida formalmente como Reunion.com) Está orientada al reencuentro de entre familiares, viejos amigos y ex parejas. La mayor parte de sus usuarios residen en Estados Unidos o Canadá Orkut: Es una red social promovida por Google. La red está diseñada para permitir a sus integrantes mantener sus relaciones existentes y hacer nuevos amigos, contactos comerciales o relaciones más íntimas. Está teniendo un gran éxito principalmente en Brasil y en la India. Qzone: Con más de 200 millones de usuarios a fecha de 31 de Enero de 2009, Qzone es la red social con más usuarios en China y la segunda a nivel mundial. La mayoría de los servicios que ofrece son de pago. Twitter: Es un servicio gratuito de microblogging que permite a sus usuarios enviar micro-entradas basadas en texto, denominadas "tweets", de una longitud máxima de 140 caracteres. El envío de estos mensajes se puede realizar tanto por el sitio web de Twitter, como vía SMS (short message service) desde un teléfono móvil, desde programas de mensajería instantánea, o incluso desde cualquier aplicación de terceros, como puede ser Facebook. Estas actualizaciones se muestran en la página de perfil del usuario, y son también enviadas de forma inmediata a otros usuarios que han elegido la opción de recibirlas. Twitter es muy popular y es sin duda la aplicación más relevante que haya sido desarrollada en Ruby on Rails hasta la fecha. Twitter ha sufrido a lo largo de su trayectoria varios problemas técnicos y de escalabilidad y se extendió el rumor de que Twitter abandonaría Ruby on Rails para comenzar un desarrollo basado en PHP o Java. Evan Williams, uno de los fundadores de la compañía, ha desmentido esta información en un Tweet enviado el 1 de Mayo de 2008. Windows Live Spaces: Aunque es también una red social WLS es principalmente una plataforma para blogs. A partir de Octubre del 2010 Microsoft comenzó el proceso de migración de todos sus blogs a la plataforma WordPress, proceso que durará 6 meses. Existen varios criterios de clasificación para las redes sociales. Entre ellos destaco dos criterios que utilizaremos para clasificar las redes sociales anteriormente citadas[55]:

1.2 Las redes sociales en la actualidad Por su público objetivo y temática: • Redes sociales Horizontales: Son aquellas dirigidas a todo tipo de usuario y sin una temática definida. Se basan en una estructura de celdillas permitiendo la entrada y participación libre y genérica sin un fin definido, distinto del de generar masa. Son redes sociales horizontales: Facebook, Tuenti, Badoo, Hi5, etc. • Redes sociales Verticales: Están concebidas sobre la base de un eje temático agregador. Su objetivo es el de congregar en torno a una temática definida a un colectivo concreto. En función de su especialización, pueden clasificarse a su vez en: Redes sociales Verticales Profesionales, de Ocio y Mixtas. Son redes verticales: Flixter, Flickr, Last.fm, Linkedin, etc. Por el sujeto principal de la relación: • Redes sociales Humanas: Son aquellas que centran su atención en fomentar las relaciones entre personas uniendo individuos según su perfil social y en función de sus gustos, aficiones, lugares de trabajo, viajes y actividades. Son redes sociales humanas: Facebook, Tuenti, Twitter, Hi5, etc. • Redes sociales de Contenidos: Las relaciones se desarrollan uniendo perfiles a través de contenido publicado, los objetos que posee el usuario o los archivos que se encuentran en su ordenador. Son redes sociales de contenidos: Flickr o Youtube.

1.2.3.

Facebook

Es esencial el estudio de Facebook, por su relevancia dentro del conjunto de redes sociales actualmente existentes en Internet, porque es un modelo a seguir en muchos aspectos para la creación de una nueva red social y porque Sigojoven en concreto emplea muchas de las ideas que funcionan en Facebook. La red social Facebook, inicialmente llamado “Thefacebook”, fue creada por Mark Zuckerberg, estudiante de la universidad de Harvard, y lanzada en Febrero de 2004[2]. Inicialmente su uso estaba restringido a los estudiantes de Harvard pero se fue expandiendo primero a otras universidades de Canadá y EEUU, más tarde (en Septiembre

1 Introducción de 2005) se lanzó una versión para estudiantes de Secundaria y en Septiembre del 2006 Facebook se abrió a todo usuario a partir de los 13 años de edad y con una dirección de email válida. A fecha de febrero de 2010 Facebook alcanza los 400 millones de usuarios y es la segunda página web más visitada de Internet después de Google5 .

Figura 1.2: Un perfil de usuario en Thefacebook (2004)

Características[2, 1]: Lista de Amigos: En ella el usuario puede agregar a cualquier persona que conozca y esté registrada, siempre que acepte su invitación. En Facebook se pueden localizar amigos con quienes se perdió el contacto o agregar otros nuevos con quienes intercambiar fotos o mensajes. Para ello, el servidor de Facebook posee herramientas de búsqueda y de sugerencia de amigos. Grupos y Páginas: Es una de las utilidades de mayor desarrollo reciente. Se trata de reunir personas con intereses comunes. Hay muchas similitudes entre la gestión de grupos y páginas en Facebook hasta el punto de llegar a causar confusión entre los usuarios a la hora de decidir si lo que necesitan es una página o un grupo. 5

Según el índice Alexa (http://www.alexa.com/topsites) a fecha de Julio del 2010.

1.2 Las redes sociales en la actualidad Las páginas están encaminadas hacia empresas, marcas o personajes específicos y están muy involucradas en el sistema de publicidad de Facebook. Si eres una empresa o deseas darte a conocer, debes de crear una página en Facebook y no un grupo. Las páginas son además anónimas, esto es, no se muestra a los usuarios que la visiten la asociación entre el perfil de usuario (o usuarios) administrador de la página y dicha página. Los grupos se crearon con la idea de ser un punto de encuentro entre usuarios con un interés común para discutir sobre un tema, organizar eventos, etc. En general no se debería publicitar nunca un grupo (y de hecho un grupo no puede publicitarse mediante Facebook Ads) y aunque hay administradores de grupo, todos los usuarios tienen la misma importancia a la hora de hacer publicaciones en él. En los grupos los usuarios pueden ver quienes son sus administradores. Muro: El muro (the wall en inglés) es un espacio en el perfil de cada usuario que permite a sus amigos dejarle mensajes mostrando la fecha y hora en la que el mensaje fue escrito. El muro de un usuario es visible por todo aquel usuario de Facebook que tenga permiso para ver el perfil completo del usuario (depende de las opciones de privacidad del usuario y de la relación establecida entre ambos usuarios dentro de Facebook). Lo más común es que un usuario utilice el muro de un amigo para dejarle notas cortas y puntuales empleando la opción de la mensajería privada en caso de tener que comunicarle algo más privado o extenso. Desde Julio del 2007 Facebook permite a sus usuarios adjuntar fotos, vídeos y enlaces. Fotos: Según Facebook hay más de 50 mil millones de fotos de usuario6 , 1.5 petabytes de almacenaje empleado en fotos y 220 millones de fotos son añadidas cada semana, empleando cerca de 25 terabytes de espacio de almacenaje7 . Cada usuario puede crear todos los álbumes de fotos que desee con un límite de 200 fotos por álbum Facebook es con diferencia el servicio web que alberga mayor cantidad de fotos y con mayor tasa diaria de subida de fotos. Flickr, un importantísimo servicio de almacenamiento de imágenes, tiene una tasa de mil millones de fotos subidas al 6 7

A fecha de Julio del 2010 A fecha de Mayo del 2009

1 Introducción año frente a los 2.5 mil millones de fotos que los usuarios suben mensualmente a Facebook[18]. Regalos: los regalos o gifts son pequeños iconos con un mensaje. Los regalos dados a un usuario aparecen en la pared con el mensaje del donante, a menos que el donante decida dar el regalo en privado, en cuyo caso el nombre y el mensaje del donante no se exhibe a otros usuarios. Una opción "anónima" está también disponible, por la cual cualquier persona con el acceso del perfil puede ver el regalo, pero solamente el destinatario verá el mensaje. Algunos regalos son gratuitos y el resto cuestan un dólar, (es necesario un número de tarjeta de crédito o cuenta Paypal). Aplicaciones y juegos: Facebook proporciona a los desarrolladores, con una API, una forma de representar la información contenida en la web y poder interactuar con ella para integrar una aplicación dentro o fuera de Facebook[19]. Recientemente se ha reemplazado la API antigua por una nueva llamada Facebook Graph Api. A fecha de noviembre de 2010 estaban disponibles en Facebook más de 500.000 aplicaciones[1]. Muchas de estas aplicaciones son juegos que de alguna manera involucran datos de los usuarios y sus amigos para relacionar de esta manera el videojuego con las relaciones entre usuarios en el mundo real. Entre este tipo de aplicaciones destaca FarmVille, con más de 16 millones de usuarios activos al día[20]. Chat: El chat o servicio de mensajería instantánea de Facebook fue lanzado en Abril de 2008. Los usuarios solo pueden mantener conversaciones con sus contactos y son siempre conversaciones uno-a-uno, aunque podrá establecer conversaciones independientes con varios usuarios a la vez. Además de poder chatear directamente desde el interfaz de la web se pueden utilizar varios clientes de mensajería instantánea multiprotocolo, como son eBuddy, Empathy, Adium o Windows Live Messenger 2011, para poder mantener conversaciones con contactos de Facebook sin emplear su interfaz web. News Feed: Es un componente clave de Facebook. El News Feed sustituye la antigua página de inicio de Facebook (que consistía en una versión personalizada de su propio perfil) por una nueva página de inicio en la que el usuario puede ver

1.2 Las redes sociales en la actualidad un flujo que se refresca cada cierto tiempo con las noticias más relevantes de los contactos del usuario. La introducción de este componente en Facebook causó el descontento de muchos de sus usuarios que decían recibir mucha información irrelevante y se preocupaban de como este cambio podría atentar a la privacidad de sus datos. Actualmente es posible decidir que información ver o no en el News Feed así como configurar que datos relacionados con tus acciones como usuario quieres que sean visibles en el News Feed de otros usuarios. Muchas de estas características ya estaban presentes en redes sociales anteriores a Facebook. Otras, como el News Feed, sobre el cual Facebook tiene una patente, son utilizadas por muchas redes sociales de reciente aparición[21].

Modelo de negocio En Agosto del año 2006 Microsoft invirtió alrededor de 240 millones de dólares para convertirse en el único proveedor de publicidad mediante banners en Facebook por el periodo de 3 años. A partir del 2010 Facebook comenzó a retirar la publicidad mediante banner de Microsoft para centrarse en un tipo de publicidad más interactiva[23, 22]. Actualmente el modelo de negocio de Facebook consiste en 3 principales fuentes de ingresos: Facebook Ads: Este sistema de publicidad interactiva está disponible para cualquier usuario que cuente con un perfil en Facebook. Un usuario puede personalizar un anuncio en sólo tres pasos sencillos en los que escoge un texto (de 135 caracteres) y una imagen, y decide a que público objetivo de usuarios de Facebook se le mostrará la ese anuncio y elige el método de pago y la cantidad diaria que está dispuesto a pagar. Esta publicidad siempre se muestra en una columna a la derecha (como se puede ver en la figura 1.3) y es interactiva en el sentido de que los usuarios pueden hacer clic en un botón “me gusta” situado debajo del anuncio (de forma que los contactos del usuario van a recibir esa información relevante) o pueden reportar que el anuncio es poco interesante, engañoso u ofensivo. Existe un gran potencial en este sistema de hacer publicidad.

1 Introducción La opinión, comentarios y crítica de los propios usuarios es fundamental para saber cual es el rendimiento de una campaña publicitaria, además Facebook proporciona varias herramientas para seguir la evolución de una campaña y así ver que tipo de anuncios, público objetivo o sistema de pago funciona mejor. El anuncio va a ser visto solo por aquellos usuarios que se desee. Esto es muy personalizable: desde la posibilidad de elegir sexo, edad y país hasta seleccionar gustos, estado civil o nivel de formación. Se puede fijar una cantidad diaria a pagar y así tener la seguridad de nunca pagar más de lo deseado. Por otra parte Facebook acepta Pay Per View y Pay Per Click. La opción Pay Per Click garantiza que un anunciante sólo pagará por cada vez que alguien visite la web (o página de Facebook) a la que enlaza el anuncio.

Figura 1.3: Herramientas de estadísticas y distribución de los anuncios.

Gifts y Facebook Credits: Los créditos de Facebook son una divisa virtual que se puede usar para comprar artículos virtuales en muchos juegos y aplicaciones de la plataforma de Facebook. Un usuario compra una cierta cantidad de créditos de Facebook con dinero real y Facebook se queda un 30 % de ese dinero, la cantidad restante va para la empresa responsable de la aplicación o juego en la que se utilicen los créditos[24]. Los regalos (gifts) son pequeños iconos que un usuario puede regalarle a otro por la cantidad de 10 créditos virtuales (algo menos de 1 euro). El 1 de Agosto del

1.2 Las redes sociales en la actualidad 2010 Facebook eliminó la posibilidad de comprar y enviar regalos para centrarse en otras características más importantes8 . Aplicaciones y juegos: Las aplicaciones y juegos dan también grandes beneficios a Facebook. Principalmente los juegos. Por un lado está la necesidad, por parte de los usuarios, de comprar créditos Facebook (como ya se ha comentado en el apartado anterior) para así conseguir ciertos ítems o objetivos en los juegos. Por otra parte, la publicidad en la columna situada a la derecha no deja de mostrarse mientras se ejecuta un juego o aplicación y dado que posiblemente nada retiene tanto a un usuario en la página como un videojuego adictivo, aumentan las posibilidades de que el usuario haga clic en cualquiera de los anuncios.

Figura 1.4: Ejemplo de un juego en Facebook.

Pero no sólo Facebook se beneficia de la integración de estas aplicaciones en la red social. Las desarrolladores de aplicaciones y juegos para Facebook pueden integrar publicidad dentro de su aplicación y obtienen también la mayor parte del dinero que los usuarios invierten en los créditos Facebook. A la derecha, enmarcada en azul, la publicidad Facebook Ads, por la que Facebook obtiene beneficios. 8

Según una declaración de Jared Morgenstern, encargado de producción de juegos y créditos [25].

1 Introducción En la figura 1.4 se puede apreciar, en la parte superior, enmarcada en rojo, la publicidad mostrada por la aplicación, por la que la desarrolladora de la aplicación obtiene beneficios. Además el distribuir y dar a conocer una determinada aplicación resulta mucho más sencillo si ésta está integrada en Facebook que si fuese una aplicación web alojada en una página independiente.

Privacidad y crítica Facebook ha recibido todo tipo de críticas desde que alcanzó difusión global. Especialmente debido al alcance que está teniendo entre menores, sus efectos psicológicos y sus alarmantes políticas de privacidad. En el momento de aceptar el contrato de términos de uso de la comunidad, el usuario cede la propiedad exclusiva y perpetua de toda la información e imágenes que agregue a la red social. Aunque el director ejecutivo Mark Zuckerberg, declaró, para tranquilizar a los usuarios, que "nunca se utilizará esta información fuera del servicio Facebook", la red social obtiene facultad de utilizar esta información como desee [1]. Si se quiere dar de baja una cuenta, el proceso es muy largo, debido a que Facebook la mantiene activa "en caso de que el usuario decida reactivar su cuenta", y así mismo mantiene copias de esa información indefinidamente. Y en caso de defunción del usuario, su cuenta es mantenida "activa bajo un estado memorial especial por un período determinado por nosotros para permitir a otros usuarios publicar y ver comentarios". La política de privacidad de Facebook ha ido evolucionando haciéndose cada vez más compleja. Desde su lanzamiento en el 2006 hasta la actualidad han sido mucho los cambios que se han introducido a como Facebook administra los datos de los usuarios y que opciones de privacidad puede modificar el usuario[26]. Aunque es cierto que Facebook ofrece cada vez más opciones de personalización de privacidad, poco a poco se ha ido evolucionando desde una política de privacidad sencilla en la que el usuario tenía todo el control sobre su privacidad hasta la complejidad actual en la que, aún teniendo precauciones, un usuario nunca tiene el control absoluto sobre que información puede ver otro usuario, aún no siendo un contacto suyo[27]. La estrategia obvia de Facebook ha sido siempre ir ganando terreno en la utilización de la información personal de los usuarios a medida que la red social crecía y se hacía casi imprescindible para sus integrantes. Así, a pesar del descontento por parte de los usuarios respecto a la introducción de varios cambios en la privacidad y la aparición eventual de problemas

1.2 Las redes sociales en la actualidad de seguridad que afectan a la seguridad[28, 29], la difusión de Facebook es actualmente tan grande que puede permitirse molestar a sus usuarios comprometiendo su privacidad. En la figura 1.5 se puede ver la evolución, en tan sólo unos meses, de las opciones de privacidad por defecto que posee un usuario al crear una cuenta en Facebook. Contar con la desinformación y la ignorancia de sus usuarios respecto a como su información personal se administra es parte de la estrategia de Facebook. De esta forma, estos cambios gradualmente introducidos en las opciones de privacidad por defecto para nuevos usuarios, permiten a Facebook que los usuarios que no se preocupan por cambiar estas opciones expongan mucha más información al resto de usuarios o a Internet general. Cuanto mayor sea la cantidad de información que los usuarios comparten mayor dinamismo habrá dentro de la red social.

Figura 1.5: Comparativa entre las opciones de privacidad por defecto de Noviembre de 2009 y Abril de 2010.

¿Porqué tiene tanto éxito? En los apartados anteriores hemos ido comentando diferentes características que nos han ido dando una idea de porque Facebook ha llegado a ser la red social más importante en Internet actualmente. Si bien es cierto que no es el primer servicio de red social existente y se sienta en las bases establecidas por otros proyectos anteriores, Facebook introduce varias características nuevas y mejora las ya existentes, emplea un modelo de negocio

1 Introducción muy inteligente y no deja de actualizarse e innovar. Algunas de las características clave en su éxito son[30]: El news feed: Un flujo de novedades de contactos que se actualiza constantemente dando información relevante de forma pasiva. El botón “me gusta” y “compartir”: Aunque su funcionamiento es muy sencillo, todo el contenido de Facebook, los juegos, las aplicaciones, las páginas, se difunde a través de la red sobre todo mediante una de estas dos opciones. Además Facebook permite elegir con que usuarios compartir cada elemento para el que pulses en compartir. El sistema de publicidad: Es sencillo de usar, puedes escoger con precisión a quién hacer llegar tu anuncio y sólo pagas por cada vez que alguien hace clic en tu anuncio. Una API avanzada para el desarrollo de juegos y aplicaciones. Algunos juegos y aplicaciones contribuyeron en gran medida a dar popularidad a Facebook. Como ejemplo, Farmville mantiene 81 millones de usuarios activos 9 y muchos usuarios se registran en Facebook principalmente para jugar a este juego. No es sólo una red social para el entretenimiento, es una oportunidad de negocio para muchas empresas, un punto de reunión para asociaciones y una forma de acceder a noticias de interés general.

1.3.

Qué es SigoJoven y a quién va dirigido

SigoJoven.com es una red social orientada a mayores de cuarenta que se encuentra aún en pleno desarrollo. Aunque se centra en usuarios españoles se está haciendo un esfuerzo por hacer la web interesante para cualquier usuario hispanoparlante. Sigojoven.com ofrece a sus usuarios todas las herramientas características de una red social. Cada usuario dispone de un espacio propio para compartir fotos, vídeos e información con otros usuarios de la red que se hayan vinculado a su perfil. Además, existe un buscador avanzado de gente para facilitar el contacto entre antiguos compañeros de 9

A fecha de Abril de 2010.

1.4 Situación de SigoJoven.com en el panorama de las redes sociales en España colegio, universidad o trabajo o crear nuevos lazos de amistad entre los usuarios de la red. La gran diferencia de SigoJoven respecto a otras redes sociales es la gran oferta de cultura, información y ocio que presenta. La idea es que sus usuarios, además de poder añadir contenido e interactuar con otros usuarios, entiendan la web como un medio para estar actualizado con las últimas noticias y aprender sobre diversos campos. Para ello se integra en la red social una agenda cultural y una sección de grupos con grupos especiales creados por el administrador. Cualquier usuario puede añadir actividades a la agenda cultural (sección de actividades) pero muchas son añadidas por el equipo de SigoJoven para que la oferta sea más completa. Los grupos funcionan como blogs. Cualquier usuario puede crear un grupo, pero algunos grupos especiales, como son el de Noticias, Museos del Mundo, Cultura y movimiento o El rincón del Artista, son creados por el administrador y sus posts son escritos por las redactoras del equipo de SigoJoven. Aunque en general los usuarios también pueden publicar sus posts en estos grupos. La aplicación esta siendo desarrollada utilizando el framework Ruby on Rails. Las ventajas y desventajas tanto del uso del lenguaje Ruby como la utilización del framework Ruby on Rails para el desarrollo de aplicaciones web son discutidas más adelante, en la sección 2.2.

1.4.

Situación de SigoJoven.com en el panorama de las redes sociales en España

Para introducir la situación actual de las redes sociales en nuestro país se presentan a continuación datos basados en un estudio sobre redes sociales realizados por la compañía The Cocktail Analysis en Febrero del 2011[31]. El estudio ha sido realizado a partir de una encuesta online a 1793 internautas de edades comprendidas entre 16 y 45 años. Para hacernos una idea del nivel de penetración de las redes sociales en nuestro país se compara el uso de estas con otros dos servicios muy populares y utilizados desde hace muchos años: El correo electrónico y la mensajería instantánea.

1 Introducción

Figura 1.6: Penetración de uso de Redes Sociales y otras comunidades.

Las gráficas muestran la frecuencia de acceso de los internautas a los diferentes servicios. El correo electrónico sigue siendo el servicio consultado con más frecuencia, aunque veremos como ha ido evolucionando el uso que se le da y también veremos como el público más joven está alejándose más rápidamente del correo electrónico y utilizando los servicios de mensajería que ofrecen las redes sociales como sustituto. Con la llegada de las redes sociales ha ido cambiando el rol que juega el correo electrónico en el mundo de las telecomunicaciones, especialmente entre los internautas más jóvenes. Así, el correo electrónico: Se enfoca hacia un uso más formal: Se aleja de la comunicación personal y de lo relacional/el ocio, así como de su función de recirculador de contenidos, para limitarse al terreno de lo profesional y lo oficial “Para cuando buscas trabajo, para recibir facturas del teléfono, para las compras en Internet. . . ”. A ello colabora el hecho de disponer de espacios privados de comunicación en las redes sociales (mensajería privada y el muro) Medio y no fin: Canal de paso para el uso de otras herramientas y soluciones online “Cuando te registras en alguna página tienes que dar un email y entrar para darte de alta”. Y para algunos usuarios, el correo electrónico es la pasarela en el acceso a las redes sociales “Entro en Facebook cuando me llegan los emails con las actualizaciones”

1.4 Situación de SigoJoven.com en el panorama de las redes sociales en España El cambio se acentúa en las nuevas generaciones: Entre el público más joven (16 a 18) se percibe un claro alejamiento respecto del uso del email: se enfatiza el carácter formal del mismo (“En el instituto, para los profesores”); no se renuncia a un hábito como herramienta de comunicación entre igual, ya que nunca estuvo instaurado; y en general, desde la actitud ante el servicio, se percibe de la esfera adulta. Por otra parte, herramientas de mensajería instantánea tan populares como el Windows Live Messenger de Microsoft van limitándose, cada vez más, a la esfera de lo personal y privado: los amigos y familiares más cercanos. Entre los jóvenes era muy común hasta hace muy poco intercambiar el correo electrónico asociado al messenger con nuevos conocidos para mantenerse en contacto. Ahora lo común es utilizar las redes sociales para estar en contacto con nuevos conocidos, tanto reales como virtuales. La integración de mensajería instantánea en redes sociales como Facebook y Tuenti está haciendo que el público más joven comience a hacer uso de la mensajería instantánea por primera vez en una red social, principalmente con Tuenti.

Figura 1.7: Pertenencia a redes sociales/comunidades.

En las gráficas de las figuras 1.7 y 1.8 se compara la pertenencia de los usuarios a

1 Introducción diferentes redes sociales de relevancia en España junto con el uso que los usuarios dan a otros servicios como son los foros, los blogs o la mensajería instantánea.

Figura 1.8: Acceso por edad. Usuarios con cuenta y activos.

Facebook es, a día de hoy, la red social de más relevancia en nuestro país. Sin embargo, para el rango de edad más joven, de los 16 a los 25 años, la red social Tuenti, enfocada al público español únicamente, es la más utilizada. Facebook es también el servicio más utilizado por las personas mayores de 36 años, público objetivo de Sigojoven.com. La separación por género no se muestra aquí por no ser tan relevante. Facebook y Tuenti son utilizadas por hombres y mujeres a partes iguales, lo mismo sucede con las aplicaciones de mensajería instantánea o el servicio de compartición de vídeos YouTube. Sin embargo los servicios de blogs, foros y Twitter (que es también una red social) son más utilizados por el público masculino. Las gráficas anteriormente comentadas nos dan una idea de que redes sociales están más extendidas (mayor número de usuarios activos) pero tan interesante como este dato es analizar que redes sociales tienen una mayor frecuencia de acceso por parte de sus usuarios, es decir, qué redes sociales generan más interés en sus propios usuarios. Esto se muestra en la figura 1.9. En este caso Tuenti sube a la primera posición con una frecuencia de acceso por parte de sus usuarios un poco superior a la de Facebook. Los usuarios de Tuenti son más jóvenes y por tanto tienen más tiempo libre para emplear en Internet, pero también

1.4 Situación de SigoJoven.com en el panorama de las redes sociales en España para relacionarse con sus amistades en el mundo real lo cual repercute en como se relacionan luego dentro de la red social.

Figura 1.9: Frecuencia de acceso.

Otro gráfico muy interesante que presenta este estudio, comparando la evolución en el uso de las distintas redes sociales y otros servicios tras un periodo de algo más de un año, se puede ver en la figura 1.10.

Figura 1.10: Evolución de pertenencia a redes sociales.

1 Introducción En general es sorprendente lo rápido que aumentan o disminuyen en popularidad estos servicios y redes sociales, prueba de que Internet es un mercado muy competitivo en el que es difícil mantener un buen ritmo de crecimiento durante un periodo de tiempo relativamente corto. Mientras que redes sociales de una “generación anterior” como MySpace o Hi5 decrecen en número de usuarios Tuenti experimenta un gran crecimiento y mayor aún es el ritmo al que ha crecido Facebook, la red social más popular a nivel nacional e internacional. Esto se confirma en esta otra gráfica extraída de la herramienta Google Trends:

Figura 1.11: Comparativa de visitas únicas diarias en España.

A pesar de estar SigoJoven incluida en la comparativa, su tráfico es insignificante en comparación con Facebook o Tuenti y no se puede apreciar en la gráfica. SigoJoven no es la única opción en la red para usuarios mayores de 40 que quieran formar parte de una red social. La competencia más directa a SigoJoven la representan las webs Mayormente.com, Activagers.es y el propio Facebook.com. Mayormente: Está orientada a usuarios mayores de 50. Es la web que más similitudes tiene con SigoJoven. La mayoría de sus usuarios son españoles y hay mucho contenido sobre cultura, ocio y noticias recogido en una sección llamada “Magazine” y creada por los propios administradores. Además tiene una media de 25 usuarios activos en un momento dado que es similar a la media de usuarios activos de SigoJoven.

1.4 Situación de SigoJoven.com en el panorama de las redes sociales en España Activagers: Es un producto de la compañía alemana Activagers AG, la web está disponible en muchos idiomas. A pesar de tener una presentación impecable y ofrecer todas las herramientas que una red social debe poseer, presenta muy poca actividad. El problema podría ser falta de marketing y la dificultad de atraer a usuarios españoles sin poder ofrecer contenidos interesantes relacionados con eventos y noticias locales. Facebook: Es un serio competidor para SigoJoven por lo extendida que está esta red social hoy en día. Sin embargo Facebook puede ser complicada de utilizar para personas con pocos conocimientos de informática, el tamaño de letra es muy pequeño y los menús más complejos y carece de contenido específico relacionado con eventos y noticias en las diferentes regiones del país. Desde luego la idea de Facebook es que todo el contenido y eventos sea publicado por los propios usuarios, pero es muy probable que entre las personas mayores no sea tan elevada esa participación activa en la creación de contenido, por lo que es interesante que hayan secciones creadas por los administradores donde los usuarios participen comentando y compartiendo las noticias con otros usuarios. Como se puede observar en la siguiente gráfica, obtenida a partir de datos publicados por Facebook a fecha de Marzo de 2010, en España Facebook es utilizado principalmente por personas entre los 20 y los 35 años, suponiendo apenas un 20 % de los usuarios totales la cantidad de usuarios mayores de 40 años que utilizan Facebook:

Figura 1.12: Usuarios de Facebook por rangos de edad.

1 Introducción Desde su creación SigoJoven busca atraer a un público que aún no se hubiese fidelizado a ninguna red social por no existir una web adecuada a las necesidades de una persona más mayor y en general menos experimentada a la hora de navegar por Internet. Como se muestra en la siguiente figura, extraída de una campaña de marketing, Sigojoven.com busca ser para los usuarios mayores de 40 años lo que ya son Tuenti y Facebook para su público objetivo correspondiente. Es más, algunas de sus campañas publicitarias van dirigidas al público joven sugiriendo a hijos y nietos que les hablen a sus padres y abuelos de Sigojoven.com y así no verse en la situación de compartir la red social de sus amigos con sus familiares.

Figura 1.13: SigoJoven, Facebook y Tuenti posicionados según la edad de sus usuarios.

A pesar de que el planteamiento es bueno y como hemos visto a lo largo de esta sección existe, efectivamente, un hueco por cubrir en el uso de las redes sociales en España que es el de los usuarios mayores de 40 años, esta idea podría no funcionar. Con el paso del tiempo sin duda va a haber una evolución, pero a día de hoy los usuarios mayores son menos activos y crean menos contenido, tienen “miedo” a utilizar determinadas herramientas y sobre todo se preocupan por la privacidad más que los jóvenes. SigoJoven lleva un año y medio online y cuenta con unos 50.000 usuarios registrados. Aunque a un ritmo lento, crece en número de registros. En cambio el número de usuarios activos se mantiene constante. Para seguir creciendo en usuarios registrados y conseguir que estos se fidelicen y visiten la página con frecuencia se plantean varias soluciones a corto y largo plazo tanto de diseño como de funcionalidad. A lo largo de este documento se habla de las diferentes soluciones planteadas y más concretamente, en los capítulos 3 y 4, se analiza el desarrollo de algunas de ellas.

2 Presentación de la aplicación 2.1.

Características, objetivos de la aplicación

El motor de SigoJoven.com, escrito en Ruby on Rails, ha sido heredado de cinemavip.com, que es también una red social aunque con unos objetivos y público objetivo muy distintos. Partiendo de esa base que implementaba parte de la funcionalidad requerida se necesitaba una completa remodelación del diseño de la web y añadir mucha funcionalidad para alcanzar los objetivos de la aplicación A nivel general los objetivos a medio plazo de la aplicación son: 1. Crear una comunidad con contenido que atraiga todo tipo de usuarios pero dentro de un rango de edades (mayores de 40 años). Esta comunidad contará con todas las herramientas básicas de las que está compuesta una red social, pero con algunos matices: Una página de inicio pública y otra privada en la que los usuarios pueden ver actualizaciones de contactos y eventos en los que están interesados. Perfiles de usuario personalizables y con la posibilidad de subir fotos asociadas al perfil. Además deberá haber un muro en el perfil donde los contactos del usuario podrán dejarle mensajes visibles por otros usuarios. Un buscador de gente. Mensajería privada. Grupos. Funcionan como blogs, pueden ser públicos, privados o destacados: • Los grupos públicos aparecerán en el buscador público de grupos y todos los usuarios podrán unirse a ellos y participar escribiendo posts.

2 Presentación de la aplicación • A los grupos privados los usuarios solo pueden acceder si son invitados por uno de sus contactos. • Los grupos destacados son creados y administrados únicamente por los administradores de la web. Están reservados para grupos de interés general como el de noticias, cultura, moda y belleza, tecnología,etc.; y también para aquellas empresas o colectivos que quieran tener un grupo personalizado y que sea más visible desde el buscador de grupos. Actividades. Los eventos funcionan de forma distinta en SigoJoven. La idea es que la sección de actividades de SigoJoven se convierta en una agenda cultural actualizada por los propios usuarios de sigojoven pero accesible también para cualquier visitante externo. Los usuarios podrán crear actividades, compartir actividades con sus contactos expresando cuales les gustan y enterarse de en que actividades están interesados sus contactos. Además será posible la asignación, por parte del administrador, de actividades destacadas (muy similar a los eventos patrocinados de Tuenti). Éstas estarán más visibles en el buscador de actividades y en las páginas de inicio pública y privada. Las actividades destacadas forman parte del modelo de negocio de SigoJoven del que se hablará más adelante. 2. Adaptar la aplicación para implementar el modelo de negocio de SigoJoven. Para la incorporación de publicidad según el modelo de negocio de SigoJoven (especificado en la sección 2.3.2) es necesario: Adaptar todas las secciones para la incorporación de banners publicitarios en un formato homogéneo para todas las secciones de la web (formato Medium Rectangle). Una sección de ofertas. Los usuarios que lo deseen podrán registrar un perfil para su empresa y publicar sus ofertas. Estás ofertas podrán ser publicitadas de forma aleatoria en las diferentes secciones de SigoJoven y los usuarios podrán subscribirse a una empresa para recibir sus ofertas en su página de inicio privada.

2.2 Descripción técnica

2.2.

Descripción técnica

Como ya se ha comentado en el punto 2.1, SigoJoven.com se desarrolla a partir de una versión inicial de lo que es la actual comunidad del mundo audiovisual cinemavip.com. A partir de esta versión inicial se han realizado muchas modificaciones, añadido secciones e implementado nuevas funcionalidades. Se ha evitado, sin embargo, modificar la estructura de la base de datos en todo momento.

2.2.1.

Lenguajes empleados en el desarrollo

La aplicación utiliza el framework Ruby on Rails en su versión 2.1.0 1 . Varios lenguajes son empleados, cada uno tiene su función y todos están relacionados entre sí: Se utiliza Ruby como lenguaje base. En la arquitectura Modelo-Controlador-Vista, que veremos más adelante, los modelos y controladores están escritos íntegramente en Ruby; es en las vistas donde se integra ruby con otros lenguajes. En las vistas, el lenguaje principal es html. De hecho el código en lenguaje Ruby integrado en ellas va a ser traducido a html antes de ser interpretado por el navegador. Para combinar código html con código escrito en Ruby en una vista se utiliza el sistema de plantillas eRuby (ó Rhtml), éste sistema proporciona una sintaxis especial para integrar el código Ruby junto con el lenguaje html conformando un fichero rhtml[2]. Para modificar el diseño y colocación de los elementos se utiliza el lenguaje CSS (Cascading Style Sheets). A cada elemento html se le puede puede asignar un id o class y modificar sus propiedades definiéndolas en un fichero css asociado al fichero html donde se encuentra dicho elemento. Javascript permite introducir código a ejecutar por el cliente en vez del servidor. Es útil para crear contenido dinámico en una página web (cambios en la página web sin la necesidad de que la información sea enviada al servidor previamente), para el uso de técnicas AJAX y también para mejorar la interfaz de usuario[1].. AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web que combina tecnologías ya existentes para proporcionar aplicaciones interactivas que 1

A fecha de Octubre del 2010 la versión disponible es la 3.0.0

2 Presentación de la aplicación se ejecutan en el navegador del cliente mientras se mantiene una comunicación asíncrona con el servidor en segundo plano. Ajax permite por lo tanto hacer cambios dinámicos que afectan a una porción de una página web sin tener que recargar la página web completa; algo ampliamente utilizado en la web 2.0. Ruby on Rails es el framework que de forma sencilla integra todos estos lenguajes, proporciona herramientas para simplificar tareas comunes y facilita la comunicación entre modelos, controladores y vistas.

2.2.2.

Ruby on Rails

Ruby on Rails es un framework de código abierto escrito en el lenguaje de programación Ruby que trata de combinar la simplicidad con la posibilidad de desarrollar aplicaciones del mundo real escribiendo menos código que con otros frameworks y con un mínimo de configuración[1]. Un framework es una estructura conceptual y tecnológica definida que proporciona una estructura y una metodología de trabajo con la cual un proyecto software puede ser organizado y desarrollado. Hace una abstracción del uso genérico de un lenguaje de programación (en este caso Ruby) y proporciona una una API bien definida para así dar un uso específico a ese lenguaje que, en el caso de Ruby on Rails, consiste en el desarrollo de aplicaciones web. Típicamente, puede incluir soporte de programas, bibliotecas y un lenguaje interpretado para ayudar al desarrollo de un proyecto. Los principios fundamentales de Ruby on Rails incluyen No te repitas (del inglés Don’t repeat yourself, DRY) y Convención sobre configuración. No te repitas significa que las definiciones deberían hacerse una sola vez. Dado que Ruby on Rails es un framework de pila completa, los componentes están integrados de manera que no hace falta establecer puentes entre ellos. Por ejemplo, en ActiveRecord (proporciona una abstracción de la base de datos), las definiciones de las clases no necesitan especificar los nombres de las columnas en la base de datos; Ruby puede averiguarlos a partir de la propia base de datos, de forma que definirlos tanto en el código como en el programa sería redundante. Convención sobre configuración significa que el programador sólo necesita definir aquella configuración que no es convencional. Por ejemplo, si hay una clase Historia en

2.2 Descripción técnica el modelo, la tabla correspondiente de la base de datos es historias, pero si la tabla no sigue la convención (por ejemplo blogposts) debe ser especificada manualmente (set_table_name "blogposts"). Así, cuando se diseña una aplicación partiendo de cero sin una base de datos preexistente, el seguir las convenciones de Rails significa usar menos código.

Características técnicas de Ruby on Rails

Utiliza la arquitectura Modelo-Vista-Controlador (MVC) para organizar el código de la aplicación. Esta arquitectura separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos[9]: • El Modelo es el objeto que representa los datos del programa. Maneja los datos y controla todas sus transformaciones. El Modelo no tiene conocimiento específico de los Controladores o de las Vistas, ni siquiera contiene referencias a ellos. Es el propio sistema el que tiene encomendada la responsabilidad de mantener enlaces entre el Modelo y sus Vistas, y notificar a las Vistas cuando cambia el Modelo. • La Vista es el objeto que maneja la presentación visual de los datos representados por el Modelo. Genera una representación visual del Modelo y muestra los datos al usuario. Interactúa con el Modelo a través de una referencia al propio Modelo. • El Controlador es el objeto que proporciona significado a las ordenes del usuario, actuando sobre los datos representados por el Modelo. Cuando se realiza algún cambio, entra en acción, bien sea por cambios en la información del Modelo o por alteraciones de la Vista. Interactúa con el Modelo a través de una referencia al propio Modelo. En una aplicación web la vista es la página HTML, el CSS y todo lo que el usuario vea en la pantalla. El controlador es el código que provee de datos dinámicos a la página, es el que modifica la vista y el modelo según sea necesario. Y el modelo contiene clases representativas de la aplicación o sea los datos de la base de datos.

2 Presentación de la aplicación

Figura 2.1: Utilización correcta de la arquitectura MVC.

REST : Patrón de diseño para aplicaciones web. La implementación más conocida de un sistema siguiendo este patrón es el World Wide Web[32]. Aunque REST no es un estándar, está basado en estándares (HTTP, URL, Tipos MIME). Para diseñar una aplicación que siga los principios REST (se les llaman aplicaciones RESTful) los desarrolladores deben ceñirse a algunas restricciones: • Identificación de recursos y manipulación de ellos a través de representaciones. Esto se consigue mediante el uso de URIs. • El estado actual de una aplicación Web debería ser capturada en uno o más documentos de hipertexto, residiendo tanto en el cliente como en el servidor. El servidor conoce el estado de sus recursos, aunque no intenta seguirle la pista a las sesiones individuales de los clientes. Esta es la misión del navegador, el sabe como navegar de recurso a recurso, recogiendo información que el necesita o cambiar el estado que el necesita cambiar. • Mensajes autodescriptivos. REST dicta que los mensajes HTTP deberían ser tan descriptivos como sea posible, indicando la acción a realizar: GET, POST, PUT y DELETE. Esto hace posible que los intermediarios interpreten los mensajes y ejecuten servicios en nombre del usuario. Un ejemplo del uso que Rails hace del patrón REST es la siguiente definición de una ruta en el archivo routes.rb que se encarga de asignar correspondencias entre URLs y controladores y acciones2 .

Una acción es una función dentro de un controlador. Muchas veces contienen código relacionado con una vista concreta.

2.2 Descripción técnica La simple línea de código: map.resources :fotos

Nos habilita todas las siguientes URLs automáticamente[33]: Verbo

URL

controlador

acción

usado para

GET

/fotos

Fotos

index

muestra un listado de todas las fotos.

GET

/fotos/new

Fotos

new

POST

/fotos

Fotos

create

crea una nueva foto.

GET

/fotos/1

Fotos

show

muestra una foto determinada.

GET

/fotos/1/edit

Fotos

edit

devuelve un formulario HTML para editar una foto.

PUT

/fotos/1

Fotos

update

actualiza una foto determinada.

DELETE

/fotos/1

Fotos

destroy

borra una foto determinada.

devuelve una formulario HTML para crear una nueva foto.

Incluye herramientas que facilitan tareas comunes[2]:

• Scaffolding: Es un método de meta-programación que genera el modelo, vista y controlador correspondiente a un recurso de la aplicación en una sola operación y de forma automática: Por ejemplo, escribiendo en la consola de Linux: $ script/generate scaffold Post name:string title:string content:text

Se generarán y modificarán los siguientes ficheros / directorios[10]:

2 Presentación de la aplicación

Figura 2.2: Ficheros creados y modificados por el método Scaffolding the Rails. • Rake: Es una herramienta de generación o automatización de código. Su funcionalidad es similar a la de SCons o make pero rake está escrito en Ruby y los Rakefiles (equivalentes a los Makefiles de make) utilizan la sintaxis del lenguaje Ruby con lo que no es necesario aprender ninguna sintaxis específica de herramientas de generación de código[2]. • WEBrick: Es una librería Ruby que provee de un servidor HTTP sencillo. Es utilizado para probar aplicaciones en un entorno de desarrollo pero para entornos de producción los desarrolladores prefieren otros servidores web como son Mongrel, Phusion Passenger o el más reciente Unicorn. Rails consta de los siguientes componentes para la creación de aplicaciones web[11]: • Action Controller: Maneja los controladores de la aplicación. Procesa peticiones, extrae parámetros, ejecuta. Ejemplo: gestión de sesiones, template rendering, etc. • Action View: Maneja las vistas de la aplicación. Puede crear HTML y XML. Incluye soporte para AJAX built-in.

2.2 Descripción técnica • Active Record: Base de los modelos de datos. Provee independencia de la DB, funcionalidad básica CRUD, capacidad avanzada de búsqueda, relaciona modelos, etc. • Action Mailer: Framework para crear servicios de e-mail. Se puede usar para enviar, recibir y procesar e-mails. • Active Resource: Framework para gestionar la conexión entre objetos de negocio y RESTful web services. Implementa el mapeo entre estos, con la semántica CRUD3 . • Railties: Código del núcleo de Rails que crea nuevas aplicaciones y las conecta con los frameworks en una sola aplicación. • Active Support: Gran colección de clases y extensiones de la biblioteca estándar de Ruby que se consideraron útiles para Rails y se ponen a disposición del programador. Ajax on Rails: Rails proporciona diferentes facilidades que hacen más fácil implementar aplicaciones Ajax. Rails incluye el framework de Javascript Prototype (una serie de herramientas que proporcionan llamadas Ajax y otra funcionalidad habitual en las tareas cliente-servidor) y script.aculo.us, una biblioteca en Javascript con mejoras en la interfaz de usuario (controles avanzados en los formularios, efectos visuales, arrastrar y soltar, etc.). Sigojoven hace uso de todas estas librerías para los formularios, el administrador de imágenes y algunos efectos visuales. En la actualidad la opción preferida para implementar Ajax es JQuery y no Prototype, pero es posible emplear JQuery con Rails 2 haciendo algunas modificaciones4 . Rails utiliza el gestor de paquetes RubyGems de Ruby para la distribución de programas y librerías en Ruby. Los paquetes gestionados por RubyGems se llaman gemas y permiten añadir a un proyecto software funcionalidades y herramientas de desarrollo creadas por otros 3

CRUD es el acrónimo de Crear, Obtener, Actualizar y Borrar (Create, Retrieve, Update y Delete en inglés); y hace referencia a las funciones básicas que deben ser implementadas en una base de datos para ser considerada completa (http://en.wikipedia.org/wiki/Create,_read,_update_and_delete) 4 En la versión 3 de Ruby on Rails, publicada el 29 de septiembre del 2010, aunque se incluye por defecto el framework Prototype, las funciones proporcionadas por Rails para la programación en Javascript son independientes del framework de Javascript utilizado.

2 Presentación de la aplicación desarrolladores de forma casi instantánea. La comunidad RubyGems.org alberga la mayoría de las gemas disponibles y, a fecha de Octubre del 2010, cuenta con 16.963 gemas en sus repositorios[12, 1]. Otra forma de distribuir código desarrollado por otros programadores y reutilizable en otras aplicaciones Rails son los plugins. Hablemos de las diferencias entre plugins y gemas en el apartado 2.2.3. Rails soporta varias SGBDs (Sistemas de Gestión de Bases de Datos), incluyendo Firebird, MySQL, PostgreSQL, SQLite, IBM DB2, Oracle y Microsoft SQL Server. SQLite es la opción por defecto a partir de la versión 2.0 de Rails. La principal ventaja de SQLite es la simplicidad. Es fácil de administrar, mantener y personalizar; y funciona bien en aplicaciones web sin demasiada carga de acceso a la base de datos. Pero en aplicaciones web más complejas es preferible (y está más extendido) el uso de otras SGBDs como son MySQL y PostgreSQL. Por lo tanto una buena opción es utilizar SQLite durante el desarrollo de una aplicación y posteriormente migrar la base de datos a MySQL[1, 13]. Rails intenta mantener la neutralidad con respecto a la base de datos, la portabilidad de la aplicación a diferentes sistemas de base de datos y la reutilización de bases de datos preexistentes. Sin embargo, debido a la diferente naturaleza y prestaciones de los SGBDs, el framework no puede garantizar la compatibilidad completa.

¿Mejor en Ruby on Rails?

Ruby es un lenguaje de programación relativamente moderno. Fue concebido en 1993 y en 1995 se lanzó su primera versión pública (Ruby 0.95)[2]. Aunque no ha llegado a ser tan popular como otros lenguajes de programación con más trayectoria (como C y C++) o los más recientes Java y PHP, Ruby fue extendiéndose lentamente y generando interés fuera de Japón. En el 2005, gracias al nacimiento de Ruby on Rails, se produjo un crecimiento exponencial en el uso e interés por el lenguaje Ruby[14].

2.2 Descripci贸n t茅cnica

Figura 2.3: Popularidad de los lenguajes de programaci贸n.

Figura 2.4: Evoluci贸n en la popularidad del lenguaje Ruby (y por tanto del framework Ruby on Rails).

2 Presentación de la aplicación Tiobe Software es una de las referencias más utilizadas para evaluar la popularidad y evolución de los lenguajes de programación. En la tabla (fig 2.3) y a fecha de Abril del 2010 se sitúa a Ruby en el puesto 12 en el ranking de popularidad. En la gráfica (fig 2.4) se puede observar la evolución de la popularidad de Ruby a lo largo de los años, el enorme crecimiento en el 2006 es debido a la aparición del framework Ruby on Rails que utiliza Ruby para el desarrollo de aplicaciones web.

Figura 2.5: Evolución en la popularidad del lenguaje PHP.

Si se compara con la evolución de PHP (ver fig 2.5), la opción preferente para los desarrolladores web en los últimos años, se concluye que Ruby on Rails no está en absoluto sustituyendo a PHP en el desarrollo de aplicaciones web, sino que está creciendo paralelamente a php[17]. Esto es lógico ya que son en realidad dos opciones muy distintas y está en función de lo que necesite cada empresa el elegir una y otra opción. Además la comparación sería aplicable entre Ruby on Rails (que es un framework para Ruby) y PHP on Cake o PHP on Symfony(frameworks para PHP) y no entre Ruby on Rails y PHP. Dado que Ruby on Rails es bastante reciente es difícil analizar cuál será su evolución en un futuro próximo. Hay controversia entre las ventajas de usar un framework y no usarlo así como hay controversia entre si Rails es una mejor opción que PHP para desarrollar una web. El uso de frameworks puede hacer que el programador se limite bastante a lo que el framework le permite. Un ejemplo de este problema es el siguiente:

2.2 Descripción técnica Rails se abstrae de las diferencias que pueda haber entre las distintas bases de datos, esto permite que se pueda ejecutar la misma aplicación utilizando como sistemas de gestión de bases de datos: Oracle, MySQL, SQL Server, etc. Pero esta misma característica de Rails impide que la aplicación se pueda beneficiar de las ventajas individuales que puedan ofrecer cada uno de estos SGBDs[34].

La opinión de que lenguaje o framework es más ventajoso es muy subjetiva ya que tanto con Rails como con PHP (o cualquier framework para PHP) se puede obtener el mismo resultado final y ambos tienen ventajas y desventajas.

Programar en PHP tiene ventajas muy obvias como la de ser un lenguaje con mucha más trayectoria en el desarrollo web, existe una mayor cantidad de programadores y posiblemente, según afirman varias fuentes, PHP es más estable[35].

Sin embargo Rails está evolucionando rápidamente, ofrece un desarrollo más rápido y más natural, sobre todo si se aprovechan todas las facilidades que proporciona como son el uso de scaffolding o las convenciones en el nombramiento de ficheros y clases y muchos desarrolladores que han trabajado tanto con PHP como con Rails afirman que Rails es más “entretenido” con lo que la motivación del programador es mayor y el desarrollo se acelera.

Por otra parte, se discute que nunca será posible desarrollar para PHP un framework que esté a la altura de Ruby on Rails para el lenguaje Ruby. El propio creador de Ruby on Rails intentó previamente desarrollar un framework para PHP pero finalmente prefirió desarrollarlo utilizando Ruby[36]. Una diferencia clave entre Ruby y PHP es que Ruby permite redefinir, extender o modificar clases ya existentes, esto permite a plugins y gemas modificar el comportamiento por defecto de ciertas clases pertenecientes al núcleo de Rails.

Entre los varios importantes proyectos escritos en Ruby on Rails destacan Twitter5 y Diáspora, una prometedora red social descentralizada y libre de problemas de privacidad, aún en fase de prueba y desarrollo[37]. 5

Twitter migró parte de su código a otro lenguaje de programación conocido como Scala pero todo su interfaz sigue escrito en Ruby on Rails.

2 Presentación de la aplicación

2.2.3.

Plugins y gemas

Lo más común en una aplicación escrita en Rails es que se reutilice mucho código creado por otros desarrolladores. Este código puede distribuirse tanto en gemas como en plugins. Aunque mucho código se distribuye indiferentemente como plugin o como gema y además una gema puede siempre ser instalada como un plugin, existen algunas diferencias importantes a la hora de decidir como distribuir el código o como utilizarlo en una aplicación[38]: Las gemas están pensadas para Ruby en general, se instalan para todo el sistema y están disponibles para cualquier aplicación que utilice Ruby. Se instalan o desinstalan mediante el gestor de paquetes RubyGems. Los plugins extienden el código base de una aplicación Rails añadiéndole funcionalidad. Se instala sólo para una determinada aplicación mediante el comando ruby script\plugin install [url or nombre del plugin]. Es interesante ver como, dada la cantidad y variedad de gemas y plugins existentes, es posible desarrollar una aplicación en Rails combinando varios plugins y gemas sin necesidad de conocimientos avanzados en programación. Hay incluso plugins que proporcionan toda la funcionalidad de una red social básica, como es por ejemplo Communityengine (http://communityengine.org). Sigojoven (o Cinemavip) sin embargo no ha hecho uso de este tipo de plugins. Hay que tener en cuenta que el uso de este tipo de plugins facilita y agiliza mucho el desarrollo de una aplicación pero se pierde en flexibilidad ya que siempre es más sencillo modificar el código propio que entender y modificar el código creado por otro desarrollador. Sigojoven.com utiliza varios plugins más simples y gemas, algunos de ellos son ampliamente utilizados por la comunidad de desarrolladores de Ruby on Rails y merecen ser comentados: Will_paginate: Esta gema proporciona un método que, a partir de un conjunto de elementos y un número de elementos por página, limita automáticamente el número de elementos mostrado por cada página y añade un paginador. Así en una página web que muestra un listado de usuarios, se le pasaría el conjunto

2.2 Descripción técnica de usuarios y cuantos usuarios se quieren mostrar por página; cada vez que se muestre en una vista ese conjunto de usuarios, el plugin limita el numero a mostrar y presenta un paginador para ir avanzando en el listado de usuarios[39]. Attachment-fu: Es un plugin que hace las subidas de fichero más completas y sencillas. Sigojoven utiliza este plugin para organizar las imágenes que los usuarios suben a la web. Con una línea del tipo: has_attached_image :thumbnails => {:tinny => ’45x45>’, :medium => ’100x100>’}, se está creando, para cada imagen subida por un usuario, dos imágenes más reducidas que serán las que se presenten en las páginas HTML en vez de las imágenes originales por una cuestión de reducción de tiempo de carga[40]. AssetPackager: Es un plugin que se encarga de comprimir y unir los varios ficheros .css o .js (Javascript) que utiliza cada una de las páginas que el servidor envía al navegador. De estar forma se ahorra ancho de banda y se aumenta la velocidad carga de la página web. Se hablará más de AssetPackager en el apartado 4.3[41]. BackgrounDRb: Es un plugin que proporciona un método de ejecución de tareas periódicas o programadas en segundo plano, esto es, sin necesidad de que la aplicación se bloquee esperando por la ejecución de estas tareas[42]. Restful-authentication[43]: Proporciona todos los métodos necesarios para gestionar el registro de usuarios, validación de emails, control de sesión de los usuarios, etc.

2.2.4.

Estructura de directorios y ficheros que componen SigoJoven

La estructura típica de una aplicación construida con el framework Ruby on Rails es la que se muestra en la figura 2.6. El directorio db contendrá un subdirectorio llamado migrate que alberga los archivos de migración creados automáticamente mediante scaffolding (explicado en la sección 2.2.2) o editados manualmente. Estos ficheros de migración son el intermediario entre Rails y los SGBDs: especifican que estructuras de datos van a existir en la base de datos. Para que la estructura sea migrada a una base de datos en concreto se utiliza el comando rake db:migrate.

2 Presentación de la aplicación

Figura 2.6: Estructura de una aplicación creada con Ruby on Rails.

En el caso de estar utilizando SQLite3, el SGBDs por defecto en Rails, habrá un fichero entorno.sqlite3 por cada uno de los entornos definidos en ./config/environment.rb; siendo estos ficheros las bases de datos mismas. Esto es una particularidad de SQLite, que en vez de tener un proceso servidor separado, lee y escribe en un único fichero alojado en el disco local sin necesidad de comunicarse a través de un servidor intermediario[44]. En el subdirectorio environments dentro del directorio config se almacenan los ficheros de configuración específicos para cada entorno. Generalmente se definen tres entornos distintos: development, test y production. Editando los ficheros de configuración específicos se configuran los componentes de Rails y se especifican que gemas van a ser requeridas de forma individual para cada uno de los entornos. Además, con el fichero

2.2 Descripción técnica database.yml en el directorio config se especifican distintas bases de datos para distintos entornos. De esta manera es posible tener una base de datos muy reducida y controlada para el entorno de desarrollo o prueba y una más extendida para producción. En el directorio vendor Rails busca por plugins, gemas o versiones de Rails anteriores. Es en general el directorio que alberga cualquier tipo de extensión al código de la aplicación principal y que ofrece además la posibilidad de “congelar” versiones de gemas y de Rails (que para Ruby es otra gema más). Esto es muy útil para evitar problemas de compatibilidad al actualizar el sistema con gemas más recientes o nuevas versiones de Rails.

2.2.5.

Base de datos

En el fichero /config/database.yml se definen las bases de datos que utilizará el sistema para cada uno de los entornos definidos en /config/environments, así como el nombre de usuario y contraseña para acceder a esa base de datos. Sigojoven utiliza tres bases de datos mysql, una para cada uno de los entornos utilizados: development, test, production. Como ya se ha explicado en apartados anteriores Rails utiliza unos ficheros llamados ficheros de migración que definen la información a almacenar en una base de datos abstrayéndose de que tipo de base de datos se va a utilizar. Por lo tanto sería posible utilizar Sigojoven con otra base de datos sin tener que volver a definir todas las variables que se van a almacenar, sino simplemente migrando la información de estos ficheros a la nueva base de datos mediante el comando rake db:migrate (pero esto no traslada los datos de la base de datos antigua a la nueva, tan sólo las definiciones). Durante la programación en Ruby on Rails el desarrollador prácticamente se abstrae de la existencia de una base de datos. Los ficheros de migración son creados automáticamente mediante scaffolding sólo en ocasiones es necesario modificarlos manualmente, el almacenamiento o eliminación de datos en la base de datos son gestionadas trabajando con los modelos, nunca directamente con comandos propios de la base de datos, y las bases de datos se pueden gestionar (eliminar, resetear, migrar) mediante rake (rake db:migrate, rake db:drop, rake db:create). Sería entonces posible gestionar la base de datos de una aplicación como Sigojoven sin tener conocimientos del lenguaje específico que utiliza esa base de datos, en este caso mysql, aunque es muy recomendable.

2 Presentación de la aplicación

2.3.

Descripción funcional

Ya vimos en el apartado 2.1 de que secciones se compone Sigojoven y cómo, aún siendo siguiendo la pauta de las redes sociales de éxito actuales, introduce algunos elementos nuevos y mezcla elementos propios de otro tipo de aplicaciones web como son los blogs o las agendas culturales. En vez de enumerar una a una todas las características de la aplicación, se da en este apartado una idea de lo que se encuentra el usuario desde el mismo momento en el que se registra en Sigojoven. Nada más acceder a Sigojoven por primera vez el usuario entra en su página de inicio privada. En ella se muestran: un “news feed” en el centro que se irá actualizando con noticias sobre sus contactos; a la derecha cuatro cajas mostrando grupos destacados, grupos del usuario, actividades del usuario y ofertas a las que el usuario se ha subscrito; y a la izquierda varios botones invitando a completar distintos aspectos aún sin rellenar del perfil y una caja de texto con un botón “Invitar” para enviar invitaciones a emails de amigos o familiares. El usuario es añadido automáticamente al grupo correspondiente a su provincia. Destacando sobre todo esto, el mensaje: “Añade una foto para poder visitar el perfil del resto de personas”. Tener una imagen de perfil es, por lo tanto, casi obligatorio en Sigojoven. Desde cualquiera de los botones que invitan a completar el perfil, o desde el enlace en la esquina superior derecha se accede a la sección “Mis datos”. Esta sección va guiando al usuario a lo largo de seis pestañas a completar toda la información sobre su perfil. La información a rellenar es mucha pero sólo es obligatorio subir una imagen de perfil para poder ver el perfil de otros usuarios y subir tres imágenes más para poder acceder a la galería de imágenes de los demás usuarios. Una vez añadida una imagen de perfil y rellenado algunos campos de información sobre sí mismo, el usuario ya puede acceder a toda la funcionalidad de la web. Accediendo a la sección Gente el usuario se encuentra con un listado de usuarios, siendo los primeros de la lista aquellos que están conectados a la web; un buscador de gente y una pestaña llamada “Mis contactos” que muestra un listado de los contactos que ya han sido agregados. Desde este mismo listado, para cada uno de los usuarios mostrados, se puede acceder a su perfil, enviarle un mensaje, agregarlo como contacto, o visitar un

2.3 Descripción funcional listado de los contactos de ese usuario. Todas estas son funciones básicas de una red social, nada nuevo hasta aquí. La sección de Actividades se presenta como una agenda cultural que automáticamente muestra las actividades más inmediatas en la provincia que el usuario introdujo en su registro. Aquí puede apuntarse a actividades y sus contactos serán notificados; también puede ver a que actividades se han apuntado sus contactos. Mediante un sencillo formulario puede añadir él mismo una actividad. Esta sección es actualizada no sólo por los usuarios, también por las redactoras de Sigojoven para asegurarse de que siempre haya varias actividades disponibles en cada provincia. En el índice de actividades se mantienen siempre visibles a la derecha las actividades destacadas, que forman parte del modelo de negocio de Sigojoven. Desde el enlace Mensajes se accede a la bandeja de entrada y mensajes enviados, así como la redacción de mensajes nuevos para enviar a uno o múltiples destinatarios. Los Grupos en Sigojoven funcionan como blogs. Muchos de ellos son visibles para todos los usuarios y son actualizados por el equipo de Sigojoven. Otros son también públicos pero creados por usuarios de la red. Finalmente se pueden crear grupos privados para compartir tan sólo con los contactos del usuario. Al acceder a la sección se puede navegar por los grupos por categorías, ver los últimos posts publicados o crear un grupo propio. A cada grupo le corresponde un fundador, que es quien lo creó. El fundador puede designar uno o varios coordinadores que pueden también modificar el contenido de los posts o configurar el grupo. El resto de usuarios que se unen al grupo son miembros del grupo. Finalmente el usuario puede acceder, en la sección de Ofertas, a un gran listado de empresas que ofrecen descuentos y promociones para los usuarios de Sigojoven. Si el usuario entra en la página de una empresa, además de ver información general sobre ella y acceder a sus ofertas, se puede subscribir a la empresa mediante el botón “Recibir sus Ofertas”. Una vez el usuario se ha subscrito a una empresa, sus ofertas aparecerán en la caja “mis ofertas” de la página de inicio privada.

2.3.1.

Privacidad en Sigojoven

Dejando de lado las críticas sobre la privacidad, que son expuestas en el capítulo 5, se enumeran aquí las diferentes decisiones sobre privacidad que se han tomado a lo largo del desarrollo de la web.

2 Presentación de la aplicación Configuración de privacidad del usuario por defecto: Nada más registrarse el usuario tiene asignadas las siguientes opciones sobre privacidad: • Podrán ver sus fotos sus contactos y los contactos de sus contactos. • Podrán comentar en su perfil y fotos únicamente sus contactos. • Podrá enviarle un mensaje cualquier usuario de Sigojoven. • Su perfil es indexable por los motores de búsqueda. • Se muestra su edad al resto de usuarios. Secciones abiertas a usuarios no registrados: Un usuario de Internet, no registrado en Sigojoven, puede acceder a mucha de la información almacenada en la web, bien sea entrando intencionadamente en Sigojoven.com o accediendo a cualquiera de sus páginas desde los resultados de un buscador. Aunque no se permite ver la página de perfil de un usuario se puede obtener información sobre los usuarios de Sigojoven sin estar registrado: • En la sección gente está disponible el listado entero de usuarios, donde se puede ver su imagen de perfil, un mensaje personal y su nombre y apellidos. • La sección de actividades está disponible en su totalidad a usuarios no registrados. Dentro de la página de cada actividad se puede ver que usuarios van a asistir a esa actividad. Es por tanto factible rastrear a que actividades asiste un usuario específico. • Al igual que sucede con la sección de actividades, la sección de grupos es totalmente accesible por un usuario externo (excepto para los grupos privados). Se puede también saber quién es el autor de cada uno de los posts dentro de un grupo. Otras decisiones sobre privacidad: El modo en que se comparte información es por lo demás bastante similar al de Facebook. Además de las opciones de privacidad mencionadas en el primer punto, falta comentar que no es posible saber que usuarios visitan tu perfil.

2.3 Descripción funcional

2.3.2.

Fuente de ingresos de la empresa. Modelo de negocio

Cuando una persona, asociación o empresa desarrolla una aplicación web con ánimo de lucro hay dos cuestiones económicas fundamentales que resolver: 1. ¿Cómo financiar el proyecto hasta que pueda generar ganancias? 2. ¿Qué modelo de negocio seguir para obtener ingresos una vez el proyecto está consolidado?

Obteniendo la inversión inicial Contar con una gran inversión inicial puede suponer la diferencia entre el fracaso y el éxito en un proyecto web. Aunque para el desarrollo de la aplicación puede contar más el esfuerzo y conocimiento que los recursos económicos, tras el desarrollo y lanzamiento de la aplicación se entra en una fase de marketing en la que las posibilidades de promoción de la web son proporcionales a la situación económica de la empresa en ese momento. En esta fase de marketing, en la que la web no obtiene ingresos o obtiene ingresos muy bajos, se encontraba Sigojoven en el momento de mi incorporación en el equipo. A una empresa o emprendedor con recursos limitados pero con un proyecto innovador y grandes posibilidades de crecimiento se le conoce como compañía start-up o simplemente start-up[45, 1]. Una start-up en su fase inicial puede ser auto-financiada (por el emprendedor o por un grupo de amigos o familiares), financiada por una empresa incubadora de negocios, financiada por Business Angels o subvencionada. La auto-financiación no es siempre posible y aún en caso de serlo puede llegar a ser arriesgado ya que un fracaso supone importantes pérdidas de dinero e incluso el perder algún amigo o socio. Por otra parte, obtener subvenciones no es fácil y menos si son a fondo perdido. En la mayor parte de los casos no se cumplen con los parámetros requeridos por la convocatoria de la subvención o concursan a su obtención demasiadas empresas y solo obtienen finalmente el derecho a la subvención unas pocas[46]. Los Inversores Ángel (o Business Angels) son individuos adinerados que proveen capital para una start-up, usualmente a cambio de participación accionaria elevada. Invierten sus propios fondos y son sumas usualmente elevadas. Suelen apostar por varios proyectos

2 Presentación de la aplicación teniendo en cuenta que la mayoría de ellos fracasarán. La empresa debe presentar al Inversor Ángel un plan de negocio de su proyecto[45, 1]. Sigojoven se ha apoyado en la empresa incubadora DAD (www.dad.es)6 para obtener financiación y asesoramiento en los meses iniciales. Cada cierto tiempo DAD hace una ronda de financiación en la que se discute si seguir financiando a Sigojoven.com mientras ésta no obtiene beneficios suficientes para un auto-mantenimiento[47]. Por supuesto, la empresa incubadora obtiene participación en la empresa a cambio de la financiación.

Figura 2.7: Algunas de las empresas financiadas (o parcialmente financiadas) por DAD.

Generando ingresos: modelos de negocio

Antes de poder introducir publicidad que genere ingresos y que “moleste” a los usuarios; y antes de que las empresas se muestren interesadas en pagar una cuota por publicitarse en la web, un negocio basado en la web 2.0 tiene que tener una base sólida de usuarios asiduos a la web y proponer un modelo de negocio que presente garantías de éxito. 6

DAD fue o es accionista de algunos importantes negocios 2.0 nacionales e internacionales como son Tuenti, Buy-Vip o Xplane.

2.3 Descripción funcional Las grandes webs 2.0 como Facebook, Twitter o Youtube esperaron el tiempo suficiente sin introducir ningún tipo de publicidad (y por tanto generando más pérdidas que ganancias) y tienen hoy en día publicidad poco intrusiva. La publicidad mediante banners está siendo relegada por medios más discretos y muchas veces más rentables también. Algunos modelos de negocio muy comúnmente empleados en webs 2.0 son[48, 49]: Publicidad segmentada: Siguiendo la estela de Google, redes sociales como Facebook han incluido sistemas de anuncios sobre su propia red con una alta capacidad de segmentación que se muestran en las páginas de navegación de los usuarios. Este tipo de publicidad permite a los anunciantes elegir a qué usuarios llega su publicidad y ofrecen normalmente la posibilidad de pagar por clic (pay per click) or por un número de veces que se muestra el anuncio (pay per view). Patrocinio: Es otro formato tradicional que se reinventa en las redes sociales. El patrocinio a través de Páginas Recomendadas o de Eventos es común en Tuenti, sobre todo después del lanzamiento de la herramienta Tuenti Sitios. En Facebook, este sistema también funciona a través de las páginas de mayor envergadura. Y en Twitter se han añadido recientemente los Tweets promovidos. Servicios premium: El usuario paga una mensualidad a cambio de unos servicios premium que ofrece la red social (perfiles destacados, conocer a sus competidores en una oferta de trabajo, acceder a más contactos, etc.). Ejemplos de redes sociales ofreciendo servicios premium son Badoo o Linkedin. Publicidad en vídeo: Más propia de Tuenti que de otras redes sociales. Un vídeo se carga tras el acceso del usuario y se muestra en la esquina superior derecha de la pantalla. Aplicaciones y juegos sociales. Facebook está obteniendo grandes ganancias a partir de estos pequeños juegos virtuales que permiten a los usuarios de las redes sociales implicar a sus contactos de la red social dentro del juego. Como ya vimos en la sección 1.2.3 Facebook utiliza los Facebook Credits para sacar partido a los beneficios que compañías como Zynga obtienen de las aplicaciones que implementan para la red social. Tuenti hace ahora casi exactamente los mismo con Tuenti Juegos y Tuenti Créditos.

2 Presentación de la aplicación Sigojoven: Modelo de negocio a corto y largo plazo Sigojoven no cuenta con una financiación tan cuantiosa como la de Facebook, Tuenti o Twitter y se encuentra en un momento en el que necesita generar ingresos para convencer a sus inversores de que sigue valiendo la pena invertir. Lo cierto es que es el lento crecimiento de la red social lo que está limitando la confianza de los inversores y a la vez esto establece límites en cuanto a que modelo de negocio utilizar. Es evidente que es mucho más sencillo integrar publicidad mediante banners (y más aún si se utiliza AdSense o sistemas similares) que conseguir que las empresas inviertan en el verdadero modelo de negocio de Sigojoven. Como medida inicial para obtener ingresos Sigojoven implementa un sistema tradicional de publicidad mediante banners distribuidos por las diferentes secciones de la web, incluida la página de inicio pública. Este tipo de publicidad representa el modelo de negocio a corto plazo de la web, y se mantendrá a medida que se va introduciendo el verdadero modelo de negocio que es el que se explica en los próximos párrafos.

Figura 2.8: Publicidad en el Sigojoven.com actual.

2.3 Descripción funcional El motor del modelo de negocio de Sigojoven reside en su sección de ofertas. Esta sección consiste en un completo directorio de empresas7 , cada una con una página dedicada donde pueden publicar ofertas para los usuarios de la red social. Registrar una empresa es gratuito (muchas fueron añadidas por el propio equipo de Sigojoven). La empresa puede pagar por cada oferta que añade o puede pagar por uno de los paquetes especiales de los que se hablará más adelante. ¿Como accede a estas ofertas el usuario? Al directorio de empresas se le suma un directorio de ofertas asociadas a las correspondientes empresas. La idea es formar una base de datos de empresas y sus ofertas asociadas y que estas ofertas tengan un valor añadido para los usuarios por ser ofertas exclusivas o difíciles de encontrar fuera de SigoJoven. De este modo, los usuarios pueden elegir entre buscar directamente ofertas que les interesen y seguir las instrucciones de la oferta para obtener el producto con la correspondiente rebaja por pertenecer a Sigojoven; o buscar empresas que les gusten o puedan interesar y activar el botón “Recibir sus ofertas” para recibir notificaciones de ofertas nuevas por parte de la empresa en la página privada de inicio. Otro modo de llamar la atención de los usuarios para que accedan a las páginas de las empresas y a sus ofertas es utilizar los banners publicitarios que se reparten por todas las secciones de la web. Así, en vez de publicitar contenidos externos, que generan pocas ganancias, se le ofrece una mayor cobertura a las empresas que se publicitan en la web y se mantiene al usuario siempre dentro de Sigojoven. Está publicidad podrá hacer además uso de la información que la red social obtiene de sus usuarios, utilizando el sistema de publicidad segmentada por sexo, edad o aficiones que tan bien funciona en Facebook. Este es el verdadero modelo de negocio a largo plazo de la web, y faltaría por establecer un formato homogéneo aunque flexible de publicidad para evitar esos molestos banners con animaciones y colores llamativos que empeoran la experiencia de usuario. Se ofrecen además otras interesantes opciones de promoción de empresas y asociaciones muy propias también de las redes sociales y de la web 2.0: Las actividades destacadas y los grupos destacados. Las actividades destacadas son muy similares a los eventos patrocinados de Tuenti. Son actividades que tienen un espacio reservado en el índice de actividades con lo 7

A fecha de Marzo de 2011 contiene cerca de 7000 empresas registradas.

2 Presentación de la aplicación cual van a estar siempre mucho más visibles que las actividades creadas por los usuarios. Por lo demás funcionan exactamente igual que una actividad normal. Los grupos destacados engloban tanto los grupos creados por los administradores de Sigojoven y mantenidos principalmente por las redactoras de la empresa, como grupos creados a medida de las empresas que lo soliciten. Cada uno de estos grupos tiene asociado un fichero css distinto, por lo tanto son muy personalizables. Sigojoven se pone en contacto con la empresa interesada y se acuerda un diseño para el grupo que luego es programado mediante css para ese grupo en concreto. Algunos de estos grupos se les ofrece también a asociaciones y comunidades de usuarios de forma gratuita. Haciendo uso de todas las posibilidades de promoción de empresas que ofrece la plataforma de la web se ofrecen a las empresas, a parte de la posibilidad de pagar por cada uno de los servicios por separado, tres paquetes especiales que aúnan varias opciones de publicidad para una misma empresa. En resumen lo que oferta cada paquete es[50]: Paquete oro: Está limitado a los 5 primeros patrocinadores de SigoJoven. Incluye la publicación de 5 ofertas simultáneas que se podrán modificar cuantas veces se quiera. Creación de un grupo propio destacado. Espacio destacado (publicidad mediante banners) en la sección de mensajes, la página personal de los usuarios, la página principal pública y el boletín mensual (Newsletter). Paquete plata: Limitado a las 20 primeras empresas que contraten este servicio. Posición prioritaria en el directorio de empresas, destacado por delante de las empresas que hayan contratado el servicio bronce y de aquellas empresas freemium listadas. Incluye la publicación de tres ofertas simultáneas que se podrán modificar cuantas veces se quiera. Espacio destacado (publicidad mediante banners) en grupos destacados y la sección gente. Paquete bronce: Posición destacada en el directorio de empresas, con prioridad sobre las empresas freemium. Incluye la publicación de una oferta que se podrá modificar cuantas veces se quiera. Espacio destacado en grupos públicos y la sección de actividades.

2.3 Descripci贸n funcional

Figura 2.9: Paquetes especiales de publicidad.

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios 3.1.

Brainstorming y priorización de tareas

Al realizar cambios en una aplicación web que ya se encuentra operativa y con tiempo y presupuesto limitados es fundamental el realizar una priorización inteligente de las tareas a desempeñar. Los objetivos fundamentales de SigoJoven, y en general, de cualquier red social, son el captar nuevos usuarios y el conseguir que los usuarios existentes accedan a la red con más frecuencia y durante más tiempo. Por lo tanto, habrá que priorizar los cambios a desarrollar en la aplicación teniendo en cuenta hasta que punto ayudan a alcanzar estos dos objetivos fundamentales pero valorando la dificultad (y por tanto tiempo) de desarrollo de cada tarea. Es preferible, por ejemplo, realizar antes un cambio inmediato aunque no sea de vital importancia que realizar en primer lugar un cambio que involucre a toda una sección de la web y haga que el resto de tareas tengan que esperar varios días. Previamente a este proceso de selección de tareas a realizar es importante estudiar la aplicación buscando puntos débiles, problemas de diseño, necesidades que puedan surgirle a los usuarios y posibles mejoras. Además habrá que “escuchar” al colectivo de usuarios que conforman la red social y saber que carencias y dificultades encuentran al utilizar la aplicación. Así, antes de un ciclo de priorización de tareas / implementación, se realiza una reunión de todo el equipo para determinar que problemas sería necesario resolver primero y que novedades incluir: El SEO expone necesidades relacionadas con el posicionamiento de la web en los buscadores más populares, el director comercial

3.2 Sistemas de captación de usuarios comenta conclusiones sobre el feedback de los usuarios, las redactoras opinan sobre la usabilidad de las herramientas disponibles para interactuar en la web y el ingeniero de software, en este caso yo, es quien plantea el resto de problemas de funcionamiento y necesidad de nueva funcionalidad de la web; desde fallos de estabilidad y problemas de rendimiento hasta sugerencias sobre el diseño y la posibilidad de incorporar nuevas funciones. Además de tratar el tema de la priorización de tareas para la mejora a corto plazo de la aplicación, el equipo hace sesiones de brainstorming (conjuntamente con la priorización de tareas o en reuniones separadas) para, en un ambiente relajado, proponer nueva funcionalidad a la red social que pueda ayudar a la participación de los usuarios, aumentar el numero de registros o mejorar el modelo de negocio. Estas ideas van enfocadas más hacia un futuro, a no ser que surja alguna idea de fácil implementación y de obvia utilidad. Recopilada toda la información del equipo, es el ingeniero de software quién decide que tareas priorizar siempre con el visto bueno del director ejecutivo que supervisa todo tipo de toma de decisiones. Todas las tareas que he realizado durante mi periodo de prácticas en Sigojoven se pueden dividir en tres conjuntos: Tareas de mantenimiento: Que engloba todas aquellas pequeñas tareas que resuelven bugs o implementan funcionalidades mínimas. No serán comentadas en esta memoria. Tareas relacionadas con la captación de nuevos usuarios: Se explican en el apartado 3.2. Rediseño e implementación del nuevo Sigojoven: Se dedica el capítulo 4 entero a explicar estas tareas.

3.2.

Sistemas de captación de usuarios

3.2.1.

Mejorar el posicionamiento en buscadores (técnicas SEO)

Entre las muchas formas que una red social tiene para darse a conocer destacan esencialmente dos, que tienen la característica de ser gratuitas, y que evolucionan y se

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios expanden de forma natural. Por una parte es fundamental el boca a boca: si la experiencia de usuario es buena, aquellos usuarios que encuentren una razón para utilizar la aplicación intentarán que sus amigos formen también parte de la comunidad. Cuanta más gente la conozca y este satisfecha más rápido crecerá la red social. Tan importante como esto, y sobre todo mientras no hay una cantidad de usuarios suficiente como para que la red social crezca por si misma, es la posición que la aplicación social ocupa entre los resultados de búsqueda de los distintos buscadores, principalmente Google. La adaptación de la aplicación de forma que favorezca su posicionamiento en los motores de búsqueda no es trivial, abarca un gran número de técnicas. Las técnicas SEO (Search engine optimization) engloban tareas de modificación de la información y código de las páginas para hacer que estas aparezcan en las primeras posiciones de los resultados de los motores de búsqueda[2, 6]. La tarea de conseguir que una web alcance puestos altos en los resultados ha ido evolucionando a medida que han evolucionado también los buscadores y es actualmente lo suficientemente compleja como para que muchas compañías tengan empleados especializados únicamente en optimizaciones SEO1 . Entre las muchas optimizaciones que se pueden realizar en una aplicación web se comentan aquí las empleadas en Sigojoven, haciendo hincapié en algunas modificaciones específicas que me fueron asignadas o que debía tener en cuenta cada vez que implementaba algo. Creación continua de contenidos: Los buscadores indexan con más frecuencia las webs que cambian de contenido continuamente. Por esto es importante crear mucho contenido desde el principio, aún cuando apenas ningún usuario lee o comenta las nuevas actividades o entradas de los blogs en los grupos. Cuando la red social crezca serán los usuarios los que generen más contenidos; de momento son las redactoras de Sigojoven quienes se encargan de crear todo tipo de contenidos en la red social. Redacción apropiada de los contenidos: Existen una serie de estrategias a seguir cuando se redacta un artículo para conseguir que este suba puestos en los resultados de los motores de búsqueda para unas palabras clave concretas. La densidad 1

Existen también compañías SEO que pueden ser contratadas temporalmente para optimizar una aplicación web.

3.2 Sistemas de captación de usuarios de palabras clave o keyword density es el ratio de apariciones de una palabra o frase clave contra el total de palabras que componen un texto[51]. Por ejemplo, para un texto de 100 palabras, si una palabra aparece 5 veces, su densidad será del 5 %. La densidad de palabras clave es uno de los factores que tienen en cuenta los buscadores para ordenar los resultados de una búsqueda. En principio, cuanta mayor densidad tenga una palabra en una página web, provocará que los buscadores la sitúen más arriba, cuando se busca por ese criterio. No obstante, siempre hay que mantener una coherencia y no utilizar una palabra en exceso, puesto que los buscadores pueden tratarlo como una trampa y pueden penalizar una página que hace excesivo uso de una keyword.

Figura 3.1: Ejemplo de redacción destacando palabras clave en Sigojoven.

Además se tiene en cuenta dónde está colocada una palabra. Así serán tratadas de forma distinta por los navegadores las palabras colocadas en los encabezamientos (etiquetas html H1... H6), las destacadas en negrita o subrayadas y las que pertenecen al texto de un enlace. También se le da mucha más relevancia al texto

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios perteneciente a las primeras líneas del artículo así que los primeros párrafos deben cuidarse más y se podrá tener un formato más libre para los párrafos siguientes. Por último es muy importante incluir siempre que sea posible enlaces a otros artículos dentro de Sigojoven así como algún enlace a páginas externas. Todo esto es parte del trabajo de la redactoras y es supervisado por el SEO. Optimización técnica de la página: Esto engloba varias cuestiones relacionadas con el código de la página que he de tener en cuenta al implementar cualquier mejor o añadido a la web. • Usar direcciones web que contengan frases clave. Por ejemplo cuando se muestra una actividad infantil llamada “El gran libro mágico” y perteneciente a Madrid, su dirección podría ser: http://www.sigojoven.com/el_gran_libro_magico, sin embargo es más recomendable que su dirección sea: http://www.sigojoven.com/ocio/infantiles/madrid/el_gran_libro_magico. • Utilizar título y etiquetas meta 2 diferentes para cada página. En el código de Sigojoven suele haber una cabecera compartida para todas las páginas de una sección, así que se utilizan sentencias if para decidir que metas introducir en la página: < % elsif ((@events.length > 0)&&(!(@category.nil?))) %> < % if (@category.url_id==’exposiciones’) %> <title>Exposiciones | Actividades de Ocio | Sigojoven</title> <meta name="keywords" content="exposicion, exposiciones, la exposicion, exposiciones 2009, exposiciones de arte, exposicion arte, exposicion pintura, anuncios gratis, promociona tus eventos, promociona de eventos, promoción de exposiciones" /> <meta name="description" content="La mejor Gu&iacute;a de Exposiciones en galer&iacute;as y museos de España. En Sigojoven puedes publicar tus anuncios gratis para promocionar tus exposiciones." /> 2

Muchos buscadores, sobretodo los motores de búsqueda, leen determinadas etiquetas en la página para encontrar la descripción y las palabras clave que se le asocian. Estas son las Etiquetas META, o META Tags.

3.2 Sistemas de captación de usuarios • Utilizar palabras clave en el “anchor text” de los enlaces, rellenar todas las etiquetas alt de las imágenes y title de los enlaces. • No utilizar frames. • Reducción del tiempo de carga de las páginas. Ver apéndice A. El resto es trabajo del SEO: escribir sobre Sigojoven en artículos, reportajes, comentarios y foros siempre dejando el enlace a la web; fomentar enlaces de sitios externos hacia Sigojoven (fundamental para incrementar el Pagerank) y hacer un buen seguimiento del tráfico generado y la efectividad de las técnicas SEO utilizando herramientas de seguimiento como Google Analytics.

3.2.2.

Campañas online: newsletters, google adwords, facebook ads y landing pages

Newsletters: Al registrarse un usuario en Sigojoven está aceptando recibir periódicamente un boletín informativo por parte de SigoJoven cada cierto tiempo. Se ha comprobado que el envío de newsletters a los correos electrónicos de los usuarios tiene un impacto directo en el número de visitas y de usuarios activos durante los siguientes días, aunque este es un impacto relativo ya que de esos usuarios que vuelven a visitar SigoJoven pocos se fidelizan y el ritmo de actividad a la web vuelve a normalizarse tras un breve período de tiempo. Las newsletters son programadas en eRuby. ERuby es un sistema que permite ejecutar código ruby dentro de archivos de texto, en este caso un archivo html[1]. Al programar la plantilla se introduce código que hace referencia a elementos relacionados con el usuario que recibe la newsletter o con los últimos posts o actividades introducidas por los usuarios de la web. De esta forma se puede hacer llegar a los usuarios correos electrónicos con información relacionada con su perfil de usuario y que cambia de forma dinámica según los contenidos de la web. Una vez programada la plantilla, desde la cuenta de administrador de SigoJoven se pueden gestionar las newsletters. Antes de enviar una newsletter a todos los usuarios (también se permite un público objetivo reducido), el administrador puede enviar un correo electrónico de prueba a un grupo reducido para comprobar la correcta visualización de la newsletter en los distintos navegadores y clientes de correo electrónico.

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios Google AdWords y Google AdSense: Los sistemas AdWords y AdSense de Google están muy estrechamente relacionados y a menudo se confunden. Adwords es el sistema de publicidad patrocinada de Google y su mayor fuente de ingresos. Esta basado en un sistema Pay-Per-Click (PPC). La empresa anunciante selecciona las palabras que activarán la publicidad relacionada y la cantidad máxima de dinero que pagarán por cada clic. Son anuncios que se muestran de forma relevante en los resultados de la búsqueda del usuario (por ej., si el usuario buscó "coches", a la derecha o al inicio de las páginas indexadas por PageRank aparecerán anuncios referentes a "coches")[2, 7]. Google AdSense forma parte de AdWords y es el sistema de Google que hace que los anuncios de AdWords aparezcan en cualquier página web que incorporen el sistema AdSense. Un webmaster que quiere obtener ingresos con su página web puede introducir el sistema AdSense y Google mostrará en esa página anuncios de AdWords relacionados con el contenido de la página. De este modo SigoJoven puede escoger algunas palabras o cadenas de palabras que tengan potencial para atraer a nuevos usuarios a la web. Dado que sólo se va a pagar por las veces que un usuario de Internet haga clic en un anuncio AdWords, se puede ir probando diferentes combinaciones hasta encontrar aquella que de mejor rendimiento (mayor número de clics). Si una combinación no es efectiva se obtendrán menos clics pero también será menor el costo total de la campaña. En cambio si que es importante valorar que tipo de usuario queremos que entre en SigoJoven desde AdSense o AdWords ya que es más rentable que aquellos clics por los que se paga sean usuarios potenciales de la red social. Hay un factor que influye directamente en la probabilidad de que un usuario que llegue a SigoJoven a través de un anuncio de AdWords (bien desde el buscador o bien desde webs que utilizan AdSense) se llegue a fidelizar con la web: las landing pages (páginas de aterrizaje). Las landing pages son páginas web a las que un usuario llega después de haber pulsado en el enlace de algún banner o anuncio de texto situado en otra página web o portal de Internet. Gracias a las landing pages, asociadas a anuncios Adwords o cualquier otro tipo de publicidad, se puede conseguir que un potencial usuario al entrar en SigoJoven a través de publicidad tenga la impresión de que la página es exactamente lo que estaba buscando. Esto se consigue asociando distintas landing pages a distintas palabras clave

3.2 Sistemas de captación de usuarios introducidas en AdWords o a distintos banners utilizados en otros sistemas de publicidad. Como ejemplo, la landing mostrada en la figura 3.2 es muy adecuada para un anuncio de AdWords que responde a los términos “conocer gente mayores”.

Figura 3.2: Ejemplo de landing page.

Otro sistema que SigoJoven utiliza para darse a conocer es el sistema de publicidad de Facebook, llamado Facebook Ads. Facebook Ads ofrece alternativa interesante para orientar publicidad a un determinado público objetivo y puede ser más conveniente que Google Adwords en algunos escenarios. Mientras con Google AdWords y Google AdSense, se muestra publicidad relacionada con términos de búsqueda o contenido de páginas web, en Facebook Ads la publicidad puede ser mostrada a un público objetivo específico. Facebook funciona con personas y por lo tanto es muy fácil configurar una campaña publicitaria para que solo sea vista por un conjunto muy específico de personas. Además ofrece también pagar solo por clic (Pay-Per-Click) o pagar por cada mil impresiones. Obviamente cuanto mayor sea la cantidad que se pague con mayor frecuencia aparece el banner en las páginas de Facebook. Los banners que se muestran en las páginas de Facebook pueden estar enlazadas directamente con la web externa (en este caso www.sigojoven.com) pero mucho más interesante es la posibilidad de crear una página dedicada dentro de Facebook (Facebook pages)

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios en la que crear una pequeña comunidad de “fans” paralela a la página externa y de esa forma darse a conocer entre los usuarios de Facebook.

Figura 3.3: Página de SigoJoven en Facebook.

3.2.3.

Diseño de la web adecuado a este público objetivo y herramientas para el crecimiento automático de la red

Hasta ahora hemos estudiado herramientas para atraer nuevos usuarios a la web: Primero hemos comentado las técnicas SEO, que ayudan a que la web suba puestos entre los resultados de los motores de búsqueda, pero que requieren un mantenimiento constante e incluso un especialista en SEO en el equipo, lo cual supone un coste importante para la empresa. A continuación hemos estudiado distintas formas de campañas online. Por un lado el envío masivo de emails a los usuarios de Sigojoven, que aunque da resultados aparentes, tienen como objetivo atraer usuarios que ya se habían registrado en la web, pero si por algún motivo habían dejado de visitarla, es probable que estos usuarios vuelvan a entrar en la web y una vez más no vuelvan a encontrar lo que buscan para fidelizarse. Y no se debe abusar nunca de este tipo de campañas o el resto de los usuarios pueden considerar como una intrusión el recibir tantos correos electrónicos por parte de la web.

3.2 Sistemas de captación de usuarios Otro medio para darse a conocer, no menos importante, es el de contactar con medios de comunicación, asistir a conferencias y eventos relacionados con personas mayores y comunicarse con blogs o otras webs de relevancia para que publiquen algo relacionado con SigoJoven. Estos esfuerzos de marketing más “tradicional” suponen también dinero y una o varias personas empleadas. Una red social puede necesitar un impulso inicial. Es necesario que halla un número significativo de usuarios activos antes de que la red pueda crecer por sí misma. Pero mucho más importante que todas las campañas y medidas publicitarias para atraer nuevos usuarios es el que la web sea lo suficientemente atractiva y entretenida para que los usuarios no sólo quieran entrar a diario sino que también busquen que sus amigos se registren para poder así compartir fotos, eventos y experiencias a través de la red social. Si a esto le sumamos características que inciten a los usuarios a invitar a conocidos y amigos a la web, se podría conseguir que la red social crezca en usuarios y contenido por sí misma, sin necesidad de publicidad externa. SigoJoven.com está orientado a personas mayores de 40 años y esto se refleja también en su diseño. Aunque con el paso del tiempo son más las personas mayores con conocimientos de informática y que saben navegar por Internet, se puede generalizar el hecho de que una persona mayor de 40 no es tan hábil navegando como un joven de 25 años. Por esta razón la interfaz de SigoJoven difiere de la complejidad de otras redes sociales (por ejemplo Facebook) y apuesta por la sencillez: un diseño muy simple pero intuitivo. Todas las secciones de la web deben compartir una estructura similar. La cabecera con el menú siempre está presente como lo está el botón “Invitar amigos” y el enlace para contactar con la empresa. Las secciones “Gente”, “Actividades” y “Grupos” tienen exactamente la misma estructura: una columna amplia a la izquierda para mostrar resultados, con dos pestañas y un paginador, y el buscador en la columna de la derecha. De este modo, si el usuario aprende donde se sitúa cada elemento en una sección ya habrá aprendido a usar las otras dos secciones. El tamaño de fuente es siempre suficientemente grande (nunca inferior a 12 px; 14px en comentarios, posts y mensajes) y hay en general un gran espaciado entre elementos para no crear confusión. Esto ayuda a la legibilidad y localización de los elementos teniendo en cuenta la pérdida de agudeza visual de la gente mayor. El reducir el número de elementos en menús y situar adecuadamente los botones, elementos y secciones han sido uno de los mayores retos a la hora de tomar decisiones de

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios diseño. ¿Cómo hacer que una red social crezca por si misma? El crecimiento de una red social puede ser lento y costoso al principio, pero pasado cierto punto, se puede producir un crecimiento rápido y auto inducido que responde al hecho de que la utilidad de una red social aumenta exponencialmente con la cantidad de usuarios que la utilizan[8]. Este ritmo de crecimiento que tiende a incrementarse puede tener también consecuencias fatales si a nivel técnico el servidor (y la aplicación) no están preparados para soportar la creciente carga en el sistema. A pesar de la importancia de hacer esfuerzos en marketing y SEO, sobre todo en la fase inicial de la vida de una red social, el principal atractivo que un usuario puede encontrar en registrarse en una red social es el encontrarse a amigos y conocidos en ella. Y lo idóneo es que alguien que ya está dentro de la red, y que disfrute de su contenido, invite a nuevos usuarios; pues éstos tendrán así, al menos un amigo dentro. Con un público objetivo como el de SigoJoven, que pretende imponerse como la red social preferente entre mayores de 40 de los países de habla hispana, los esfuerzos en marketing nunca serán suficientes para atraer a un grupo tan grande de usuarios. Tienen que ser los propios usuarios los que hagan crecer la red, tanto en contenido como en usuarios y para ello tienen que llegar a sentirse identificados con la web; tienen que encontrarla atractiva, divertida y sentir necesidad de ayudarla a crecer; les tiene que parecer suficientemente interesante como para llegar a molestar a un amigo, conocido o familiar invitándole a registrarse. El equipo de SigoJoven trabaja constantemente revisando las distintas secciones e intentando pensar de que manera simplificar aún más la experiencia de usuario o hacer los contenidos más atractivos. Se tienen en cuenta las quejas y sugerencias de los usuarios y se proponen modificaciones para hacer la web más interactiva siendo conscientes de que un gran problema es la falta de herramientas interactivas que mantengan a los usuarios conectados y participando. A mayores de estos esfuerzos a largo plazo de mejora constante de la aplicación se están probando y planificando otras herramientas, dentro de la propia aplicación, para fomentar la expansión de la red en usuarios y contenido: Invitaciones: En el menú superior está siempre presente el botón “Invitar amigos” (también accesible desde la sección “Mis datos”). Esta herramienta permite enviar

3.2 Sistemas de captación de usuarios correos electrónicos de invitación simplemente escribiendo una o más direcciones de correo y pulsando “Enviar invitaciones”. Concursos y actividades: Tienen el objetivo de generar contenido y movimiento en la red. Mediante un concurso o una actividad creada por el administrador se incita a los usuarios a participar subiendo fotos, escribiendo posts o invitando a amigos a cambio de algún tipo de premio. Cuentas premium a través de la participación: Es mi propuesta para incrementar la participación de los usuarios y mantenerlos un mayor tiempo online. Esta propuesta, que fue aceptada y será desarrollada en un futuro, tiene como idea básica premiar a los usuarios por su aportación a la web. Mediante una barra de progreso en su página de inicio privada los usuarios saben lo cerca que se encuentran de obtener una cuenta premium y participando mediante la publicación de comentarios, posts, actividades, etc., pueden ver como automáticamente decrece el número de puntos necesarios para obtener dicha cuenta. Si las ventajas que ofrece la cuenta premium son suficientemente atractivas este sistema puede motivar a los usuarios a participar más ya que no tendrán que hacer ningún esfuerzo económico para optar a estas ventajas, tan sólo emplear tiempo navegando por la web.

Figura 3.4: Modelo de página de inicio implementando un sistema de puntos para obtener cuentas premium.

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios

Apéndice A: Soluciones ante la falta de espacio en el servidor: Reducción/eliminación de imágenes El espacio de almacenamiento en el servidor es reducido, hasta el punto de que es necesario tomar medidas para reducir la cantidad de información que los usuarios almacenan en el servidor. Por el momento los usuarios solo pueden subir imágenes a la web, el tamaño de los datos de usuario es despreciable, son las imágenes las que suponen un problema. Además, como hemos comentado en el apartado sobre SEO, no solo es necesario reducir el tamaño de las imágenes almacenadas en el servidor, hay que ser aún más cuidadosos con el tamaño de las imágenes que se cargan en cada una de las páginas para que los motores de búsqueda no penalicen el tiempo de carga de las páginas. Si una imagen se va a mostrar con un tamaño máximo de 300x300 píxeles no tiene sentido estar cargando una imagen de 1280x1024 píxeles y luego redimensionarla mediante html; lo ideal sería que la imagen tuviese exactamente 300x300 píxeles, pero como todo el proceso debe ser automático en algunos casos hay que conformarse con algo aproximado. Este problema se va a resolver haciendo uso extensivo del plugin attachment-fu para organizar las subidas de imágenes por parte de los usuarios. Este plugin permite generar, a partir de una imagen subida, réplicas de esa imagen a distintas resoluciones. Estas imágenes serán renombradas como nombre_imagen_nombre_replica.extensión, en Sigojoven vamos a utilizar cuatro tipo de réplicas: tinny, small, medium y large. A cada tipo de imagen subida por el usuario (perfil, actividad, grupo...) le corresponde distintas resoluciones para las réplicas según donde están situadas dentro de la web. La limitación para la subida era no superar los 4 megabytes por imagen. Es necesario no restringir mucho el tamaño de subida ya que las cámaras digitales actuales obtienen imágenes de gran resolución y no todas las personas mayores saben reducir el tamaño de sus fotografías digitales. Lo que se va a hacer es substituir todas las imágenes guardadas con su tamaño original por réplicas y hacerlo de forma que los usuarios no perciban los cambios. Para cada imagen subida vamos a generar una réplica “large” con más resolución de la necesaria pero que servirá de substituta de las imágenes originales y estará limitada a una resolución razonable. Además se generarán otras réplicas de menor resolución para utilizar según el tamaño con el que se muestran en las diferentes secciones de la web, de esta forma se va a mejorar mucho el tiempo de carga de la página web.

3.2 Sistemas de captación de usuarios Centrándonos en el caso de las imágenes de perfil de usuario (para el resto de las imágenes se hace exactamente lo mismo), el proceso completo para introducir la gestión de imágenes mediante Attachment-fu y deshacerse de las imágenes originales se resume en: 1. Cada tipo de imagen subida a la red social está asociada a un modelo. Las imágenes de perfil tienen el modelo user_picture.rb asociado. Aquí se introduce el código que indica a Attachment-fu que tipo de réplicas queremos para esa imagen: has_attached_image :storage => :file_system, :max_size => AppConfig.general.photo_max_size.to_i.kilobytes, :thumbnails => {:tinny => ’45x45>’, :medium => ’100x100>’, :large => ’500x500>’}

Una vez introducido este código, y a partir del momento en que se hacen efectivos los cambios en producción, vamos ya obtener tres réplicas de distinto tamaño cada vez que se suba una imagen de perfil y se seguirán manteniendo también las imágenes originales. La web seguirá funcionando con total normalidad. 2. Para todas las imágenes ya almacenadas en el servidor será necesario realizar los cambios manualmente. Se copian todas las imágenes a un ordenador local y usando una herramienta de renombrado y procesado masivo de imágenes3 se generan las imágenes tinny, medium y large necesarias. Se suben estas imágenes al servidor. 3. Ahora ya están conviviendo en el servidor todas las imágenes originales con las réplicas de distintas resoluciones, pero las distintas páginas que hacen uso de la imagen de perfil siguen cargando la imagen original en el navegador. Buscamos en el código de estas páginas todas las referencias a la imagen de perfil y donde tenemos user_picture(@user) añadimos el parámetro thumbnail indicando la réplica a cargar: user_picture(@user, :thumbnail => :medium). Con este cambio las imágenes originales ya sobran y pueden ser eliminadas. 4. Se eliminan las imágenes originales que son aquellas cuyo nombre no termina en tinny, medium o large. Las nuevas imágenes originales generadas deberán ser eliminadas manualmente cada cierto tiempo. 3

Se utilizó la aplicación gratuita Irfanview (http://www.irfanview.com/).

3 Mi función en SigoJoven (1): Mantenimiento y captación de nuevos usuarios La velocidad de carga mejora mucho tras este cambio. Para agilizar aún más la carga se revisan todas las imágenes que no dependen de los usuarios y se reduce su resolución a la necesaria para el tamaño en píxeles que ocupan en la web.

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com 4.1.

Objetivos y priorización de las tareas de rediseño

Como se discutió en el punto 3.1, la priorización de tareas es esencial antes de comenzar a implementar código o a hacer nuevos diseños. El procedimiento de marcar objetivos y priorizar tareas se ha ido desarrollando a dos diferentes niveles: Día a día se priorizaban ( y se implementaban) muy pequeños bugs, correcciones de diseño y pequeñas nuevas funcionalidades. Con mucha menos frecuencia se discutía y decidía la prioridad de tareas más a largo plazo. En ocasiones estas tareas se sometían a repriorizaciones en futuras tomas de decisión. Con mi llegada al equipo de SigoJoven se realizaron varias reuniones para decidir como afrontar un cambio a largo plazo que afectaba a todas las secciones de la web. SigoJoven conservaba en ese momento gran parte de la funcionalidad y el diseño que había heredado de CinemaVip y el plan de desarrollo consistía en ir cambiando cada una de las secciones de la web hasta alcanzar un diseño y funcionalidad características de SigoJoven, enfatizando la importancia de mantener la hegemonía entre todos y cada uno de los apartados de la web para que así los usuarios se familiaricen con su uso. El objetivo final de la aplicación es obtener beneficios económicos a través de publicidad orientada al colectivo de usuarios específicos de la aplicación. Teniendo esto en mente,

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com es muy importante el conseguir un sistema de publicidad que funcione, pero todo está relacionado, y por muy bueno que sea el planteamiento del modelo de negocio de la web, ninguna empresa estará interesada en anunciarse si no se demuestra que hay una gran actividad en la web, y esto no ocurrirá si la web no alcanza unos objetivos mínimos de facilidad de uso, funcionalidad, diseño y cantidad de contenido. Por lo tanto, es importante analizar que es lo que demandan los usuarios, que tareas proporcionarían más movimiento a la red social y cuales conseguirían buenos resultados necesitando menos tiempo para ser implementadas. Si se consigue que la experiencia de usuario sea buena, todo lo demás se irá logrando como consecuencia de lo anterior. Navegando por la red social, tratando de analizarla como un usuario más, era evidente que la aplicación no resulta atractiva ni para los usuarios ni para las empresas. Dado que había una necesidad de obtener ingresos a través de publicidad lo más rápido posible y al mismo tiempo había un problema claro de falta de atractivo para las empresas y usuarios así como ausencia de un marco adecuado para que las empresas se publicitasen, lo lógico parecía ir alternando entre tareas de adaptación de la web para la introducción de publicidad y rediseño o funcionalidad añadida para hacer su uso más atractivo. SigoJoven cuenta con unos 50.000 usuarios registrados y aproximadamente 300 usuarios activos diariamente. Esto indica que hay una falta de equilibrio entre la cantidad de usuarios potenciales y los usuarios que finalmente están interesados en participar diariamente. No obstante estas cifras de usuarios registrados / activos podrían resultar suficientemente relevantes para que algunas empresas introduzcan publicidad en la web. Teniendo todo esto en consideración se afronta el proceso de reconstrucción de SigoJoven de la siguiente manera: 1. Primero se adaptarán todas las secciones existentes para la inclusión de publicidad, adaptando los contenidos de la página de forma que una de las columnas mida de ancho 300 píxeles, que es el ancho de los banners que se ha considerado adecuado adoptar como estándar en la web. Esto permitirá que a partir de este punto SigoJoven pueda contactar con empresas ofreciéndole albergar publicidad en un formato estándar a cambio de ciertos ingresos mensuales. 2. La sección de actividades está incompleta, su diseño es inadecuado y se hace complicado su uso. Se renovará completamente esta sección añadiendo dos nuevas importantes funcionalidades: el botón “me gusta” y la posibilidad de eventos patrocinados (detalladas en el apartado 4.4). Se añadirán otras nuevas funcionalidades

4.1 Objetivos y priorización de las tareas de rediseño de menor importancia y un nuevo diseño acorde con las secciones ya existentes del buscador de gente y la página de inicio pública, siguiendo las directrices comentadas en el punto 3.2.3 para la adaptación de la web a la necesidad de un público objetivo específico. 3. La mayor parte del peso del modelo de negocio de SigoJoven.com recae en la sección de ofertas. La sección de ofertas permitirá (inspirándose en webs como oportunista.com) que los usuarios naveguen o realicen búsquedas a través de una base de datos de empresas que ofrecen ofertas o descuentos a los usuarios de SigoJoven. El usuario se puede “suscribir” a esa empresa e ir recibiendo las nuevas ofertas de la empresa en su página de inicio. Tras la creación de la nueva sección de actividades, y a la espera de adaptar la sección “grupos” al nuevo estilo de diseño de SigoJoven, la web se encuentra en un buen punto para introducir esta nueva sección y ofrecer a las empresas alguno de los packs “oro”, “plata” o “bronce” de publicidad en SigoJoven. De esto se habla con más detalle en el punto 4.5. 4. La sección “mis datos” permite al usuario cambiar la información de su perfil, subir fotos, administrar su cuenta y configurar opciones de privacidad y notificaciones por email. La mayoría de los usuarios no llegan a cubrir todos los datos de su perfil y tampoco suben sus fotos. Es importante que todos los usuarios encuentren fácil e interesante el cubrir toda esta información de su perfil ya que fomenta la interacción entre usuarios. Entre los motivos que pueden hacer que un usuario no quiera rellenar su información de perfil se pueden considerar: Le preocupa su privacidad, desconoce que riesgos tiene introducir datos personales en una página de Internet. La herramienta disponible para completar su perfil de usuario es compleja, hay demasiados campos y menús y no resulta sencillo subir nuevas fotos. Para solucionar el primer punto, además de informar al usuario en el momento del registro y mediante un enlace a la nota legal de la página, es necesario un apartado, dentro de la sección de mis datos, donde el usuario pueda ver claramente que nivel de privacidad tienen los elementos de su perfil y modificarlo. Respecto al segundo punto, será necesario eliminar campos y reestructurar los menús para hacer menos tediosa la tarea de completar el perfil, todo ello con un

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com diseño renovado que invite al usuario a rellenar todos los campos para que su porcentaje de perfil completado llegue al 100 %. 5. La sección de mensajes sufre de un diseño inadecuado además de problemas de compatibilidad con los distintos navegadores. Se rediseñará la sección al completo y se estudiará la posibilidad de mejorar la compatibilidad entre navegadores. Para decidir cual es el diseño más adecuado se analiza la implementación que otras redes sociales exitosas hacen de la mensajería privada.

4.2.

Herramientas para la implementación. Entornos de prueba

Posiblemente no exista una opción ideal única para desarrollar aplicaciones en Ruby on Rails, sino una opción ideal para cada programador según sus gustos y preferencias. Los IDEs (Entorno de Desarrollo Integrado) son entornos completos que cubren todas o casi todas las fases del desarrollo de una aplicación; desde la edición de código hasta la compilación o depuración e incluso la puesta en producción de la aplicación. Hay a fecha de hoy cuatro IDEs ampliamente utilizadas por la comunidad Rails: RadRails, RubyMine, 3rd Rail, y NetBeans. Estas herramientas pueden simplificar mucho el trabajo, ofreciendo mediante botones y menús mucha funcionalidad que habría que ejecutar mediante comandos en un terminal. Presentan la desventaja de que se pierde flexibilidad ya que el programador se tiene que limitar a la funcionalidad, carencias y bugs de estos entornos de desarrollo. Muchos programadores prefieren la opción más “tradicional” de emplear un editor de texto y el terminal para ejecutar todos los comandos de Rails. Editores recomendables para Ruby on Rails son TextMate (Mac OS X), gVim, gedit (con los plugins GMate) o Kate. Para probar y depurar la aplicación se puede utilizar cualquiera de los navegadores web habituales, siendo quizás Firefox el más completo gracias a las múltiples extensiones existentes para desarrolladores de páginas o aplicaciones web. Algunos de los IDEs traen su propio navegador integrado.

4.2 Herramientas para la implementación. Entornos de prueba Herramientas y procedimiento empleado en Sigojoven

Al no tener que implementar una aplicación desde cero, para lo que hubiese sido preferible utilizar una IDE, he escogido el método y las herramientas que me parecieron más cómodos. La estructura de directorios y archivos de la aplicación ya estaba formada y muchos de los cambios a realizar (cambios que no se recogen en esta documentación por ser menos relevantes) no requerían la modificación de más que unas pocas líneas. Además, al estar trabajando con una aplicación web ya en uso y con cientos de usuarios activos, aunque algunos grandes cambios se planifican para realizar en unas pocas semanas, muchos pequeños cambios necesitan ser cambiados rápidamente sobre la propia aplicación online. Para estos pequeños cambios directamente modifico el código fuente de la aplicación online sobre los ficheros del servidor a través de un cliente FTP. La figura 4.1 muestra la estructura de directorios del servidor en el que se aloja Sigojoven.com. El directorio sigojoven es la aplicación web tal cual la vemos al entrar en www.sigojoven.com. Los directorios test1, test2 y test3 contienen réplicas del código fuente de la aplicación y con una base de datos reducida pero suficiente para probar y depurar cambios en la aplicación.

Figura 4.1: Estructura de directorios en el servidor.

Para acceder al código albergado en el servidor utilizo el cliente FTP de código abierto WinSCP que, entre otros muchos extras, integra el cliente SSH PuTTY necesario para

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com ejecutar comandos Unix sobre el servidor (para reiniciar las bases de datos o el servidor web1 por ejemplo). Antes de comenzar a hacer cambios en cualquiera de los directorios test del servidor realizo una copia de seguridad del código completo (sin la base de datos) al disco duro de mi PC. En ocasiones los tres directorios test están siendo modificados por separado y es bueno tener siempre una copia del código original por si todo lo demás falla. Además el tener una copia local del código me permite explorarlo con el IDE NetBeans y realizar búsquedas de cadenas sobre todo el código fuente simultáneamente. Para editar utilizo Notepad++, me proporciona un adecuado coloreado de sintaxis tanto en los archivos .rb (puro ruby) como en los .html.erb (Rhtml) y abre múltiples archivos en pestañas, suficiente para una cómoda edición de código. Desde el propio cliente FTP abro los ficheros a modificar y al guardar los cambios en el editor ya quedan automáticamente actualizados en el servidor.

Figura 4.2: Escenario de desarrollo típico. 1

Nótese que cuando se habla de servidor puede referirse tanto al hardware (el ordenador o conjunto de ordenadores que hospeda/n la aplicación) como al software (el servidor HTTP que se encarga de entregar al cliente las páginas webs que éste solicita). Esto puede generar a veces confusión, en este párrafo se hace referencia al servidor HTTP.

4.2 Herramientas para la implementación. Entornos de prueba Tras editar los ficheros necesarios para realizar un cambio y resetear el servidor web para que se actualicen los cambios (solo necesario para producción y no en todos los casos), se abre el navegador para comprobar que todo funciona correctamente. Si los cambios se realizaron en producción directamente (carpeta sigojoven del servidor) simplemente se navega a través de www.sigojoven.com y si los cambios se realizaron en una de las carpetas test se utiliza la dirección http://testX.sigojoven.com:3001, donde la letra “X” se sustituye por 1,2 o 3 según el directorio test que se haya utilizado. Cuando hay un error en el código ruby, Rails presenta una de las pantallas mostradas en la figura 4.3 dependiendo de si se está trabajando en producción o en test respectivamente. Para depurar estos errores se utiliza la información que presenta esta pantalla de error y la información contenida en la carpeta /log dentro del directorio de la aplicación.

Figura 4.3: Pantalla de error de Rails, en entornos de producción y de desarrollo.

Si los errores están relacionados con el código html o css, la página se carga pero los elementos pueden estar descolocados, no aparecer o no funcionar correctamente. Tanto para depurar errores de html/css como para introducir nuevos cambios existen algunas extensiones muy útiles para el navegador web Firefox2 , entre ellas considero imprescindibles: Firebug: Esta extensión nos permite ver el código fuente de cualquier elemento css, html y javascript de una página web con tan sólo hacer clic en él. Además podremos modificar parámetros css o partes del código html y javascript y ver su efecto en la página en tiempo real sin tan si quiera tener que recargar la página. 2

Para otros navegadores como Google Chrome o Opera existen también muchas opciones de extensiones para el desarrollo web. Google Chrome cuenta ya con el Google Chrome Inspector instalado, una herramienta muy similar a Firebug.

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com Es idóneo sobre todo para probar cambios en el código css sin tener que refrescar el navegador cada vez ni buscar la ubicación del elemento en el código fuente3 . MeasureIt: Superpone una regla sobre la página para medir el tamaño en píxeles de cualquier elemento o hueco en la web. Muy útil también para cambios de diseño4 . Web Developer: Coloca una barra en la parte superior del navegador con todo tipo de utilidades para la creación depuración de páginas web: desactivar la caché, javascript, ciertos estilos css o las imágenes; ver todo tipo de información sobre los elementos; y es especialmente útil para ver o editar información de los formularios.5

Figura 4.4: Información de formularios mostrada por la extensión Web Developer. 3

https://addons.mozilla.org/en-US/firefox/addon/firebug/ https://addons.mozilla.org/en-US/firefox/addon/measureit/ 5 https://addons.mozilla.org/en-US/firefox/addon/web-developer/ 4

4.3 Fase 1: Adaptación de la aplicación para la introducción de publicidad Finalmente, cuando me aseguro de que todo el código y hojas de estilos funcionan correctamente en los tests, copio todos los archivos modificados al directorio sigojoven del servidor y reinicio el servidor web.

4.3.

Fase 1: Adaptación de la aplicación para la introducción de publicidad

Todas las secciones de la web excepto la página de inicio pública y la página de inicio privada (que no contienen publicidad) siguen la misma estructura mostrada en la figura 4.5: un ancho total de 990 píxeles dividido en una columna de 690 píxeles y otra de 300 píxeles. La elección de un formato de publicidad de 300 píxeles de ancho condicionó el formato global de la web que ha sido rediseñada sección a sección hasta tener un aspecto homogéneo y con la misma estructura de dos columnas.

Figura 4.5: Dimensionado de las secciones en Sigojoven.

El cambiar ancho de columnas y elementos para ajustar la página a unas determinadas dimensiones es esencialmente una tarea de modificación de hojas de estilo. La sintaxis de los ficheros CSS es muy sencilla, sin embargo hay varias complicaciones que hay que tener en cuenta a la hora de hacer cambios en las hojas de estilo de una web compleja:

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com SigoJoven utiliza AssetPackager, un plugin Rails que envía al navegador un sólo fichero css y js (javascript) por cada página que está siendo visualizada. Sin usar AssetPackager varios ficheros css pueden ser requeridos por una misma página o varias páginas utilizan el mismo fichero CSS. Tras ejecutar el comando rake asset:packager:build_all todos los ficheros css, son comprimidos y fusionados entre sí de forma que cada página visualizada en el navegador necesite cargar tan sólo un archivo css.

Figura 4.6: Fichero css original y comprimido.

El uso de estos ficheros css comprimidos corresponde a la aplicación funcionando en producción. En un entorno de desarrollo se utilizan los ficheros css originales y es necesario, antes de subir los cambios a producción, ejecutar el comando rake asset:packager:build_all.

4.3 Fase 1: Adaptación de la aplicación para la introducción de publicidad Problemas de compatibilidad entre los distintos navegadores: Los problemas pueden surgir tanto en la interpretación del código html como las hojas de estilo. Firefox, Opera y el más reciente Google Chrome cumplen casi a la perfección con los estándares propuestos por el W3C (Consorcio World Wide Web). Por el contrario Internet Explorer, sobre todo en la versión 6, da varios problemas de compatibilidad por hacer una interpretación del código CSS que no sigue los estándares para alguno de los parámetros[15, 16]. En concreto son muy problemáticos los parámetros padding, margin, width y height; además Internet Explorer 6 no soporta el parámetro hover en elementos que no sean enlaces.

No se pueden ignorar los problemas de compatibilidad de versiones antiguas de Internet Explorer ya que a fecha de Abril del 2010 un 33.4 % de los usuarios utilizan Internet Explorer y de éstos un 7.9 % siguen utilizando la versión 6. Pero si tenemos en cuenta el público objetivo al que está orientado SigoJoven el porcentaje de usuarios utilizando Internet Explorer 6 va a ser sin duda mayor.

Figura 4.7: Gráfico que muestra el uso de los distintos navegadores entre Enero de 2002 y Agosto de 2009.

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com • No repetir código. Con el fin de ahorrar recursos y evitar conflictos es muy importante no repetir código CSS ni en un mismo fichero ni entre ficheros distintos. En ficheros CSS de miles de líneas esto no es una tarea sencilla.

Figura 4.8: Código css redundante, las líneas de código ignoradas por el navegador aparecen tachadas.

Los estilos definidos para un determinado elemento son heredados por los elementos hijo. Si un mismo estilo se especifica para un elemento padre y un elemento hijo con diferentes valores el valor dado para el elemento padre quedará anulado. Es muy común que sobren definiciones de estilo de muchos elementos padre por estar especificadas también en sus elementos hijo. En la figura 4.8, utilizando la extensión Firebug del navegador Firefox, se pueden observar a la derecha varias

4.4 Fase 2: Nueva sección de actividades definiciones de estilo anuladas por ser herencia de estilos definidos en elementos padre del elemento analizado (a la izquierda resaltado en azul). Cuando mediante AssetPackager se comprimen y fusionan diferentes ficheros CSS se puede generar también mucho código repetido en los ficheros. En este caso es debido a que pueden haberse definido estilos que hacen referencia al mismo elemento en ficheros distintos. Para evitar esto es aconsejable separar los elementos comunes en las diferentes páginas que se muestran en la web y definir estilos para ellas en ficheros CSS separados. Por ejemplo el fichero menu.css podría contener los estilos que definen el aspecto y posición de la barra superior de menú que está presente en todas las secciones y estos estilos ya no deben ser definidos en ningún otro fichero. En ocasiones el problema de repetición de código CSS es debido a la falta de coordinación entre los distintos programadores de una empresa que no establecen claramente que elementos o páginas debe de programar cada uno.

4.4.

Fase 2: Nueva sección de actividades

Como ya se ha comentado en capítulos anteriores, la sección actividades de Sigojoven funciona de un modo distinto a como lo hace la funcionalidad de eventos de, por ejemplo, Facebook o Tuenti. En Sigojoven, los eventos o actividades no están restringidos a un grupo cerrado de usuarios, no son eventos privados, sino públicos, queriendo esto decir que pasan a formar parte de una base de datos común accesible a todos los usuarios (incluidos visitantes externos no registrados en la red social). La sección de actividades se puede entender entonces como una agenda cultural mantenida por los usuarios de la red social pero a la vez haciendo uso de las capacidades de red social al poder “apuntarse” a una actividad y consultar a que actividades están apuntados tus contactos. Se pierde, eso si, la posibilidad de crear actividades privadas, compartidas tan solo con los contactos de un usuario. En la figura 4.9 se muestra como las páginas que componen la sección de actividades se interconectan entre si. Hay dos caminos principales para acceder a la sección de actividades: Por un lado se puede acceder al listado general de actividades a través del enlace “Actividades”, siempre disponible en la parte superior de la web. En este

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com listado se presentan las actividades pertenecientes a la provincia del usuario y ordenadas por fecha de finalización. El usuario puede navegar por este listado, realizar búsquedas en otras provincias y/o para categorías concretas, ver el listado de actividades que les gusta a sus contactos o publicar una nueva actividad.

Figura 4.9: Interconexión de las páginas que componen la sección de actividades

El otro camino de acceso es mediante el enlace “Mis actividades” de la página de inicio privada del usuario. Este enlace lleva a un listado de las actividades relacionadas con el usuario, tanto las que el mismo haya creado como las actividades a las que se haya “apuntado” mediante el botón “Me gusta”6 . En realidad la única diferencia, una vez introducida una actividad por parte del usuario, entre las actividades que creó y las que le gustan es que puede editar las primeras y no las otras, pero por lo demás todas son actividades públicas y todas son actividades a 6

En realidad no existe un botón “Me gusta” como tal, pero le llamaremos así en las próximas secciones para simplificar.

4.4 Fase 2: Nueva sección de actividades las que se ha “apuntado” (al crear una actividad el usuario es automática y obligatoriamente apuntado a dicha actividad). Como se puede observar en el diagrama, ésta página de “Mis actividades” comparte prácticamente todos los enlaces con la página de actividades anteriormente comentada. También se puede observar que no hay ninguna otra página apuntando de vuelta a “Mis actividades” una vez el usuario abandona la página. El buscador está disponible siempre a la derecha (excepto cuando se visita una actividad concreta) y desde los resultados de la búsqueda se puede acceder a prácticamente todos los otros elementos de la sección. Desde la vista de una actividad concreta se puede saltar a otras actividades relacionadas pero también volver a los resultados de búsqueda (aunque esto no viene especificado en el diagrama) siguiendo el enlace de la provincia o la categoría a la que pertenece la actividad. Al igual que las secciones de Gente, Grupos y Ofertas, la sección de actividades está abierta a cualquier visitante externo a la red social. Esto podría suponer un discutible problema de privacidad, especialmente para la sección “Gente” (ver apartado 5.3), pero tiene algunas ventajas de cara a la promoción y el crecimiento de la red social: Permite a Google (y otros buscadores) indexar e incluir actividades, ofertas y blogs (grupos públicos) en los resultados de búsqueda. Esto supone mayor relevancia de la web en el Pagerank de Google (ver apartado 3.2.1) La sección de actividades, al estar abierta a cualquier visitante no registrado, se convierte en una amplia agenda cultural actualizada tanto por los propios usuarios de la red como las redactoras del equipo de Sigojoven. La sección gente se abre a cualquier visitante con el objetivo de ofrecer una pequeña muestra de los usuarios que utilizan la red e invitar a ese visitante externo a que busque un amigo dentro de la red o intente visualizar el perfil de uno de los usuarios mostrados en el listado. Para cualquiera de esas dos acciones se le muestra una pantalla que dice “¡Necesitas tener una cuenta en Sigojoven para poder acceder a esta sección!” y desde esa misma pantalla el usuario puede registrarse. Los grupos públicos funcionan realmente como blogs y contienen una gran cantidad de artículos sobre cultura, medicina, ocio, etc., con lo que al estar abierta a cualquier visitante es probable que webs externas a Sigojoven enlacen algunos

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com de estos grupos a sus blogs o páginas obteniendo así un punto de acceso más a la red social. Apoyándose en las figuras 4.10 y 4.11, se explican a continuación la funcionalidad y problemática de todos los elementos que se presentan en esta nueva sección de actividades (cada elemento explicado se corresponde a un número en la figura):

Figura 4.10: Página inicial de la sección de actividades

Listado general de actividades / Mis actividades: 1. Tanto en la página general de actividades como en “Mis actividades”, el listado está encabezado por dos pestañas. Esta presentación será una constante en el nuevo diseño de todas las secciones de Sigojoven y se repetirá en las secciones de grupos, gente y ofertas.

4.4 Fase 2: Nueva sección de actividades Durante todo el desarrollo de la web se ha hecho énfasis en la simplicidad. Esto incluye un diseño poco cargado y el menor número de elementos posibles. Aunque a veces pueda parecer lo contrario, la opción de crear una página minimalista es la que más esfuerzo requiere. En este caso, nos hubiese resultado mucho más sencillo emplear 3 o 4 pestañas para poder así enlazar este listado general con el resto de páginas de la sección y añadir toda la funcionalidad más cómodamente pero nos pareció esencial mantener este formato de tan sólo dos pestañas en cada sección. a) La pestaña de la izquierda es fija, siempre apuntará a “Agenda de amigos”. Ésta página muestra un listado de aquellas actividades para las que algún contacto del usuario hecho clic en el botón “me gusta”. Esta agenda de amigos sí sería una implementación similar a lo que son los eventos en Tuenti o Facebook aún con la diferencia de que el usuario no tiene que ser invitado por sus contactos para poder ver las actividades sino que simplemente está viendo a que actividades del listado general están apuntados sus contactos para así apuntarse el también en caso de querer asistir. b) La pestaña de la derecha es dinámica. El contenido (y nombre) de esta pestaña varía en función de la búsqueda realizada, del enlace a través del cual se llego a la sección de actividades o de si el usuario está o no registrado en Sigojoven.com. Si el usuario entra en el listado general de actividades (a través del enlace “Actividades” de la barra superior por ejemplo), se mostrarán todas las actividades pertenecientes a la provincia del usuario (esta información se obtiene de la información introducida por el propio usuario al registrarse). El orden siempre es el mimo: en primer lugar las actividades con fecha de finalización más próxima. Nos pareció mucho más relevante saber que actividades estás a punto de perderte mañana que saber que actividades van a comenzar mañana. Si el usuario entra en “Mis actividades” a través de la página de inicio privada, las actividades a las que se apuntó el usuario serán listadas en esta pestaña también. Cada vez que se realiza una búsqueda o se selecciona una categoría se listarán en esta pestaña los resultados.

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com Si un usuario accede al listado de actividades sin estar registrado en la web obtendrá un listado de las actividades con fecha de finalización más próxima, sin estar filtradas por provincia. Aún para usuarios no registrados están disponible tanto el buscador como todas las páginas de actividades que componen esta sección. En general el usuario va a entender rápidamente que esta es la pestaña que hace siempre de filtro para cualquier tipo de búsqueda o restricción sobre el listado de actividades, mientras que en la pestaña de la izquierda se mantiene fijo el listado de actividades a la que se apuntaron sus contactos. 2. El buscador selecciona por defecto el país que el usuario a introducido al registrarse en la web y permite hacer búsquedas por país, provincia y categoría. Realizar búsquedas sobre recursos en Rails 2 es muy sencillo. Si por ejemplo “Province” es el nombre del modelo que representa a las provincias en la base de datos, constando esta tabla de la base de datos de una columna llamada name, Province.find_by_name(nombre_provincia) devuelve uno o varios recursos del tipo province cuyo campo name coincide con nombre_provincia7 . 3. Este enlace lleva al formulario para crear una nueva actividad que se comentará más adelante. Cualquier usuario registrado en Sigojoven puede subir una actividad. 4. Las actividades destacadas son actividades creadas por el administrador de la web o empresas interesadas en publicitarse. Desde las páginas de herramientas disponibles tan sólo para la cuenta de administrador se pueden seleccionar de entre todas las actividades vigentes en la web, aquellas que se quieren destacar y estás se mostrarán en las páginas de la sección de actividades (se seleccionan aleatoriamente 3 para mostrar). 5. El botón de recomendar es un enlace a una plantilla de mensaje privado preparada para enviar una recomendación de la actividad a los contactos que el usuario elija. 6. Para cada actividad, tanto en el listado de actividades como en la página de una actividad concreta, aparece la pregunta “¿Te gusta?” con los botones “Si” y “No” a continuación. Esto equivale a estar o no estar apuntado a esa actividad. Como el 7

La función find es parte de Active Record, uno de los componentes esenciales de Rails ya comentado anteriormente.

4.4 Fase 2: Nueva sección de actividades estado de un usuario viene en realidad dado por una variable booleana (apuntado / no apuntado) por defecto el botón “No” aparece activado; no existe un estado de “indiferencia” con respecto a una actividad. 7. Este enlace muestra el número de personas que se apuntó a una actividad. Si alguno de los contactos del usuario se apuntó a dicha actividad se mostrará otro enlace entre paréntesis de la forma: 5 interesados (1 contacto). Estos enlaces llevan a otra página (con el formato de la sección Gente), donde se listan los perfiles de esos contactos. 8. Mediante este enlace “Actividades pasadas” se accede a todo el listado de actividades con fecha de finalización anterior al presente. Realmente no es un enlace muy útil de cara al usuario, por eso aparece abajo de todo y bastante pequeño. En cambio, el tener la página enlazada con toda esa base de datos de actividades caducadas puede tener relevancia para el posicionamiento de la web en los motores de búsqueda. Cuanto mayor contenido útil, mayor número de páginas y enlaces tendrá la web y todo esto es tenido en cuenta por los motores de búsqueda. Página descriptiva de una actividad: 1. Es el botón “Me gusta”, con la misma funcionalidad comentada anteriormente. 2. Se toma una muestra de 3 usuarios interesados en esa actividad. Para mostrar los usuarios más relevantes al usuario se programó un algoritmo que prioriza en este orden: a) Con más prioridad los usuarios que son contactos del usuario activo y que además tienen foto en su perfil. b) Usuarios con foto que no son contactos del usuario activo. c) Usuarios sin foto que son contactos del usuario activo. d) Usuarios sin foto y que no son contactos del usuario activo. En caso de que la actividad sea visitada por un usuario externo a la web se priorizarán simplemente a aquellos usuarios que tengan foto.

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com

Figura 4.11: Vista de una actividad específica

3. Los comentarios sólo se permiten a usuarios registrados pero el formulario se muestra para usuarios externos también. Es un modo más de intentar “atrapar” a nuevos usuarios que se ven obligados a registrarse para participar. Como en prácticamente todos los elementos interactivos de Sigojoven, al introducir un comentario se recarga toda la página en vez de recargarse solo el elemento correspondiente dado que no se utiliza AJAX para su implementación. 4. Estos enlaces proporcionan un modo de volver al índice general de actividades. Es siempre conveniente enlazar todas las páginas de modo que hayan una o más formas de volver atrás sin necesidad de utilizar el botón atrás del navegador. 5. El botón “Denunciar” abre un formulario que permite enviar un mensaje directamente al administrador para denunciar una actividad en caso de ser inapropiada. Comento ahora una anécdota, pero algo a tener en cuenta también, sobre el modo de nombrar botones y enlaces en la web: Algunos de los botones y enlaces que

100

4.4 Fase 2: Nueva sección de actividades cambiábamos o estrenábamos en la web causaban confusión en algunos de los usuarios. Por ejemplo, el botón “Denunciar” comenzó llamándose “Inapropiado” y más de un usuario nos escribió quejándose de que algunas actividades y post en la sección de grupos estaban calificadas de inapropiadas sin una buena razón, es decir que se confundían el botón para marcar como inapropiado con un cartel que indicaba que ese contenido era inapropiado. Lo mismo paso con el botón “me gusta”, al principio comenzó siendo un botón que al igual que en Facebook se llamaba “Me gusta”, pero algunos usarios se preguntaban porque ponía “Me gusta” en actividades que no les gustaban. En general se decidió que todos los botones y enlaces que producían una acción utilizarían un verbo en modo infinitivo y así nunca hay confusión: Añadir actividad, denunciar, recomendar, etc.

Figura 4.12: Página de añadir actividad.

La página de añadir actividad consiste en un formulario HTML sencillo. Rails proporciona algunas funciones para el tratamiento de formularios que serán comentadas en el apartado 4.6.

101

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com Los formularios deben siempre ser validados a menos que no se le exija al usuario que rellene obligatoriamente alguno de los campos. Además la validación ayuda a prevenir errores, restringir el tipo de información a introducir en los campos, etc. En Rails la validación de formularios se puede procesar directamente sobre el modelo del objeto que el formulario va a crear. En el caso de este formulario de nueva actividad, cuando el usuario hace clic en el botón “Publicar actividad”, se crea un nuevo objeto actividad en la base de datos basándose en el modelo actividad definido en la aplicación Rails; en este modelo se especifican las restricciones para la validación con instrucciones del tipo: validates_presence_of :titulo, :mensaje => ’Debes escribir un título.’ validates_has_alphanumerics :titulo, :mensaje => ’Debes escribir un título válido’, :allow_blank => true

Si además el modelo incluye una función validate, ésta será comprobada antes de crear el objeto. En el caso de una nueva actividad es muy importante comprobar que el usuario introduce fechas lógicas y válidas para las actividades: def validate if begins_at && ends_at if begins_at > ends_at errors.add(:ends_at, ’La fecha de inicio no puede ser posterior a la final.’) elsif ends_at < Time.now && (new_record? || ends_at != old_ends_at) errors.add(:ends_at, "La fecha de fin no puede ser pasada.") ... end end end

4.5.

Fase 3: Creación de la sección de ofertas

Como ya se ha comentado en secciones anteriores, la base del modelo de negocio de Sigojoven reside en la sección de ofertas. Con esta sección formando parte del conjunto

102

4.5 Fase 3: Creación de la sección de ofertas de medios que proporciona la web para publicitarse se pretende acomodar la publicidad de la web de un modo poco intrusivo y enfocado al usuario: es el usuario quien decide que ofertas recibir en su página de inicio privada. Se pretende además facilitar a las empresas la creación de ofertas, aunque sigue sin estar lo suficientemente automatizado: la empresa tiene que contactar con Sigojoven para poder colocar su publicidad en los banners, no hay herramientas suficientes aún para que las propias empresas gestionen y paguen por la publicidad sin contactar con la web tal y como sucede en Facebook.

Figura 4.13: Interconexión de las páginas que componen la sección de actividades

Desde el punto de vista de las empresas la sección de ofertas les facilita una herramienta para crear una página de empresa siguiendo el enlace “Añadir empresa” situado en la página inicial de la sección. Es muy probable que este paso no sea necesario ya que, a medida que se desarrollaba esta sección, se han ido introduciendo una a una más de 5000 empresas españolas con información e imágenes extraídas de su página web u otros medios. Para crear una empresa o introducir cambios y ofertas en una ya existente hay que tener una cuenta de usuario en la web, entonces desde la propia página de la empresa se podrán añadir ofertas tan sólo si el administrador de Sigojoven le da permisos para

103

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com ello, ya que hay un coste asociado al número de ofertas simultáneas que una empresa publica (esto ha sido explicado en el apartado 2.3.2). El usuario común accede a la sección de ofertas tanto desde el menú superior como desde la página de inicio privada (desde donde se enlaza a ofertas específicas). Básicamente consiste en dos directorios, uno de empresas y otro de ofertas asociadas a esas empresas. A cada empresa le corresponde una página de empresa con sus datos, un enlace a su página web, su situación en Google maps y el listado de ofertas que se ofrece a los usuarios de Sigojoven. El directorio no cuenta con un buscador de empresas / ofertas pero se puede navegar por las distintas categorías y provincias en las que se clasifican. En todas las páginas pertenecientes al directorio de empresas y ofertas se muestra en la esquina superior derecha un espacio reservado para una oferta destacada cargada aleatoriamente de entre las N (aún sin decidir el número máximo) posibles empresas que podrán pagar simultáneamente por este servicio.

Figura 4.14: Oferta destacada.

La función más importante, y realmente el objetivo último del directorio de empresas y ofertas recae sobre el botón “Recibir ofertas” que se encuentra en la página de la empresa o en la ficha de la empresa del listado de empresas. En la figura 4.15 se aprecia el efecto de la interacción del usuario con el botón “Recibir sus ofertas” dentro de la página de una empresa. Al hacer clic el usuario queda subscrito a esa empresa. Puede subscribirse en cuantas empresas quiera y al hacerlo va a poder ver tres ofertas distintas elegidas de forma aleatoria en su pagina de inicio privada. El algoritmo que decide que tres ofertas mostrar cada vez que se accede a la página de

104

4.6 Fase 4: Rediseño de la sección “Mis datos” inicio privada es muy sencillo, tan sólo junta todas las ofertas de todas las subscripciones del usuario en un array y de ahí escoge tres aleatoriamente comprobando que no se repita ninguna.

Figura 4.15: Interacción del botón “Recibir sus ofertas”.

En el apartado 5.3 se hace una crítica a la efectividad de este sistema publicitario y posibles mejoras.

4.6.

Fase 4: Rediseño de la sección “Mis datos”

Desde un punto de vista funcional la sección “Mis datos” necesita sobre todo simplificarse. Aunque se decide suprimir alguno de los campos de información personal sigue siendo mucha la información que se le pide al usuario para tener su perfil completo y sin embargo toda es aprovechable y necesaria para muchos de los objetivos de la red

105

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com social. Se reestructura toda la sección y se simplifica para que el usuario no se “asuste” al empezar a cubrir su perfil. Es muy importante conseguir que los usuarios rellenen todo su perfil. Una red social no es nada sin usuarios y una red social con usuarios que no suben fotos ni dan ninguna información sobre sí mismos resulta aburrida y demuestra desconfianza o pereza por parte de sus usuarios al rellenar el perfil. Además mucha de la información de perfil es o será utilizada para controlar la publicidad, agrupar usuarios por aficiones o buscar amigos por centros de estudio o de trabajo entre otras ventajas. Por todo esto se toman algunas medidas para animar a los usuarios a completar su perfil: Se informa al usuario tanto en la página de inicio privada como en los distintos apartados de la sección “Mis datos” de hasta que porcentaje está completo su perfil y que datos le faltan por cubrir. Esto junto a un resumen especificando que porcentaje del total corresponde a cada uno de los apartados a cubrir (ver figura 4.16) ayuda a que el usuario busque completar su perfil. Se obliga al usuario a subir una foto de perfil para poder acceder al perfil de los demás.

Figura 4.16: Formulario y porcentaje completado del perfil.

Se obliga al usuario a subir tres imágenes para poder ver las imágenes de los demás. Será requisito tener el perfil completado al 100 % para obtener una cuenta premium (ver apartado 3.2.3)

106

4.6 Fase 4: Rediseño de la sección “Mis datos”

Entre los apartados de esta sección se encuentran las opciones de privacidad de la web. Como ya se comentó en el apartado de Facebook, las opciones por defecto de privacidad son muy importantes ya que de ellas dependen el nivel de interacción entre los usuarios de una red social. Se suele aprovechar el hecho de que muchos usuarios ni si quiera se plantean los problemas que puede acarrear la falta de privacidad en la red social o ignoran que es posible cambiar estas opciones. Normalmente a la red social como negocio le interesa que los usuarios compartan la máxima cantidad de información posible y pero al mismo tiempo este deseo se ve limitado por la desconfianza e incluso enfado que puede generar entre los usuarios el ver que están compartiendo información que no quieren compartir. Sigojoven tiene unas opciones de privacidad por defecto más bien conservadoras, pero aún posiblemente molestas para muchos usuarios ya que estarían compartiendo sus fotos con los contactos de sus de contactos (que no necesariamente conocen) y cualquier usuario podría enviarles un mensaje. Además cualquier usuario pone por defecto su perfil disponible a los motores de búsqueda.

Figura 4.17: Opciones de privacidad por defecto.

Desde un punto de vista técnico la mayor parte de esta sección está compuesta de formularios. Para trabajar con formularios Ruby on Rails proporciona varios “helpers” que son funciones de apoyo para facilitar tareas comunes en Rails. Básicamente con

107

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com la ayuda de estas funciones lo que se hace es enviar los parámetros que contienen la información recogida de un formulario a un controlador: < % form_tag({:controller => "gente", :action => "cambiar_nombre"}, :method => "get") do %> < % text_field_tag (:nombre) %> < %= submit_tag("Cambiar nombre") %> < % end %> Como ejemplo, este sencillísimo formulario presenta una caja de texto y un botón “Cambiar nombre”. El usuario introduce el nuevo nombre en la caja de texto y al hacer clic en el botón está enviando el parámetro “nombre” al controlador “gente” y acción (una acción es similar a una función en otros lenguajes de programación) “cambiar_nombre”. Dentro del código de esa acción bastará con hacer nuevo_nombre = params [:nombre], (donde :nombre es el valor introducido en la caja de texto del formulario) para obtener el parámetro pasado por el formulario y hacer lo que se necesite con él. Estos formularios se hacen más complejos cuando hay que subir archivos, (la foto del perfil o imágenes del usuario por ejemplo) o cuando es necesario enviar matrices de parámetros en vez de parámetros sueltos como ocurre en nuevo apartado de “Conoce más de mí” de esta sección, en la que se envían en un mismo formulario parámetros que modifican simultáneamente varios objetos de la base de datos.

4.7.

Fase 5: Rediseño de la sección de mensajes

La sección de mensajes original es muy básica, carece de un diseño adecuado y presenta problemas de compatibilidad del código CSS con los distintos navegadores. Los objetivos del rediseño / reimplementación son: 1. Discutir la mejor forma de organizar la sección de mensajes. Analizar como funciona esta sección en otras redes sociales de relevancia. 2. Para las bandejas de entrada y el directorio de mensajes enviados adoptar una estructura similar a la de la red social Facebook, respetando el formato y colores característico del resto de secciones de Sigojoven. Incluir fotos del destinatario o del remitente según sea bandeja de entrada o salida.

108

4.7 Fase 5: Rediseño de la sección de mensajes 3. Presentar los mensajes con formato de conversación: Se acumulan los mensajes envidados y recibidos en una pila, siendo el mensaje situado en la parte superior de la pila el último. Cada mensaje incluirá fotografía y fecha de envío. 4. Elegir un método de introducción de destinatarios para un mensaje e implementarlo. 5. Implementación CSS para resaltar los mensajes no leídos y el mensaje actualmente bajo el puntero de ratón.

¿Se puede innovar en la sección de mensajes?

La sección de mensajes de una red social se puede ver como una versión del sistema de correo electrónico con una extensión reducida a la del número de usuarios registrados a la web. El correo electrónico lleva muchos años presentando la misma estructura, separando los mensajes en una bandeja de entrada (para los recibidos), una bandeja de salida (para los mensajes pendientes de enviar) y los mensajes enviados. Poco a poco el correo va evolucionando. En algunos clientes de correo los mensajes se agrupan en conversaciones, la bandeja de salida pierde relevancia y pasa a llamarse muchas veces “borradores” y hasta se integra mensajería instantánea almacenando las conversaciones como mensajes de correo electrónico. Sin embargo, en general, la estructura se preserva. Los sistemas de mensajería en las redes sociales evolucionan un poco más rápido: Facebook sigue conservando la carpeta de mensajes enviados, pero la deja en un segundo plano. Si se accede a los mensajes se está accediendo a la bandeja de entrada directamente, pero como los mensajes se agrupan por conversaciones (secuencias de respuestas a un mismo mensaje) realmente se están visualizando también todos los mensajes enviados por el usuario que hayan tenido al menos una respuesta. Una vez en la carpeta mensajes hay una subcarpeta llamada “Mensajes enviados” donde aparecen todos los mensajes en los que haya participado el usuario (enviándolo por primera vez o en una respuesta).

109

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com Tuenti al igual que Facebook agrupa los mensajes en conversaciones pero mantiene intacta la estructura típica de bandeja de entrada y mensajes enviados. Badoo. Como ya se comentó anteriormente esta red social está más orientada a citas que a lazos de amistad o profesionales y por ello cambian varios aspectos relacionados con la privacidad. Es en cualquier caso una red social de importante éxito y propone un sistema de mensajería bastante innovador que conviene analizar. La mensajería instantánea que integran varias redes sociales (y en un futuro Sigojoven) y los mensajes convencionales son todo uno en Badoo. Es un interesante modo de simplificar las comunicaciones en una red social en la que la mensajería instantánea es la protagonista: todos los mensajes y conversaciones de mensajería instantánea se recogen en una misma conversación, cuando el usuario accede a la sección de mensajes solo tiene una conversación por persona y abriéndola accede a todo el historial de conversaciones y las últimas frases.

El sistema más adecuado para Sigojoven En la discusión de que sistema y diseño adoptar para Sigojoven se consideró la posibilidad de imitar el sistema de Badoo no haciendo distinción entre mensajes de entrada o salida y dejando abierta la posibilidad de integrar también la mensajería instantánea en un futuro. También se planteó si sería adecuado utilizar el diseño de dos pestañas más un enlace de “nuevo mensaje” del que hacen uso el resto de las secciones, esto sería en principio lo más acorde con la idea general de mantener una homogeneidad en el diseño de las secciones. Finalmente se desecharon ambas ideas y se optó por un diseño y funcionalidad similar al de Facebook pero manteniendo la estructura tradicional de “bandeja de entrada” y “bandeja de salida”. Entre los motivos para está decisión destaca sobre todo el de facilitar a los usuarios de la red, personas mayores y posiblemente familiarizadas con el uso del correo electrónico, un aprendizaje rápido si acostumbran a usar el correo electrónico o provienen de otras redes sociales. Además Sigojoven se anuncia como una red social que soluciona el problema de que hijos y padres compartan una misma red social y se anima a los jóvenes a facilitar a sus padres la migración de Facebook a Sigojoven.

110

4.7 Fase 5: Rediseño de la sección de mensajes Mensajes recibidos y mensajes enviados En los listados de mensajes recibidos y enviados se agrupan los mensajes por usuario y conversación, entendiendo por conversación una serie de respuestas consecutivas a un mismo mensaje por parte de los usuarios implicados. Usando tan sólo código CSS se consigue que cada una de las filas que componen la tabla con la información de los mensajes se comporte como un bloque único. De esta forma no es necesario tener el ratón justo encima del enlace o el texto para que se realce toda la fila o para acceder a su contenido haciendo clic. Utilizo el comando padding sobre las columnas para que el enlace se ensanche ocupando toda la fila y :hover sobre el css de la fila para que se realce toda la fila cuando se pasa el puntero por cualquiera de sus columnas. Es posible además establecer condiciones en el código Rhtml con las que decidir que código CSS utilizar (empleando diferente clases o ids) para un determinado elemento html según si se cumple o no una sentencia if. De este modo se le da un suave coloreado azul (se puede apreciar en la figura 4.18) a la fila correspondiente a un mensaje no leído y un coloreado blanco a la fila correspondiente a un mensaje leído.

Figura 4.18: Trabajo con CSS en los listados de mensajes.

Una pequeña dificultad surgió con la presentación de fotos y nombres de los destinatarios en el listado de mensajes enviados. Para los mensajes recibidos solo hay un posible remitente, en cambio múltiples destinatarios son posibles, y por tanto múltiples fotos y nombres a presentar en la fila correspondiente a ese mensaje dentro del listado de mensajes enviados. Esto se resolvió con un pequeño algoritmo que elige de entre aquellos

111

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com posibles destinatarios a los que se envía el mensaje, uno que tenga fotografía de perfil: se presentan la foto de este usuario, su nombre y a continuación de su nombre “y otros” indicando que hay más destinatarios. También hay que tener en cuenta que un contacto del usuario se puede dar de baja pero aún así se conservan los mensajes entre ambos y hay que comprobar si los usuarios aún existen al intentar mostrar sus fotos y nombres o el sistema dará un error. Estos escenarios y como se resuelven, se muestran en la figura 4.19.

Figura 4.19: Mensajes enviados.

Formato de los mensajes

En la figura 4.20 se muestra el formato adoptado para los mensajes. Como si se tratase de mensajería instantánea se apilan los últimos mensajes en forma de conversación y en la parte inferior está el formulario para introducir una respuesta. A diferencia de Facebook los mensajes se acumulan en forma de pila, es decir, el superior es el más reciente.

112

4.7 Fase 5: Rediseño de la sección de mensajes

Figura 4.20: Formato de los mensajes.

Pantalla de nuevo mensaje

Para la funcionalidad de “Enviar mensaje” se implementó en primer lugar un sistema de introducción de destinatarios similar al de Facebook (una caja de texto en la que se muestran contactos a medida que se teclean sus nombres o apellidos)8 . Tras un periodo de prueba muchos usuarios se mostraron descontentos por tener que saber el nombre de los contactos para poder enviarles un mensaje y preferían simplemente acceder a un listado de sus contactos y de ahí escoger los destinatarios. Lo interesante es hacer esto sin salir de la página de “Enviar mensaje” ni desplegar un listado interminable de contactos a elegir en la misma pantalla donde se escribe el mensaje. Lo más adecuado fue utilizar una “ventana” que se superpone a la página actual dejándola en un segundo plano en la cúal se escogen contactos de una lista y haciendo clic en “Aceptar” son añadidos como destinatarios del mensaje. El resultado se muestra en la figura 4.21, para hacerlo posible se hace uso del plugin Redbox que con una sentencia tipo: 8

Este sistema no ha tenido que ser implementado desde cero sino que existen plugins jQuery que realizan esta funcionalidad y tan sólo es necesario integrarlos con el código Rails de la web. (http://www.emposha.com/javascript/fcbkcomplete.html)

113

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com < %= link_to_remote_redbox ’Click Here’, :controller => ’test’, :action => ’index’ %>

Nos proporciona un enlace que abre una ventana superpuesta y tan solo hay que introducir el código correspondiente a esa ventana en el controlador y acción indicados en los parámetros de la función “link_to_remote”[52]. La página de selección consiste básicamente en un formulario html con un “checkbox” para seleccionar destinatarios y la información es reenviada a la página de “Enviar mensaje” desde la cual se lanzó la ventana “Redbox”.

Figura 4.21: Agenda de contactos para seleccionar destinatarios.

114

4.7 Fase 5: Rediseño de la sección de mensajes

Apéndice A: Desde la idea inicial a la puesta en producción. Seguimiento del proceso completo para un caso específico En este apéndice se busca unificar varios de los conceptos vistos a lo largo de esta memoria para aclarar, ordenando cronológicamente las diferentes etapas, cual es el ciclo completo de tareas que realizaba cada vez que surgía un cambio a realizar en la aplicación. De este modo y mediante el uso de un ejemplo específico se proporciona una idea general del trabajo de un ingeniero de software como parte de un equipo de desarrollo y mantenimiento de una aplicación web, o al menos, para el caso concreto de la aplicación Sigojoven.com.

El listado de actividades pasadas

En el apartado que trata sobre SEO y también en el apartado en que se explica la creación de la nueva sección de actividades, se habla de este pequeño enlace en el listado general de actividades y su importancia sobre todo para la mayor presencia y mejor posicionamiento en los motores de búsqueda. Esta pequeña modificación servirá de ejemplo para explicar todo el proceso de implementación. Durante la implementación de la nueva sección de actividades surgió la duda de que hacer con las actividades que caducaban. Tal como se estaba implementando éstas quedarían almacenadas en la base de datos pero no se mostrarían en los listados de actividades, ¿para que conservarlas si no se estaban mostrando?. Comenté esta duda con mis compañeros y tras discutirlo y escuchar la opinión del SEO, se decide que es importante que todas estas actividades caducadas sigan enlazadas al resto de la web, pero como es algo de poco valor para el usuario se colocará un enlace discreto en la parte inferior del índice de actividades. La tarea a realizar es por lo tanto colocar un enlace llamado “Actividades pasadas” en el índice de actividades que lleve a una nueva página mostrando un listado de actividades pasadas exactamente con el mismo formato que el índice de actividades general. Lo primero es escoger uno de los directorios test del servidor (elegimos por ejemplo test3); este será el entorno seguro para probar todos los cambios que desee sin afectar a la aplicación en producción o a otros entornos en los que esté realizando cambios.

115

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com Recordando lo que se comento en el capítulo 2 sobre la estructura de una aplicación Rails, la mayor parte del código se encuentra en la carpeta app y dentro de esta tenemos siempre los mismos subdirectorios: models, helpers, views y controllers; que corresponden a los elementos que forman la estructura modelo-vista-controlador en la que se basa Rails (helpers y views es una división dentro de la capa vista). Comenzamos introduciendo el enlace “Actividades pasadas” dentro del índice de actividades. Esa página ya está creada por lo tanto sólo hay que encontrar el fichero que contiene su código e introducir ahí el código correspondiente al enlace que queremos crear. En la carpeta views se encuentra todo el código que va a ser transformado en código HTML y javascript para su visualización en un navegador, nuestro enlace es un elemento HTML así que vamos a buscar el fichero que muestra el índice general de actividades dentro de esta carpeta. El fichero que buscamos está en /app/views/events/_events_list.html.erb, es utilizado no sólo por la página inicial de la sección de actividades sino por todas aquellas que necesiten listar actividades9 (por ejemplo el resultado de una búsqueda dentro de la sección actividades). De esta forma si añadimos el enlace “Actividades pasadas” en este fichero tendremos automáticamente enlazadas todas las páginas que listan actividades con nuestra nueva página de actividades pasadas. Para añadir un enlace en Rails usamos la función link_to: < %= link_to (’Actividades pasadas’, :controller => ’/events’, :action => ’anteriores’) %>

Como los ficheros Rhtml mezclan código html con código ruby se utilizan < %= y %> para insertar código ruby entre las sentencias html. Con esa función estamos creando un enlace llamado “Actividades pasadas” y le estamos indicando donde se encuentra el código correspondiente a la página destino del enlace. El elemento en Rails que se encarga de recoger peticiones y generar respuestas es el controlador. Cuando el usuario hace clic en el enlace que acabamos de crear estará generando una petición: desea visualizar la lista de actividades pasadas. En la función link_to se indica que controlador y que acción va a recoger la petición y generar la respuesta que consistirá en mostrar una nueva página con el listado de actividades. Una 9

Este tipo de ficheros cuyo nombre comienza por un guión bajo son llamados parciales. Se utilizan sobre todo para no repetir código, muchas páginas distintas pueden incluir un mismo parcial que muestre un trozo de página html común a todas ellas.

116

4.7 Fase 5: Rediseño de la sección de mensajes acción es una función dentro de un controlador y, haciendo uso de las convenciones del framework, si la acción se llama “anteriores” y existe un fichero con el mismo nombre dentro de la vista correspondiente, Rails automáticamente asocia ese controlador y esa vista y envía al navegador web la página correspondiente. Tenemos que crear entonces dos elementos: Creamos una nueva acción dentro del controlador: /app/controllers/events_controller.rb. def anteriores @events = Event.all(:order => ’events.ends_at’).sort{|l,r| l.ends_at <=> r.ends_at} @events_caducados = on_memory_paginate (@events.select {|e| e.has_expired?}, params[:page], AppConfig.general.events_per_page ) end

Sin entrar en detalles, tan sólo con crear la acción vacía sería suficiente para que la nueva página a la que lleva el enlace “Actividades pasadas” se mostrase en el navegador. Se definen variables con @variable que contienen información utilizada por el código de la vista correspondiente. En este caso @events_caducados contiene el array de todas las actividades caducadas. Creamos un fichero /app/views/events/anteriores.html.erb que va a contener el listado de actividades pasadas, este es el fichero que se muestra en el navegador y va a tener exactamente el mismo formato que cualquier otra página del listado de actividades. Simplemente copiamos ese código y substituimos la variable @events por la variable @events_caducados que es la que nos proporciona la acción antes creada. Aún no hemos terminado con el código. La página que lista las actividades pasadas utiliza el mismo formato que usábamos para listar las actividades aún activas así que utilizamos también el mismo código CSS que se utilizó para toda la sección. Pero ese pequeño enlace que añadimos en el fichero _events_list.html.erb va a aparecer muy probablemente descolocado ya que no hemos definido ningún código de estilo para el. Modificamos un poco el código de ese fichero y tenemos ahora:

117

4 Mi función en Sigojoven (2): Rediseño e implementación del nuevo SigoJoven.com <div class="ver_anteriores"> < %= link_to (’Actividades pasadas’, :controller => ’/events’, :action => ’anteriores’) %> </div>

Añadimos el elemento html <div> , que se encarga de separar secciones dentro de un documento html, y le asignamos la clase “ver_anteriores”. Esta va a ser la clase que el navegador va a buscar dentro del CSS asociado a esta página para asignar un estilo a esa sección. El fichero CSS asociado a cualquier vista dentro de la sección de actividades es events.css. Vamos a definir estilos para la clase “ver_anteriores” dentro de ese fichero (aquí se podría utilizar la extensión Firebug del navegador Firefox para probar los cambios en tiempo real): .ver_anteriores{ float:left; font-size:13px; margin-left:10px; margin-top:5px; width:200px }

Ahora ya sólo nos falta comprobar que todo funciona correctamente. Se introduce en el navegador la dirección http://test3.sigojoven.com:3001, y se navega por las distintas páginas comprobando los cambios. Si se hace un cambio grande, por ejemplo una sección completa, se le pide al resto del equipo que coopere buscando errores y probando con distintos navegadores. Si todo funciona correctamente se avisa a todo el equipo de que se van a pasar los cambios a producción. Se substituyen los ficheros modificados por los originales en producción y se resetea el servidor web para que todos los cambios sean efectivos.

118

5 Conclusiones 5.1.

Sigojoven en cifras

Los siguientes datos se han extraído de algunas noticias en blogs y varias páginas de valoración y análisis de sitios web como son: Alexa, WooRank, popuri.us y bizinformacion.es1 : Sigojoven.com se lanza en Marzo del 2009. Ocupa el puesto 124.949 en el Alexa Traffic Rank. Tuenti tiene el puesto 596, Facebook el puesto 2, Activagers el puesto 195.863 y mayormente.com el puesto 1.628.8132 . Obtiene un woorank de 64.9. El woorank de Tuenti es de 75.7, el de Facebook es de 85.2, el de Activagers es de 39.0 y el de mayormente.com es de 43.03 . Google le asigna un PageRank de 4 sobre 10. Facebook obtiene un PageRank de 10 sobre 10, Activagers un 2 sobre 10 y mayormente.com un 4 sobre 104 . Valorado en 117.117,72 euros por bizinformacion.es. 50.000 usuarios registrados a fecha de Enero de 20105 . 1

Muchos de los datos extraídos son estimaciones, varían de una página a otra y pueden estar muy alejados de la realidad. 2 El Alexa Traffic Rank mide la popularidad de una página web en función del número de visitantes y páginas vistas diarios durante los últimos 3 meses. 3 El woorank intenta medir el grado de efectividad de la comercialización de una página web. Está basado en 50 distintos criterios, incluyendo: estructura del sitio web, tráfico apróximado, rendimiento del sitio, presencia en los motores de búsqueda y otros. 4 Para obtener los valores de PageRank se utilizó la web: http://www.prchecker.info. 5 Según Rodolfo Carpintier, Presidente de DAD, en su blog: http://rodolfocarpintier.com/post/2010/01/27/aumento-capital-sigojoven-com.

119

5 Conclusiones De esos 50.000 usuarios registrados solo unos 50 están navegando por la red social simultáneamente. Sigojoven consta de algo más de mil ficheros de código Ruby y Rhtml.

5.2.

Evolución. Sigojoven en la actualidad

Desde la finalización de mi periodo de prácticas en la empresa a la actualidad a transcurrido aproximadamente un año, tiempo suficiente para sacar algunas conclusiones sobre la evolución de esta red social. Las dos aplicaciones más utilizadas para medir la evolución de una aplicación web son Alexa y Google trends. Google trends considera que no hay el suficiente volumen de tráfico en Sigojoven para realizar un análisis por lo que me voy a basar en Alexa y en mis propias impresiones para medir la evolución de la red social a lo largo de los últimos meses.

Figura 5.1: Evolución de Sigojoven desde Marzo de 2009. Información extraída de alexa.com.

120

5.2 Evolución. Sigojoven en la actualidad En esta figura 5.1 se ve la evolución de Sigojoven para 3 distintos parámetros desde su nacimiento hasta la actualidad: 1. La primera gráfica corresponde al porcentaje que, de todas las páginas vistas por los internautas en toda la web, corresponde a Sigojoven. Da una idea de la popularidad de Sigojoven respecto al resto de páginas de la web. El primer y segundo trimestres del 2010 fue el mejor periodo de la web para este parámetro. 2. La segunda gráfica corresponde al número de páginas vistas diariamente por un mismo usuario dentro de Sigojoven. Da una idea de la fidelidad de los usuarios hacia la web. El primer y segundo trimestres del 2010 fue el mejor periodo de la web para este parámetro. 3. La tercera gráfica muestra el porcentaje del total de los usuarios de Internet que visitan Sigojoven a lo largo de un día. Se mantiene prácticamente estable desde comienzos del 2010 con una leve mejoría en el primer trimestre del 2011. Según los datos recopilados por Alexa se puede concluir que Sigojoven se encuentra en situación de estancamiento o leve deterioro. Esto en cuanto al tráfico generado en la web, pero ¿ha evolucionado a otros niveles en los últimos 12 meses?. Se han realizado los siguientes cambios: Desde Enero de 2011 Sigojoven pasa a ser una red social privada, esto es, solo se puede acceder a todo su contenido mediante una invitación como sucede con Tuenti. No obstante, sigue siendo posible, para un usuario no registrado, ver todo el contenido correspondiente a actividades y grupos públicos y parte del contenido del listado de gente; con lo que sigue exponiéndose parte de la información de los usuarios a visitantes externos. Desaparece en Marzo de 2011 el apartado de ofertas. En Febrero de 2010, mi último mes de prácticas en la empresa, aún no se había colocado ningún banner publicitario en la web. A fecha de Marzo del 2011 hay banner publicitarios en todos los espacios destinados para ello. La publicidad proviene de Google AdSense y también de alguna empresa específica. Se han hecho algunos cambios adecuados de diseño, pero en general el aspecto de la web sigue siendo el mismo. Se han hecho también pequeños añadidos y cambios en la funcionalidad.

121

5 Conclusiones Se ha añadido una herramienta para importar contactos de Gmail, Hotmail, Yahoo! y Facebook; un sistema de puntos según la interacción del usuario para clasificar a los usuarios en un ranking y elegir a los usuarios del día y una función para asignar embajadores de provincia, que se encargan de supervisar contenido relacionado con su provincia. Aún no hay una herramienta para localizar antiguos compañeros de trabajo o estudios, ni mensajería instantánea, ni ningún tipo de juego. El número de usuarios conectados simultáneamente se ha incrementado levemente, pasando de unos 40 a unos 60 usuarios conectados.

5.3.

Crítica y posibles mejoras

En el apartado anterior se han dado datos sobre la evolución de Sigojoven a lo largo de un periodo de 12 meses sin entrar en valoraciones sobre si estos resultados son o no positivos. He procurado mantener una narración objetiva sobre aspecto técnicos y funcionales de la aplicación a lo largo de toda esta memoria. En este apartado expongo mi opinión sincera sobre qué aspectos de Sigojoven no me gustan, qué funcionalidades añadiría, cambiaría o eliminaría y qué creo que puede estar frenando el crecimiento de esta red social. Es una crítica basada en mi experiencia como miembro del equipo y como usuario, totalmente subjetiva y no necesariamente acertada. El nombre. Sigojoven me parece un nombre cuanto menos arriesgado. Según la forma de ser de la persona que la escuche, le va a resultar gracioso, molesto, poco serio, quizás ocurrente y con muy poca probabilidad, indiferente. Creo que se debería apostar por un nombre más neutro, sin connotaciones sobre el rango de edad sobre el que trata la web, intentar que sea ingenioso y único, y mejor si es más corto, de dos sílabas como ocurre en otras redes sociales: Tuenti, Facebook, Badoo, Twitter, Orkut... Una red social vive del boca a boca y cuando pides a algún amigo o familiar que se registre en la web para ser uno de tus contactos no debe avergonzarte decir el nombre de la página, como probablemente suceda para algún usuario de Sigojoven.

122

5.3 Crítica y posibles mejoras La comunidad de usuarios. Posiblemente no sea casual que la comunidad sobre la que menos se ha volcado el fenómeno de las redes sociales sea el de las personas mayores. Es un colectivo difícil: menos activo, más desconfiado, con menos paciencia para adaptarse a los cambios y en muchas ocasiones con dificultades para realizar acciones básicas como son el subir una imagen o abrir el correo electrónico de confirmación de registro. La problemática de la privacidad se hace más notoria en Sigojoven. Las personas mayores pueden desconfiar demasiado por ignorancia, por que la falta de privacidad en las redes sociales es algo que se comenta en las noticias; pero también pueden desconfiar por que son usualmente más cautos que un chico de 16 o 20 años. Son mucho más reacios a subir fotografías o dar datos sobre si mismos y sin este tipo de contenido la red social se empobrece de cara al resto de los usuarios. También cambia el tipo de actividades que este colectivo aprovecha de una red social. Mientras que Tuenti nació y creció ofreciendo simplemente intercambio de mensajes y fotos; Sigojoven va a necesitar ofrecer algo más ya que una persona mayor no sube cada fin de semana fotos del Sábado noche, ni etiqueta a nadie en ellas y posiblemente no tenga tanta novedad que compartir con sus contactos como ocurre en el caso de la gente más joven. Por ello Sigojoven cuenta con una agenda cultural, con los blogs y con los diferentes concursos de fotos, chistes, etc., pero no acaban de generar la suficiente actividad entre los usuarios. Por otro lado, todo el esfuerzo que se hace por simplificar cada acción dentro de la aplicación y por mantener un aspecto intuitivo y limpio, parece no ser suficiente para muchos usuarios. Hay “miedo” por gran parte de los usuarios a hacer algo mal y no se animan a agregar contenidos. Si no agregan contenidos se aburren y no enriquecen la red social. Este miedo no es culpa de esta aplicación, sino una reacción común de la gente mayor o con poca experiencia al realizar cualquier tipo de actividad en un ordenador. Para empeorar las cosas, si un usuario, aún siendo mayor, tiene la suficiente habilidad con la informática (algo cada vez más común) probablemente prefiera utilizar Facebook. En Facebook además de compartir información de carácter informal con amigos y familiares podrá establecer relaciones de tipo laboral y participar en grupos relacionados con su trabajo y asociaciones o empresas que apoya.

123

5 Conclusiones Sigojoven comenzó ofreciéndose como red social para mayores de 50 y posteriormente se amplió un rango de 40 en adelante intentando captar esos usuarios más jóvenes y activos. Pero creo que un usuario de 40 años aún es muy joven para querer utilizar Sigojoven en vez de Facebook, y además aún menos sentido tiene para él utilizar una red que se llame “Sigojoven”. Aún a pesar de todas estas dificultades, sí creo que existe una oportunidad de negocio en una red social para el colectivo senior de España. Facebook es muy compleja para algunas personas mayores y su diseño puede ser confuso y consta de muchos elementos demasiado pequeños. Además muchos padres, quizás animados por sus hijos, ven la necesidad de utilizar un red distinta que la de sus hijos para mantener la privacidad de ellos y la suya propia. Es sin duda una comunidad más complicada de contentar y mantener activa, pero no imposible. Privacidad. Al igual que ocurre en otras redes sociales se intenta mantener un equilibrio entre la cantidad de información que los usuarios muestran (ayuda a que la red se expanda y sea más atractiva para los usuarios) y la que ocultan (ayuda a que el usuario tenga confianza en la aplicación y pierda el miedo a compartir información). Como ya he comentado antes, considero al colectivo de personas mayores, el más sensibilizado con los problemas que acarrea la falta de privacidad en las redes sociales. Muchas personas mayores sienten además miedo a compartir información por considerar que no tienen suficientes conocimientos respecto a como funciona la aplicación o Internet en general como para saber si la información que comparten va a llegar solo a donde ellos quieren que llegue. Por ello creo que Sigojoven debería esforzarse en ofrecer un entorno de confianza total para sus usuarios. Debería posiblemente ser casi tan cerrado como lo es Tuenti: registro sólo mediante invitación, listados de gente solo disponibles para usuarios registrados e información del usuario no indexable por los motores de búsqueda como opción por defecto. Diseño y funcionalidad. El diseño resulta simple pero es muy legible; creo que es adecuado teniendo en cuenta el conjunto de personas al que está dirigido. Se ha logrado mantener un formato homogéneo en todas las secciones, se cuida que los elementos estén bien separados y el

124

5.3 Crítica y posibles mejoras tamaño de letra sea siempre un poco más grande de lo común. La inclusión de una publicidad basada en banners, muchos de los cuales son animaciones, estropea bastante el formato de la página y despista al usuario; pero este tipo de publicidad se trataría de una solución temporal. En cuanto a funcionalidad es un red social con todos los elementos característicos (excepto la posibilidad de crear actividades privadas), pero se echan en falta algunos extras que mantengan a los usuarios activos en la web durante más tiempo: Un sistema de mensajería instantánea. Es algo que los propios usuarios llevan pidiendo desde hace bastante tiempo y que ya está presente en las redes sociales más importantes. Juegos colaborativos. Integrar pequeños juegos en una red social demostró ser muy rentable en Facebook, además de mantener a los usuarios ocupados en la red ayudan a estrechar lazos entre los usuarios que participan y pueden generar ingresos si se coloca publicidad. A los usuarios mayores también les gusta jugar, es cuestión de añadir un conjunto de juegos adecuados para su edad. Un sistema de preguntas y respuestas, similar a Yahoo! Respuestas. A muchas personas mayores les gusta ayudar y sentirse útiles. Una aplicación integrada en la red social que permita a los usuarios participar contestando preguntas que otros usuarios proponen podría mantener a los usuarios más activos y fomentar nuevas amistades entre usuarios que no se conocen. Además podría complementar la ya comentada cuenta premium a través de la participación si un usuario obtiene puntos cada vez que contesta a una pregunta y su respuesta es dada por buena. Por otro lado, y aunque es una cuestión más bien técnica, mejoraría también la experiencia del usuario si muchas de las acciones que implican enviar formularios o actualizar determinadas zonas de una misma página se implementasen en AJAX6 . Una última cosa que creo que debería mejorar es el buscador general incorporado en la barra superior de la web. Mientras que los buscadores de actividades y usuarios funcionan correctamente y están bien integrados, este buscador general es en realidad un buscador Google integrado en Sigojoven, con lo cual al realizar la búsqueda se presenta una página de resultados que nada tiene que ver con el diseño de Sigojoven 6

AJAX permite realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

125

5 Conclusiones y presenta publicidad agregada por Google sobre la que Sigojoven no tiene ningún control.

Problemas técnicos.

Sigojoven ha sido inicialmente implementado utilizando la versión 2.1 de Rails. En el momento de redactar esta memoria está disponible la versión 3.0.5. A partir de la versión 3 de Rails lo recomendado es utilizar la versión 1.9.2 de Ruby en vez de la versión 1.8.x sobre la que se ejecutaba Rails 2. Desde la fecha de publicación de la versión 2.1 de Rails, en junio de 2008, este framework ha mejorado mucho; además Ruby 1.9 integra importantes mejoras de rendimiento respecto a la versión 1.8[53, 54]. Pero Sigojoven.com sigue estancado en la versión 2.1 del framework Ruby on Rails y una actualización a la última versión de Rails se hace cada vez más complicada ya que todos los plugins y gemas tienen que ser también actualizados para ser compatibles con Rails 3 y todos los cambios necesarios en el código se acumulan haciendo demasiado compleja la depuración de errores. La actualización es mucho más sencilla si es gradual.

La velocidad con la que se cargan las páginas es aceptable pero hay una cierta lentitud presente, independiente del tamaño de la página y probablemente también de la velocidad del servidor, por cada vez que se solicita una página nueva al servidor. Es decir, el tiempo de respuesta de la aplicación es más bien mediocre y realmente empeora la experiencia. Desconozco hasta que punto cierta lentitud es inherente al lenguaje de programación, ya que algunas fuentes aseguran que Rails da un peor rendimiento que las aplicaciones basadas en tecnología LAMP 7 , pero posiblemente la actualización tanto de Ruby, como del framework Ruby on Rails y los plugins utilizados por la aplicación a su última versión, mejoraría el rendimiento general de la aplicación.

Otra consecuencia de estar anclada en una versión de Rails obsoleta es el uso por defecto del framework Prototype para crear contenido JavaScript. jQuery es la opción más ampliamente utilizada y las versiones más actuales de plugins y gemas hacen uso de esta librería. 7

LAMP es un acrónimo empleado para un conjunto de subsistemas software utilizado muy comúnmente para configurar sitios web o servidores dinámicos. Las siglas hacen referencia a las tecnologías: Linux, el sistema operativo; Apache, el servidor web; M ySQL, el gestor de bases de datos y Perl, PHP, o Python, los lenguajes de programación.

126

5.3 Crítica y posibles mejoras

Figura 5.2: A comienzos del 2011 muchos usuarios cambiaron su imagen de perfil como protesta por los varios fallos técnicos de la web.

El modelo de negocio. Todo el sistema de publicidad de la aplicación va a tener que mejorar mucho si se quiere alcanzar el objetivo de imponerse como red social líder para mayores de 40. Todo el proceso debería ser automático, es necesario desarrollar herramientas que permitan a las empresas no sólo crear una página en Sigojoven sino también subir su propio formato de publicidad y decidir cuanto pagan por ella. Además el modo de pago por publicidad que se ofrece es obsoleto, las empresas quieren pagar por clic o por número de impresiones de su publicidad. Por otra parte la inclusión de banners publicitarios se entiende como alternativa temporal pero ahora mismo la publicidad relacionada con ofertas a las que los usuarios se suscriben, que es el verdadero modelo de negocio de la web, tan solo se muestra en la página de inicio del usuario. Si se quiere convencer a las empresas de que publicitarse en la aplicación es rentable, hay que mostrarles que su publicidad va a ser realmente visible por los usuarios.

127

BibliografĂa [1] http://es.wikipedia.es [2] http://en.wikipedia.org [3] boyd, d. m., & Ellison, N. B. (2007). Social network sites: Definition, history, and scholarship. Journal of Computer-Mediated Communication, 13(1), article 11. http://jcmc.indiana.edu/vol13/issue1/boyd.ellison.html [4] http://emktpoliticonews.com/Editorial/Francisco-Del-Olmo-Diaz-C/EditorialLa-teoria-de-los-seis-grados-de-separacion.html [5] http://www.alexa.com/topsites [6] http://trucosinternet.net/guia-seo-posicionamiento-web [7] http://www.un-negocio.com/adwords-de-google/adwords-y-adsense.html [8] http://www.mercado.com.ar/nota.php?id=365007 [9] http://paraisolinux.com/arquitectura-mvc [10] http://guides.rubyonrails.org/getting_started.html [11] http://galeon.com/elblogolico/RubyOnRails.pdf [12] http://rubygems.org [13] http://www.sqlite.org/whentouse.html [14] http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html [15] http://www.sandfighter.net/design/browsers-compatibility-with-css-standards

128

BibliografĂa [16] http://www.robertoherrero.net/49/programacion/css-valido-compatible-coninternet-explorer-y-firefox [17] http://www.maestrosdelweb.com/editorial/rorphp [18] http://www.kullin.net/2010/09/flickr-5-billion-photos [19] http://blog.ikhuerta.com/facebook-graph-api [20] http://statistics.allfacebook.com/applications/index/dau [21] http://mashable.com/2010/02/25/facebook-news-feed-patent [22] http://www.onlinephdprograms.com/the-business-behind-facebook [23] http://sites.google.com/site/392whitepaper/Home/FacebookWhitePaper.pdf [24] http://www.error500.net/pagos/comision-los-facebook-credits-tension-entrezynga-y-facebook [25] http://www.news24.com/SciTech/News/Facebook-closes-gift-shop-20100709 [26] http://www.eff.org/deeplinks/2010/04/facebook-timeline [27] http://www.maestrosdelweb.com/editorial/facebook-problemas-seguridadprivacidad [28] http://www.huffingtonpost.com/2010/03/31/facebook-email-addressle_n_520107.html [29] http://eu.techcrunch.com/2010/05/05/video-major-facebook-security-hole-letsyou-view-your-friends-live-chats [30] http://alexbacker.pbworks.com/What-make-Facebook-so-successful [31] http://www.tcanalysis.com/uploads/2011/02/ObservatorioRedesSociales2011.pdf [32] http://users.dsic.upv.es/~rnavarro/NewWeb/docs/RestVsWebServices.pdf [33] http://blog.malev.com.ar/2010/07/15/routes-en-rails-restful

129

BibliografĂa [34] http://www.squidoo.com/php-vs-rails [35] http://stackoverflow.com/questions/842144/comparing-rails-vs-php-to-a-nontechnical-audience [36] http://soledadpenades.com/2007/01/22/php-will-never-have-a-real-rails-likeframework [37] http://storecrowd.com/blog/top-50-ruby-on-rails-websites [38] http://blogs.sun.com/arungupta/entry/totd_6_difference_between_ruby [39] http://github.com/mislav/will_paginate [40] http://github.com/technoweenie/attachment_fu [41] http://synthesis.sbecker.net/pages/asset_packager [42] http://backgroundrb.rubyforge.org [43] http://github.com/technoweenie/restful-authentication [44] http://www.sqlite.org/about.html [45] http://www.paulgraham.com/start.html [46] http://www.slideshare.net/susolopez/como-finaciar-tu-proyecto [47] http://www.cotizalia.com/emprendedores/Jesus-Miguel-Gutierrez-BarquinSigojoven.com.html [48] http://blogs.alianzo.com/redessociales/2010/10/12/los-modelos-de-negocio-defacebook [49] http://emiliomarquez.com/2010/05/13/modelos-negocio-redes-sociales [50] http://www.sigojoven.com/publicidad/paquetes_especiales [51] http://www.desarrolloweb.com/articulos/2091.php [52] http://blog.craigambrose.com/articles/2006/09/22/redbox-release-2

130

BibliografĂa [53] http://blog.pluron.com/2009/05/ruby-19-performance.html [54] http://wordpressapi.com/2010/02/27/ruby-1-9-1-performance-improvement-63 [55] http://www.pabloburgueno.com/2009/03/clasificacion-de-redes-sociales/

131