Avanza Ciudadanía Digital Interfaz de acceso multidispositivo para facilitar la integración de las personas en riesgo de exclusión a las plataformas generadoras de redes sociales: descripción técnica y funcional

Abril 2012

INDICE 1.

Introducción .............................................................................................................4 1.1 Objetivo y alcance ............................................................................................................. 4 1.2 Definiciones, acrónimos y abreviaturas ............................................................................ 4

2.

Arquitectura de la solución .......................................................................................6 2.1 Accesibilidad ...................................................................................................................... 6

3.

Estructura general ....................................................................................................7 3.1 Menú de navegación ......................................................................................................... 7 3.2 Estructura de las páginas .................................................................................................. 9 1.1.1

Zona Privada .............................................................................................................. 9

1.1.2

Zona Pública ............................................................................................................ 10

1.1.3

Página de inicio........................................................................................................ 11

1.2 Flujo de pantallas ............................................................................................................ 12 4.

Módulos de la solución tecnológica ......................................................................... 13 4.1 Gestión de usuarios ......................................................................................................... 13 4.1.1

Vista general ............................................................................................................ 13

4.1.2

Crear usuario ........................................................................................................... 14

4.1.3

Editar usuario .......................................................................................................... 15

4.1.4

Roles de usuario ...................................................................................................... 16

4.2 Gestión de noticias .......................................................................................................... 17 4.2.1

Vista general ............................................................................................................ 17

4.2.2

Crear noticias........................................................................................................... 18

4.2.3

Editar noticias .......................................................................................................... 20

4.2.4

Categorías de noticias ............................................................................................. 22

4.3 Panel de FaceBook .......................................................................................................... 23 4.3.1

Autenticación y Autorización .................................................................................. 23

4.3.2

Listas mensajes ........................................................................................................ 25

4.3.3

Publicar mensaje ..................................................................................................... 27

4.3.4

Añadir mensaje........................................................................................................ 28

4.3.5

Listar fotos ............................................................................................................... 29

4.3.6

Publicar foto ............................................................................................................ 31

4.3.7

Añadir comentario a foto ........................................................................................ 31 2

4.4 Panel de Twitter .............................................................................................................. 32 4.4.1

Autenticación y Autorización .................................................................................. 33

4.4.2

Listar tweets ............................................................................................................ 33

4.4.3

Publicar tweets ........................................................................................................ 34

4.4.4

Responder tweets ................................................................................................... 36

4.4.5

Retweets.................................................................................................................. 37

4.4.6

Borrar Tweets .......................................................................................................... 37

4.5 Panel de LinkedIn ............................................................................................................ 38 4.5.1

Autenticación y Autorización .................................................................................. 38

4.5.2

Listar contactos ....................................................................................................... 39

4.5.3

Listar actualizaciones de los contactos ................................................................... 40

4.6 Panel de YouTube............................................................................................................ 41 4.6.1

Autenticación y Autorización .................................................................................. 41

4.6.2

Listar y añadir comentarios ..................................................................................... 42

4.6.3

Listar contactos ....................................................................................................... 42

4.6.4

Listar vídeos............................................................................................................. 43

4.6.5

Publicar vídeo .......................................................................................................... 44

4.7 Resumen de funcionalidades .......................................................................................... 46 5.

Interfaz Web Accesible: diseño y estructura ............................................................ 48 5.1 Interface principal ........................................................................................................... 48 5.2 Registro y autenticación de usuarios .............................................................................. 49 5.3 Mi panel “Facebook” ....................................................................................................... 52 5.4 Mi panel “Twitter”........................................................................................................... 53 5.5 Mi panel “YouTube” ........................................................................................................ 55 5.6 Mi panel “LinkedIn”......................................................................................................... 56

6.

Protocolo OAuth..................................................................................................... 58 6.1 Flujo del proceso ............................................................................................................. 59

3

1. Introducción El objetivo de este proyecto se basa en promover la participación de las personas con discapacidad en las redes sociales de Internet mediante el diseño de una única interfaz accesible y compatible con diferentes dispositivos (IPTV, móviles y ordenadores convencionales) que permita la interacción con las plataformas de redes sociales de uso más extendido. Esta interfaz facilitaría el acceso de los usuarios a las aplicaciones más populares (Facebook y Twitter, entre otras) gracias a la integración de distintas tecnologías de interacción (reconocimiento de voz, lectura de pantalla, etc.) y a la familiarización de los usuarios con el dispositivo de acceso (la televisión). La compatibilidad de la interfaz con un dispositivo presente en la mayoría de los hogares, la televisión, potenciaría la integración de las personas mayores en este entorno digital. Se trata de desarrollar una interfaz web, accesible desde diferentes dispositivos, basada en la filosofía de la Web 2.0, que sirva como interfaz de acceso a las principales aplicaciones de las redes sociales. El diseño de esta interfaz se basará en el estado de la técnica y en las necesidades manifestadas por los usuarios.

1.1 Objetivo y alcance El objetivo del presente documento es presentar la descripción técnica y análisis funcional del interfaz web accesible que cumpla los requisitos definidos para el proyecto, mediante una descripción detallada del sistema desde el punto de vista funcional. El proyecto constará de los siguientes módulos: 

Autenticación de usuarios en la aplicación: o Registro y Acceso de usuarios en la propia aplicación. o Registro y Acceso de usuarios con OpenID (proveedores google, yahoo, flickr, etc.).



Gestión de las Redes Sociales: o

Configuración.

o

Visualización de Contenidos.

o Publicación de Contenidos. 

Gestión de contactos: obtener los contactos de las distintas redes sociales.

1.2 Definiciones, acrónimos y abreviaturas 

IPTV: Televisión sobre el protocolo IP (Internet Protocol).



URL: Uniform Resource Locator. Localizador uniforme de recurso y se refiere a la dirección única que identifica a una página web en Internet.



OAuth: Open authentication estándar. Protocolo que proporciona una manera estándar de acceder a los datos protegidos de diferentes sitios web. 4



Retweet: Forma de publicar un tweet de alguno de los usuarios a los se sigue y que se considera especialmente interesante. Con el RT del tweet consigues que aquellos de tus seguidores (followers) que no sigan al usuario emisor del tweet conozcan el contenido del mismo, manteniendo la autoría del tweet original.



Followers: Seguidores en Twitter.



Following: Usuarios a los que se sigue en Twitter.



Timeline: Cronología de mensajes/artículos en Facebook y Twitter.

5

2. Arquitectura de la solución Se trata de desarrollar una interfaz web accesible visible desde: 

Ordenador convencional (PC).



Teléfonos móviles inteligentes (SmartPhones y Tablets).



Decodificador de IPTV (por ejemplo, televisores con acceso a Internet).

Como requisito común a todos los dispositivos, éstos deben disponer de conexión a internet y navegador web. La aplicación web está basada en arquitectura .NET, con arquitectura cliente-servidor. 

En la parte cliente, existirán una serie de páginas ASPX que servirán como frontal web al que el usuario accederá a través de su navegador.



En la parte servidor existirá un entorno basado en dos grupos de aplicaciones: 

Base de datos SQL Server 2005 donde se guardará toda la información relacionada con el proyecto.



Clases y elementos de .NET que implementen la lógica de la aplicación y la interconexión con la base de datos.

Los decodificadores IPTV, según modelo, disponen de un navegador web con funcionalidades limitadas (por ejemplo, no existencia de javascript para interactuar con el entorno). Para este tipo de dispositivos se desarrollará un interfaz de navegación sencillo y comprensible para el usuario. Sin embargo, todavía no hay ningún estándar definido para este mercado y muchos fabricantes proporcionan versiones de navegadores con funciones muy limitadas, en un contexto cerrado y de utilización restringida.

2.1 Accesibilidad Todas las páginas web de la aplicación serán accesibles a nivel AA según las pautas de accesibilidad WCAG 1.0 de la W.A.I. Los usuarios de dispositivos móviles en determinadas ocasiones, según su tipo de discapacidad, necesitarán el uso de productos de apoyo para su correcta visualización (Magnificadores de pantalla, Software de voz, etc.). El interfaz web accesible estará construido de forma tal que permitirá al usuario usar las personalizaciones que haya creado y definido en su dispositivo para acceder y navegar a través de los servicios de las redes sociales incorporadas en el interfaz web accesible.

6

3. Estructura general 3.1 Menú de navegación La aplicación contendrá parte pública y privada desde la cual cada usuario gestionará sus redes sociales. Las Redes Sociales a las que se podrá acceder desde esta aplicación serán: 

Facebook: Sitio web con redes sociales que conecta a gente con sus amigos o compañeros compartiendo información, enlaces, fotos.



Twitter: Aplicación web que permite a sus usuarios escribir pequeños textos (de hasta 140 caracteres) que pueden ser leídos por cualquiera que tenga acceso a su página.



LinkedIn: Denominado “Facebook de profesionales”. Basado en la información profesional de las personas.



YouTube: Sitio web para subir y compartir videos.

La parte pública contendrá un registro y blog para indicar impresiones, mejoras. Así como información básica y enlaces de acceso a cada una de las Redes Sociales. La parte pública contendrá los últimos mensajes de Facebook y Twitter de la Red Social que Fundación Once creará para difundir esta aplicación en cada uno de estas aplicaciones. Desde la parte privada cada usuario podrá gestionar las Redes Sociales en las que esté registrado. Por tanto, se tienen dos áreas de acceso: 

Pública: acceso usuario anónimo de internet.



Privada: acceso usuarios registrados en las distintas redes sociales.

Cada usuario dependiendo de su perfil tendrá diferentes opciones de navegación. Las funciones que podrá realizar el usuario anónimo (Área Pública) son: 

Ver información básica de la web



Ver los últimos mensajes de FaceBook y Twitter publicados por Fundación ONCE en estas aplicaciones para la divulgación y últimas noticias sobre este proyecto.



Ver los últimos mensajes publicados en el blog de la aplicación.

Las funciones que podrá realizar el usuario registrado (Área Privada) son: 

Gestión Redes Sociales: Configuración. Autenticación y Autorización en las distintas Redes Sociales a las que se quiere acceder: 1. Facebook. 2. Twitter. 3. LinkedIn. 4. YouTube. 7



Visualización de Contenidos: 1. Facebook: a. Ver mensajes publicados en el muro de mis amigos de los 3 últimos días. b. Ver mensajes publicados en el muro del propio usuario. c. Fotos. d. Eventos. e. Mi perfil. 2. Twitter: a. Tweets de las personas a las que el usuario sigue. b. Tweets del propio usuario. c. Menciones. 3. LinkedIn: a. Ver las actualizaciones. 4. YouTube: a. Ver vídeos. b. Buscar vídeos.



Publicación de Contenidos: 1. Facebook: a. Publicar mensajes en el muro del usuario. b. Publicar mensajes en el muro de amigos. c. Publicar fotos en la galería del usuario. d. Publicar comentarios. e. Publicar cambios en el perfil. 2. Twitter: a. Publicar tweets. b. Retweet. c. Responder. 3. LinkedIn: a. Enviar mensajes a los contactos. 4. YouTube: a. Publicar video en la galería del usuario.



Gestión de contactos: Obtener los contactos de las distintas redes sociales a través del interfaz web. 8

3.2 Estructura de las páginas Las páginas del interfaz web accesible utilizan una página maestra que incluye todas las marcas y elementos comunes a todas las páginas del sitio web. La página maestra define un interfaz común tales como la cabecera de página o la barra de navegación, en una ubicación común denominada "master page", para ser compartidos por varias páginas del sitio. Esto mejora el mantenimiento de nuestro sitio y evita la duplicación innecesaria de código para estructuras o comportamientos del sitio que son compartidos. Cada área de navegación (pública y privada) tendrá su página maestra.

1.1.1 Zona Privada Los elementos comunes o página maestra del interfaz web, una vez que el usuario acceda a su zona privada, se muestran a continuación:

CABECERA PÁGINA

MENÚ IZQUIERDA

CABECERA CONTENIDO CONTENIDO

PIE



Cabecera Página. Con los siguientes elementos: o

Logo de marca. Título de la web.

o

Usuario conectado, el usuario actualmente validado en el sistema.

o

Desconectar, para salir de la administración.



Menú Izquierda. Lista de funcionalidades a las que el usuario previamente autenticado tiene acceso.



Cabecera Contenido: Contiene el rastro de migas y título de la página.



Contenido. Con los siguientes elementos: o

Listado de resultados, Detalle o formulario de entrada de datos.

o

En función de la red social seleccionada, incluye mensajes o contenidos de ésta.

9



Pie. Con los siguientes elementos: o

Enlaces de contacto.

o

Enlaces de servicios generales, certificaciones de accesibilidad web.

1.1.2 Zona Pública Los elementos comunes o página maestra de la parte pública del interfaz web accesible (esto es, cuando el usuario no está autenticado) se muestran a continuación:

CABECERA PÁGINA

CABECERA (MENÚ) CONTENIDO Últimos mensajes de FaceBook Fundación ONCE

Últimos mensaje de Twitter de Fundación ONCE

Noticias

Acceso redes sociales

PIE



Cabecera Página. Con los siguientes elementos: o

Logo de marca. Título de la web. Enlace a la página de inicio.



Cabecera. Contiene el menú con las opciones de navegación del usuario.



Contenido: Con los siguientes elementos:



o

Título de la página.

o

Dependiendo de la red social seleccionada: información, detalle noticia, etc.

o

Acceso a las redes sociales.

Pie: Con los siguientes elementos: o

Enlace al formulario de contacto.

o

Enlace a servicios generales.

o

Certificados de accesibilidad web.

10

1.1.3 Página de inicio La página de inicio contendrá los elementos de la página maestra mostrada en pantalla de la zona pública, incluyendo además contenidos de presentación, introducción, y listado de participantes:

CABECERA PÁGINA

CABECERA (MENÚ) CONTENIDO Presentación

Últimas noticias en FaceBook, Twitter.

Noticias destacadas

Acceso redes sociales

PIE

11

1.2 Flujo de pantallas A continuación se muestra un resumen gráfico de las pantallas de navegación en el proceso de transferencias parciales:

Blogs

PARTE PÚBLICA

ZONA PRIVADA

Enlaces a Información básica Últimos mensajes del blog Facebook Fundación ONCE

Entrar en FaceBook

Últimos mensajes FaceBook Fundación ONCE Entrar en Twitter

Últimos mensajes Twitter Fundación ONCE Twitter Fundación ONCE

Conectar con Redes Sociales

Entrar en LinkedIn

Entrar en YouTube Información básica de interés

FACEBOOK

TWITTER

Mi muro

Mis tweets Tweets following Retweet Menciones Responder a un tweet

Ver últimos mensajes Publicar mensaje Añadir comentario Muro de amigos Amigo1 Ver últimos mensajes Añadir comentario

LINKEDIN Amigo2 …………….. …………….. AmigoX Fotos Ver mis fotos Ver fotos de amigos Publicar fotos Eventos Ver eventos Publicar fotos

Mi perfil Invitaciones Mensajes Contactos Empleo

YOUTUBE Vídeos más vistos Mis vídeos Búsqueda de vídeos

12

4. Módulos de la solución tecnológica 4.1 Gestión de usuarios Al interfaz web accesible acceden dos tipos de usuarios: 

Administradores: Gestionan la información de toda la aplicación (noticias, información, blogs).



Usuarios de las distintas redes sociales

A través del navegador, los usuarios podrán realizar distintas tareas en función de su perfil. A continuación se detallan cada una de las opciones a disposición del usuario. La gestión de usuarios se hará a través de la clase MemberShip de ASP.NET, que proporciona un entorno robusto y consistente para la gestión de los datos de usuarios.

4.1.1 Vista general Muestra un listado con los usuarios existentes, las opciones de edición y añadir nuevo usuario: CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Titulo página LISTADO RESULTADOS Crear nuevo usuario

Editar y Borrar elementos

PIE

El listado se muestra en una tabla. Cada fila de tabla se corresponde con un elemento del listado y cada elemento del listado está formado por seis columnas: Nombre de usuario, Nombre, Apellidos, Email, Editar y Borrar. El icono de editar nos muestra el formulario de edición de usuario y el icono de borrar nos pedirá confirmación de borrado y eliminará al usuario. Al pulsar sobre "Crear nuevo usuario", mostrará el formulario de alta de usuarios. 13

4.1.2 Crear usuario Se muestra un formulario con todos los datos necesarios para crear un usuario nuevo.

MENÚ IZQUIERDA

Zona Privada >Usuarios>Listado>Crear Usuario

Gestión Usuarios – Crear Usuario

Login Contraseña Repetir contraseña Email Nombre Apellidos Fecha de nacimiento (dd/mm/yyyy) Comentarios Usuario habilitado

Aceptar

Al pulsar sobre aceptar, si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, el usuario no se creará.

Campos de datos Campo

Obligatorio

Tipo de dato

Login

Sí

Texto

Contraseña

Sí

Texto

Repetir contraseña

Sí

Texto

Email

Sí

Texto

Nombre

Sí

Texto

14

Apellidos

Sí

Texto

Fecha de nacimiento

No

Fecha

Comentarios

No

Texto

Habilitado

No

Bool

4.1.3 Editar usuario Muestra un formulario con todos los datos necesarios para editar un usuario existente.

MENÚ IZQUIERDA

Zona Privada >Usuarios>Listado>Editar Usuario

Gestión Usuarios – Editar Usuario

Login

xxxxxx

Contraseña

xxxxxx

Repetir contraseña

xxxxxx

Email

[email protected]

Nombre

xxxxxx

Apellidos

xxxxxx

Fecha de nacimiento (dd/mm/yyyy)

10/08/1973

Comentarios

xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx

Usuario habilitado Aceptar

Acciones

Roles del usuario

Cambiar Contraseña

Resetear Contraseña

Del mismo modo que en el alta de usuarios, si se comenten errores, se mostrarán por pantalla dentro de un cuadro de aviso. 15

Junto al formulario de edición, que edita los campos básicos, se adjunta una barra de acciones que nos permitirá gestionar los roles asociados al usuario, cambiar su contraseña y restaurar la clave, que genera una clave nueva y la muestra por pantalla. Al pulsar sobre aceptar, si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, el usuario no se modificará.

Campos de datos Campo

Obligatorio

Tipo de dato

Email

Sí

Texto

Nombre

Sí

Texto

Apellidos

Sí

Texto

Fecha de nacimiento

No

Fecha

Comentarios

No

Texto

Habilitado

No

Bool

4.1.4 Roles de usuario Dentro de la gestión de usuarios podemos gestionar los roles de la aplicación. Se tendrán dos roles específicos: “Admin” (administrador de la aplicación) y “Editores”. Cada uno de ellos tiene una serie de funcionalidades específicas dentro de la aplicación.

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Titulo página LISTADO RESULTADOS Crear nuevo rol

Borrar elementos

PIE

El rol “Admin” se encargará de la gestión de usuarios. La gestión de noticias y administración de blogs hará uso de los roles “Admin” y “Editores”.

16

Se pueden crear roles y borrar roles. Las opciones de crear y editar muestran un formulario. Borrar da un aviso antes de seguir con el proceso de eliminado. Zona Privada >Usuarios>Listado>Crear Rol

Gestión Roles – Crear Rol Nombre:

Aceptar

Campos de datos Campo

Obligatorio

Tipo de dato

Nombre

Sí

Texto

4.2 Gestión de noticias 4.2.1 Vista general Muestra un listado con las noticias existentes, las opciones de edición y añadir nueva noticia. CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS Crear nueva noticia

Editar y Borrar elementos

PIE

17

El listado mostrará el titular de la noticia, categoría a la que pertenece y fecha, más botones “editar” y “borrar”. Al pulsar sobre crear nueva noticia se mostrará el formulario de alta de noticias. Al pulsar sobre el icono de editar de un registro de mostrará el formulario de edición de noticias. Al pulsar sobre borrar se mostrará un mensaje de aviso y se borrará la noticia seleccionada. La gestión de comentarios por noticia da acceso a un listado donde se muestran todos los comentarios que ha tenido la noticia. Desde aquí se podrán borrar los comentarios: CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS Borrar elementos

PIE

Cada elemento del listado de comentarios está formado por el texto del comentario, el nombre del autor, por defecto los autores son anónimos salvo que estén validados en el sistema y un icono de borrar que eliminará el comentario.

4.2.2 Crear noticias Muestra un formulario con todos los datos necesarios para crear una noticia nueva.

18

MENÚ IZQUIERDA

Zona Privada >Noticias>Crear Noticia

Gestión Noticias – Crear Noticia

Categoría Titular Entradilla Fuente Cuerpo

Fecha (dd/mm/aaaa) Imagen

Examinar…. Texto alternativo

Adjunto

Examinar….

Texto alternativo

Aceptar

El cuerpo de la noticia puede contener HTML, para ello se facilita un editor enriquecido de tipo WYSIWYG que permite la edición avanzada de textos. Al pulsar sobre aceptar, si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, la noticia no se creará.

19

Campos de datos Campo

Obligatorio

Tipo de dato

Idioma

Sí

Selección

Categoría

Sí

Selección

Titular

Sí

Texto

Entradilla

No

Texto

Fuente

No

Texto

Cuerpo

Sí

Texto/HTML

Fecha

Sí

Fecha

Imagen

No

Binario

Adjunto

No

Binario

4.2.3 Editar noticias Muestra un formulario con todos los datos necesarios para editar una noticia existente.

20

MENÚ IZQUIERDA

Zona Privada >Noticias>Editar Noticia

Gestión Noticias – Editar Noticia

Categoría

Windows 7

Titular

Titulo noticia

Entradilla

Entradilla noticia

Fuente

Fuente noticia

Cuerpo

Cuerpo noticia

Fecha (dd/mm/aaaa)

30/07/2010

Imagen

Examinar…. Texto alternativo

Ver Imagen

Borrar Imagen

Examinar….

Adjunto Texto alternativo

Ver Adjunto

Borrar Adjunto

Aceptar

Si la noticia a editar cuenta ya con una imagen se mostrará un enlace que da acceso al visualizado de la imagen actual y un campo de tipo "Check" que permite borrarla. Al incluir una imagen nueva, la actual, de existir, es eliminada y sustituida por la nueva. Si la noticia cuenta con un fichero adjunto, se mostrará un enlace que da acceso a la descarga del fichero y un campo de tipo "Check" que permite borrar el adjunto. Al incluir un adjunto nuevo, el actual, de existir, es eliminado y sustituido por el nuevo.

21

Al pulsar sobre aceptar, si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, la noticia no se modificará. Campos de datos Campo

Obligatorio

Tipo de dato

Categoría

Sí

Selección

Titular

Sí

Texto

Entradilla

No

Texto

Fuente

No

Texto

Cuerpo

Sí

Texto/HTML

Fecha

Sí

Fecha

Imagen

No

Binario

Quitar imagen

No

Bool

Adjunto

No

Binario

Quitar adjunto

No

Binario

4.2.4 Categorías de noticias Dentro de la gestión de noticias es posible gestionar, además, las categorías de noticias. No existe un número máximo de categorías, pero si debe existir al menos una categoría por idioma, de lo contrario no es posible crear noticias de ningún tipo.

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS Crear nueva categoría

Editar y Borrar elementos

PIE

22

Si seleccionamos la opción "Categorías" dentro de noticias se nos mostrará un listado de las categorías existentes. Este listado está formado por el nombre de categoría, editar y el icono de borrado. Si pulsamos sobre "Crear nueva categoría de noticias" se nos mostrará un formulario para crear nuevas categorías: MENÚ IZQUIERDA

Zona Privada >Noticias>Categorías>Crear Categoría

Gestión Noticias – Categorías - Crear Categoría

Nombre

Aceptar

Al pulsar sobre aceptar, si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, la categoría no se creará. Si pulsamos sobre el icono de borrado, se mostrará un aviso y se borrará la categoría. Hay que tener en cuenta que una categoría solo se puede borrar si esta no tiene elementos asociados. Por lo tanto, aquellas categorías que tengan noticias asociadas, no pueden ser eliminadas si antes no se borran o modifican las noticias asociadas.

Campos de datos Campo

Obligatorio

Tipo de dato

Nombre

Sí

Texto

Idioma

Sí

Selección

4.3 Panel de FaceBook El usuario previamente autenticado y autorizado podrá gestionar su red social en FaceBook a través de la aplicación.

4.3.1 Autenticación y Autorización El paso previo a la autenticación es la creación de una “Aplicación de Facebook” (apps FaceBook) (http://www.FaceBook.com/developers). El registro de esta aplicación en FaceBook nos dará una clave de la API con la cual podremos realizar las peticiones al servidor desde 23

nuestra aplicación web. Para tener acceso a toda la información del usuario en FaceBook, éste debe autorizarlo. Se realiza la petición de autorización a FaceBook. Se muestra el diálogo OAuth (OAuth dialog) para permitir el acceso o no. Cuando se invoca este cuadro de diálogo, se debe pasar el identificador de aplicación que se genera cuando se crea una aplicación en la sección de desarrolladores de FaceBook (FaceBook developers) (el parámetro client_id) y la URL del navegador a la que se redirige una vez la autorización se ha completado (el parámetro redirect_uri). Este parámetro se especifica en la aplicación creada en la sección de desarrolladores de FaceBook. https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_t ype=token Parámetros: 

client_id: identificador de aplicación



redirect_uri: URL a la que se redirecciona una vez autenticado.



response_type: Se indica el valor “token”. En la URL de respuesta se indica el token de acceso necesario para hacer uso de la API de FaceBook.

Si el usuario ya está logado, se valida la cookie de conexión que esté almacenada en el navegador del usuario. Si el usuario no se ha logado previamente, se le pedirá que introduzca sus credenciales (OAuth Dialog):

24

Si el usuario pulsa el botón “Don´t Allow”, la aplicación no está autorizada. El OAuth diálogo redirige (a través de HTTP 302) a la URL del navegador del usuario indicada en el parámetro redirect_uri de la aplicación de FaceBook con la información de error siguiente: http://YOUR_URL?error_reason=user_denied & error = access_denied & error_description = The+user+denied+your+request

Si el usuario pulsa “Allow”, la aplicación está autorizada. El OAuth diálogo redirige (a través de HTTP 302) a la URL del navegador del usuario indicada en el parámetro redirect_uri de la aplicación de FaceBook con un token de respuesta: http://YOUR_URL#access_token=token&expires_in=expire Parámetros: 

access_token: Token de acceso OAuth 2.0. Válido para acceder a la API de FaceBook.



expires_in: Tiempo en segundos en el que expira el token de acceso.

4.3.2 Listas mensajes Se tendrá la opción de listar los mensajes publicados en los 3 últimos días en el muro del usuario, así como los mensajes publicados en los 3 últimos días en el muro de los amigos añadidos a nuestros contactos. En el menú izquierda de navegación se tendrán las opciones: FACEBOOK Mi muro Ver últimos mensajes Publicar mensaje Añadir comentario

Listar los últimos mensajes

Muro de amigos Amigo1 Ver últimos mensajes Añadir comentario Amigo2 …………….. …………….. AmigoX Fotos Ver mis fotos Ver fotos de amigos Publicar fotos Eventos Ver eventos Publicar fotos

25

Mostrará un listado paginado de los mensajes existentes, las opciones de listar y añadir comentarios, así como publicar nuevo mensaje en el muro (en el propio muro del usuario o en el muro de alguno de sus amigos):

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS Añadir comentario Publicar en el muro Listar comentarios

PIE

El listado mostrará el nombre y apellidos del propietario del mensaje, descripción del mensaje, fecha (día y hora), nº de comentarios realizados al mensaje, publicar nuevo mensaje en el muro del propietario. El nombre y propietario será un enlace a la información del perfil del usuario de FaceBook. Abrirá nueva ventana indicando los datos del perfil públicos para el usuario logado. Al pulsar sobre añadir comentario se mostrará el formulario de alta de comentarios. Al pulsar sobre publicar nuevo mensaje de mostrará el formulario de edición de mensajes. El número de comentarios será un enlace al listado de comentarios asociados al mensaje. Cada elemento del listado de comentarios está formado por el texto del comentario, el nombre y apellidos del autor (enlace al perfil de usuario de FaceBook) y la fecha y hora.

26

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS

PIE

4.3.3 Publicar mensaje Muestra un formulario con todos los datos necesarios para publicar un mensaje en el muro de FaceBook. El formulario contiene: 

Muro en el que se va a publicar el mensaje.



Mensaje a añadir (área de texto).

Zona Privada >Facebook>Mi muro>Publicar mensaje

MENÚ IZQUIERDA Facebook – Publicar mensaje

-Muro en el que se va a publicar el mensajeMensaje:

Publicar

27

Al pulsar sobre publicar, utilizando la API de FaceBook, se publicará el mensaje en el muro correspondiente. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se soluciones todos los errores, el mensaje no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Mensaje publicado”.

Campos de datos

Campo

Obligatorio

Tipo de dato

Mensaje

Sí

Texto

4.3.4 Añadir mensaje Muestra un formulario con todos los datos necesarios para publicar un comentario a un mensaje. El formulario contiene: 

Propietario del muro.



Mensaje a comentar + fecha y hora.



Comentario a añadir (área de texto).

MENÚ IZQUIERDA

Zona Privada >Facebook>Publicar comentario mensaje

Facebook – Publicar comentario mensaje

-Propietario del mensaje que se va a comentar-Mensaje a comentar- Fecha y horaComentario:

Publicar

Al pulsar sobre publicar, utilizando la API de FaceBook, se publicará el comentario en el muro correspondiente. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se soluciones todos los errores, el comentario no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Comentario publicado”.

28

Campos de datos

Campo

Obligatorio

Tipo de dato

Comentario

Sí

Texto

4.3.5 Listar fotos Tendrá la opción de listar las fotos publicadas en los 3 últimos días en el FaceBook del usuario, así como las fotos publicadas en los 3 últimos días en el FaceBook de los amigos añadidos a nuestros contactos. En el menú izquierda de navegación se tendrán las opciones: FACEBOOK Mi muro Ver últimos mensajes Publicar mensaje Añadir comentario Muro de amigos Amigo1 Ver últimos mensajes Añadir comentario

Listar las últimas fotos

Amigo2 …………….. …………….. AmigoX Fotos Ver mis fotos Ver fotos de amigos Publicar fotos Eventos Ver eventos Publicar fotos

Se mostrará un listado paginado de las últimas fotos publicadas (en el muro o álbum de la galería de fotos), las opciones de listar y añadir comentarios, así como publicar nueva foto en el muro o en un álbum de fotos de la galería del usuario logado. También se podrá publicar fotos en el muro de los amigos de contacto:

29

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS

Añadir comentario Publicar foto en el muro/álbum Listar comentarios

PIE

El listado mostrará el nombre y apellidos del propietario de la foto, icono de la foto, fecha y hora, galería a la que pertenece, nº de comentarios a la foto, enlace a añadir nuevo comentario. Si hay una actualización de varias fotos en una determinada galería, se muestra solo un icono y se indican el número de fotos actualizadas en el álbum. El nombre de la galería enlaza al álbum de fotos de FaceBook (abre en nueva ventana). El nombre del propietario, abre en nueva ventana los datos del perfil de usuario de FaceBook. Al pulsar sobre añadir comentario se mostrará el formulario de alta de comentarios. El número de comentarios será un enlace al listado de comentarios asociados a la foto. Cada elemento del listado de comentarios está formado por el texto del comentario, el nombre y apellidos del autor (enlace al perfil de usuario de FaceBook) y la fecha y hora. CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS

PIE 30

4.3.6 Publicar foto Muestra un formulario con todos los datos necesarios para publicar una foto en el muro o álbum de FaceBook. El formulario contiene: 

Nombre y apellidos del propietario.



Lista desplegable con las opciones: Muro, listado de álbumes de fotos (si no es el usuario logado solo podrá publicar fotos en su muro).



Descripción de la foto a añadir (área de texto).

MENÚ IZQUIERDA

Zona Privada >Facebook>Publicar foto

Facebook – Publicar mensaje -Nombre y apellidos del usuario Publicar en: Descripción foto:

Publicar

Al pulsar sobre publicar, utilizando la API de FaceBook, se publicará la foto en el muro o álbum correspondiente. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se soluciones todos los errores, la foto no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Foto publicada”.

Campos de datos Campo

Obligatorio

Tipo de dato

Publicar en

Sí

Selección

Descripción foto

No

Texto

4.3.7 Añadir comentario a foto Muestra un formulario con todos los datos necesarios para publicar un comentario a una foto. El formulario contiene: 31



Propietario de la foto.



Descripción de la foto + fecha y hora.



Comentario a añadir (área de texto).

MENÚ IZQUIERDA

Zona Privada >Facebook>Publicar comentario foto

Facebook – Publicar comentario mensaje

-Propietario de la foto que se va a comentar-Descripción foto a comentar- Fecha y horaComentario:

Publicar

Al pulsar sobre publicar, utilizando la API de FaceBook, se publicará el comentario en el muro correspondiente. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, el comentario no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Comentario publicado”.

Campos de datos

Campo

Obligatorio

Tipo de dato

Comentario

Sí

Texto

4.4 Panel de Twitter El usuario previamente autenticado y autorizado podrá gestionar su red social en Twitter a través de la aplicación.

32

4.4.1 Autenticación y Autorización El paso previo a la autenticación es la creación de una “Aplicación de Twitter” (Twitter app) (https://dev.Twitter.com/apps/new). Una vez registrada, Twitter nos dará una clave de API y nos indicará las URLs que tendremos que utilizar en el proceso de autenticación OAuth: 

URL para solicitar un Request Token: http://api.Twitter.com/oauth/request_token



URL para solicitar autorización del Usuario: https://api.Twitter.com/oauth/authorize



URL para cambiar el Request Token https://api.Twitter.com/oauth/access_token

por

un

Access

Token:

Para tener acceso a toda la información del usuario en Twitter, este debe autorizarlo.

Si el usuario autoriza el acceso (Pulsa “Authorize App”) se devuelve en la url a la que se redirige una clave de acceso para acceder a los servicios de Twitter.

4.4.2 Listar tweets Tendrá la opción de listar los últimos tweets publicados en la última semana en el Twitter del usuario, así como los Twitter publicados en los 3 últimos días en los Twitter de las personas a las que el usuario sigue. En el menú izquierda de navegación se tendrán las opciones: TWITTER Mis tweets Following (tweets) Menciones Publicar tweet

Listar tweets

33

Se mostrará un listado paginado de los tweets publicados, así como la opción de publicar un nuevo mensaje en el Twitter.

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO RESULTADOS

-Publicar tweet -Retweet -Responder -Borrar

PIE

El listado mostrará el nombre de usuario del propietario del mensaje, descripción del mensaje, fecha (día y hora), la opción de responder, retweet (si el mensaje pertenece a otro usuariofollowers-), borrar (si el mensaje pertenece al usuario. El nombre de usuario será un enlace a su Twitter. Al pulsar sobre “responder” se mostrará el formulario de respuestas. Al pulsar sobre “retweet” se mostrará un mensaje de confirmación. Si el usuario pulsa “Si” se publicará el mensaje en el Twitter del usuario manteniendo la autoría (retwittear). Si el usuario pulsa “No” se volverá a la pantalla de listado. Al pulsar borrar se mostrará un mensaje de confirmación. Si el usuario pulsa “Si” se borrará el mensaje de su Twitter. Si pulsa “No” se volverá a la pantalla de listado.

4.4.3 Publicar tweets Muestra un formulario con todos los datos necesarios para publicar un mensaje en el Twitter del usuario. El formulario contiene: 

Usuario del Twitter en el que se va a publicar el mensaje



Mensaje a añadir (área de texto)

34

MENÚ IZQUIERDA

Zona Privada >Twitter>Mi Twitter>Publicar tweet

Twitter – Publicar tweet

-Usuario de TwitterMensaje:

Imagen:

Examinar…

Publicar

Al pulsar sobre publicar, utilizando la API de Twitter, se publicará el mensaje en el Twitter del usuario. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, el mensaje no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Mensaje publicado”. Solo se pueden publicar mensajes de un tamaño máximo de 140 caracteres. El mensaje puede contener una imagen y enlaces. La imagen no puede tener un tamaño superior a 3 Megas. La url de la imagen ocupa un tamaño de caracteres variable en los 140 máximos que permite el mensaje.

Campos de datos

Campo

Obligatorio

Tipo de dato

Mensaje

Sí

Texto

Imagen

No

Tipo fichero

35

4.4.4 Responder tweets Muestra un formulario con todos los datos necesarios para responder a un mensaje en el Twitter del usuario. El formulario contiene: 

Usuario del Twitter en el que se va a publicar el mensaje.



Mensaje a añadir (área de texto): Por defecto se muestra el texto: @nombreusuario, para mencionar al que respondemos. Este texto puede borrarse del área de texto.

MENÚ IZQUIERDA

Zona Privada >Twitter>Mi Twitter>Responder tweet

Twitter – Responder tweet

-Usuario de TwitterMensaje:

Imagen:

@nombre_usuario

Examinar…

Publicar

Al pulsar sobre publicar, utilizando la API de Twitter, se publicará el mensaje en el Twitter del usuario. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, el mensaje no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Mensaje publicado”. Solo se pueden publicar mensajes de un tamaño máximo de 140 caracteres. El mensaje puede contener una imagen y enlaces. La imagen no puede tener un tamaño superior a 3 Megas. La url de la imagen ocupa un tamaño de caracteres variable en los 140 máximos que permite el mensaje.

36

Campos de datos

Campo

Obligatorio

Tipo de dato

Mensaje

Sí

Texto

Imagen

No

Tipo fichero

4.4.5 Retweets Los mensajes de otros usuarios pueden ser ‘retwitteados’ en el Twitter del propio usuario, es decir se pueden publicar los tweets de otros usuarios, para que los seguidores del usuario logado conozcan la noticia. Al pulsar sobre el botón “Retweet” del listado se mostrará un mensaje de confirmación de la operación. Si el usuario pulsa “Si” se rewitteará el mensaje. Si pulsa “No” se volverá a la página de listado. Solo se pueden ‘retwittear’ los mensajes de otros usuarios. No los propios.

LISTADO DE TWEETS Tweet1 Tweet2 RT Tweet3

Eliminar

RT

Eliminar

RT

Eliminar

¿Desea retwittear el mensaje seleccionado?

Si

No

Mensaje publicado

4.4.6 Borrar Tweets Un usuario puede borrar sus mensajes. Al pulsar el botón “Borrar” se mostrará una ventana de confirmación. Si se pulsa el botón “Si”, se elimina el mensaje de Twitter. Si pulsa “No” se vuelve al listado de tweets. Solo pueden eliminarse los propios tweets. No, los pertenecientes a otros usuarios.

37

LISTADO DE TWEETS Tweet1 Tweet2 RT Tweet3

Eliminar

RT

Eliminar

RT

Eliminar

¿Desea eliminar el mensaje seleccionado?

Si

No

Mensaje eliminado

4.5 Panel de LinkedIn El usuario previamente autenticado podrá gestionar su red social en LinkedIn a través del interfaz web accesible.

4.5.1 Autenticación y Autorización El paso previo a la autenticación es la creación de una “Aplicación de Linkedin” (linkedin app) (https://www.linkedin.com/secure/developer). Una vez registrada, LinkedIn nos dará una clave de API (Consumer key y consumer secret) con la cual podremos realizar las peticiones al servidor desde nuestra aplicación web. Para tener acceso a toda la información del usuario en LinkedIn, este debe autorizarlo. Se realiza la petición de autorización a LinkedIn. Si todo es correcto, el servicio (Service Provider-LinkedIn) devuelve un “outh_token” que se le pasa como parámetro en la URL de la pantalla de autorización (OAuth dialog) https://www.linkedin.com/uas/oauth/authorize?oauth_token=56cc821a-b710-4f70-abd8-975f225a3f01 Parámetros: 

oauth_token: Token de autorización devuelto por LinkedIn

Si el usuario ya está logado, se valida la cookie de conexión que esté almacenada en el navegador del usuario. Si el usuario no se ha logado previamente, se le pedirá que introduzca sus credenciales o se registre en el servicio:

38

Usuario no logado

Usuario logado

Si el usuario pulsa el botón “Cancelar” o “Anular permiso”, su aplicación no está autorizada. El OAuth diálogo redirige a la URL del navegador del usuario indicada en el parámetro de la aplicación creada en LinkedIn indicando que el usuario no permite el acceso. Si el usuario pulsa “Permitir” o “Continuar”, la aplicación está autorizada. El OAuth diálogo redirige a la URL del navegador del usuario indicada en la configuración de la aplicación de LinkedIn con un token de respuesta o token de acceso. Válido para hacer, desde nuestra aplicación. peticiones a LinkedIn y acceder a la información del usuario logado.

4.5.2 Listar contactos Tendrá la opción de listar los contactos del usuario dentro de LinkedIn y poder ver sus perfiles y actualizaciones. En el menú izquierda de navegación se tendrán las opciones: LinkedIn Listar contactos Ver actualizaciones Ver ofertas

Listar contactos

Se mostrará un listado paginado de los contactos, así como la opción de acceder a sus perfiles y actualizaciones.

39

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO CONTACTOS

-Ver perfil -Ver actualizaciones

PIE

El listado mostrará el nombre del contacto, la opción de ver el perfil y de ver sus actualizaciones.

4.5.3 Listar actualizaciones de los contactos Tendrá la opción de listar las actualizaciones de los contactos del usuario dentro de LinkedIn y ver sus contenidos respectivos.

MENÚ IZQUIERDA

Zona Privada >LinkedIn>Mi LinkedIn>Listar actualizaciones

LinkedIn – Actualizaciones de contactos

-Usuario de LinkedInActualización:

Imagen:

Examinar…

Publicar 40

Al pulsar sobre publicar, utilizando la API de LinkIn, se publicará la actualización. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se solucionen todos los errores, el mensaje no se publicará. Si todo el proceso es correcto, se informa al usuario.

4.6 Panel de YouTube El usuario previamente autenticado podrá gestionar su red social en YouTube a través del interfaz web accesible.

4.6.1 Autenticación y Autorización El paso previo a la autenticación es la creación de una “Aplicación de YouTube” (apps YouTube). El registro de esta aplicación en YouTube nos dará una clave de la API con la cual podremos realizar las peticiones al servidor desde nuestra aplicación web. Para tener acceso a toda la información del usuario en YouTube, éste debe autorizarlo. Se realiza la petición de autorización a YouTube. Se muestra el diálogo OAuth (OAuth dialog) para permitir el acceso o no. Cuando se invoca este cuadro de diálogo, se debe pasar el identificador de aplicación que se genera cuando se crea una aplicación en la sección de desarrolladores de YouTube (YouTube developers) (el parámetro client_id) y la URL del navegador a la que se redirige una vez la autorización se ha completado (el parámetro redirect_uri). Este parámetro se especifica en la aplicación creada en la sección de desarrolladores de YouTube. Parámetros: 

client_id: identificador de aplicación



redirect_uri: URL a la que se redirecciona una vez autenticado.



response_type: Se indica el valor “token”. En la URL de respuesta se indica el token de acceso necesario para hacer uso de la API de YouTube.

Si el usuario ya está logado, se valida la cookie de conexión que esté almacenada en el navegador del usuario. Si el usuario no se ha logado previamente, se le pedirá que introduzca sus credenciales (OAuth Dialog). Si el usuario pulsa el botón “No permitir”, la aplicación no está autorizada. El OAuth diálogo redirige (a través de HTTP 302) a la URL del navegador del usuario indicada en el parámetro redirect_uri de la aplicación de YouTube con la información de error siguiente: http://YOUR_URL?error_reason=user_denied & error = access_denied & error_description = The+user+denied+your+request

Si el usuario pulsa “Permitir”, la aplicación está autorizada. El OAuth diálogo redirige (a través de HTTP 302) a la URL del navegador del usuario indicada en el parámetro redirect_uri de la aplicación de YouTube con un token de respuesta:

41

http://YOUR_URL#access_token=token&expires_in=expire Parámetros: 

access_token: Token de acceso OAuth 2.0. Válido para acceder a la API de YouTube.



expires_in: Tiempo en segundos en el que expira el token de acceso.

4.6.2 Listar y añadir comentarios El listado mostrará los comentarios del usuario, con enlaces al perfil a añadir nuevo comentario. Al pulsar sobre añadir comentario se mostrará el formulario de alta de comentarios. El número de comentarios será un enlace al listado de comentarios asociados a cada mensaje. Cada elemento del listado de comentarios está formado por el texto del comentario, el nombre y apellidos del autor (enlace al perfil de usuario de YouTube) y la fecha y hora. CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página MENSAJE LISTADO COMENTARIOS

PIE

4.6.3 Listar contactos Tendrá la opción de listar los contactos del usuario dentro de YouTube y poder ver sus perfiles y vídeos publicados. Se mostrará un listado paginado de los contactos, así como la opción de acceder a sus perfiles y actualizaciones.

42

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO CONTACTOS

-Ver perfil -Ver videos publicados.

PIE

El listado mostrará el nombre del contacto, la opción de ver el perfil y sus vídeos publicados.

4.6.4 Listar vídeos Tendrá la opción de listar los vídeos publicados en los últimos días en la cuenta YouTube del usuario, así como los vídeos publicados en la cuenta YouTube de los amigos añadidos a nuestros contactos. Mostrará un listado paginado de los últimos vídeos publicados (en el perfil o álbum de la galería de vídeos), las opciones de listar y añadir comentarios, así como publicar nuevos vídeos en la galería del usuario logado:

CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO VIDEOS

Añadir comentario Publicar vídeo Listar comentarios

PIE

43

El listado mostrará el nombre y apellidos del propietario del vídeo, icono del vídeo, fecha y hora, galería a la que pertenece, nº de comentarios, enlace a añadir nuevo comentario. Si hay una actualización de varios vídeos en una determinada galería, se muestra solo un icono y se indican el número de vídeos actualizados. Al pulsar sobre añadir comentario se mostrará el formulario de alta de comentarios. El número de comentarios será un enlace al listado de comentarios asociados al vídeo. Cada elemento del listado de comentarios está formado por el texto del comentario, el nombre y apellidos del autor (enlace al perfil de usuario de YouTube) y la fecha y hora. CABECERA PÁGINA

MENÚ IZQUIERDA

Rastro migas Título de página LISTADO COMENTARIOS

PIE

4.6.5 Publicar vídeo Muestra un formulario con todos los datos necesarios para publicar un vídeo en YouTube. El formulario contiene: 

Nombre y apellidos del propietario.



Lista desplegable con opciones de publicación.



Descripción del vídeo (área de texto).

44

MENÚ IZQUIERDA

Zona Privada >YouTube>Publicar vídeo

YouTube – Publicar vídeo -Nombre y apellidos del usuario Publicar: Descripción vídeo:

Publicar

Al pulsar sobre publicar, utilizando la API de YouTube, se publicará el vídeo en la cuenta correspondiente. Si se han cometido errores, se mostrará un cuadro de aviso por pantalla con todos los errores que se han cometido. Hasta que no se soluciones todos los errores, la foto no se publicará. Si todo el proceso es correcto se indica al usuario la operación a través del mensaje en pantalla: “Vídeo publicado”.

45

4.7 Resumen de funcionalidades A continuación se muestra un cuadro-resumen que indica las funcionalidades disponibles en las plataformas de redes sociales incluidas en la interfaz web accesible que tienen soporte en la librería API disponible por las respectivas plataformas:

Autenticación y Autorización Listar mensajes Publicar mensaje Responder mensaje Listar comentarios Añadir comentarios

Facebook Twitter X X X X X X X X X

LinkedIn X

YouTube(Google)

X X

Borrar comentario Listar fotos Publicar fotos

X X

Borrar foto Retweet Borrar mensaje Ver perfil Listar contactos

X

X X X

X X

X X

Buscar gente Buscar empleo

46

Invitar a gente Listar actualizaciones contactos

X

Listar álbumes Publicar álbum Borrar álbum Listar videos

X

Buscar videos Subir video

X

47

5. Interfaz Web Accesible: diseño y estructura 5.1 Interface principal Portada de inicio: •

Página principal del Interfaz Web que incluye: formulario de acceso, menú de navegación, enlace al registro de usuarios, una noticia destacada y los últimos tweets del canal de Fundación ONCE.

Formulario de autenticación de usuario: •

Permite que el usuario que ya está registrado se autentique. Incluye un enlace al recordatorio de la contraseña.

48

Menú de navegación: • •

Muestra las distintas secciones y servicios del Interfaz a las que puede acceder el usuario. Cuando el usuario se autentifica, también incluye las opciones para gestionar su cuenta y las redes sociales suscritas.

Noticia destacada y tweets de Fundación ONCE: •

Muestra una noticia destacada y los dos últimos tweets publicados en la línea de tiempo de Fundación ONCE.

5.2 Registro y autenticación de usuarios Registro de usuarios: •

Lleva al usuario al formulario de registro al Interfaz Web:

49

• •

Al registrarse, el usuario debe introducir varios datos que permitan identificarlo en el Interfaz Web. El registro en el Interfaz Web no implica acceso inmediato a las Redes Sociales, sino que debe registrarse expresamente a ellas (por propia exigencia de éstas).

Perfil de usuario: •

Una vez que se autentica, el usuario puede acceder a la página de su perfil de usuario, donde podrá: modificar sus datos personales y su contraseña, y activar o desactivar el acceso a las Redes Sociales disponibles.

50

Activar/Desactivar Redes Sociales: • •

El usuario puede elegir con qué Redes Sociales interactuará. Por las políticas de uso de las Redes Sociales, el usuario deberá autorizar en la Red Social que el Interfaz Web puede acceder.

Panel del usuario «Mi panel»: • •

Formulario de publicación en Facebook, Twitter o ambas. Bloques con las últimas publicaciones en los canales/muros del usuario en cada Red Social.

51

5.3 Mi panel “Facebook” Panel del usuario, bloque «Facebook»:

•

• •

Visualización e interacción con la cuenta del usuario en Facebook: Notificaciones. Mensajes. Solicitudes de amistad. Publicaciones. Comentarios. «Me gusta». Conexión/desconexión con Facebook. Acceso a la página de detalle de Facebook.

Bloque «Facebook», página de detalle:

•

•

Muestra diversas secciones exclusivas Facebook: Muro. Información. Amigos. Fotos. «Me gusta». Publicación de mensajes. Visualizar perfiles de usuarios (limitado por Facebook).

52

Bloque «Facebook», secciones:

• • • • • •

Muro: publicaciones del muro o feeds del usuario, permitiendo comentar e indicar si le gusta o no. Información: datos del perfil que se está visualizando. Amigos: lista de amigos asociados al perfil que se está visualizando, y desde éste acceder a su perfil. Fotos: listado de álbumes y fotos asociados al perfil que se está visualizando, así como sus comentarios, y hacer comentarios. Me gusta: listado de publicaciones que le gustan al usurario, permitiendo acceder al perfil que pertenecen. Eventos: listado de eventos asociados al perfil que se está visualizando, permitiendo participar en ellos.

5.4 Mi panel “Twitter” Panel del usuario, bloque «Twitter»:

•

• •

Visualización e interacción con la cuenta del usuario en Twitter: Cronología («Timeline»). Mensajes. «Siguiendo». Menciones. Favoritos. Responder/Retwitear. Conexión/desconexión con Twitter. Acceso a la página de detalle de Twitter.

53

Bloque «Twitter», página de detalle:

•

•

Muestra diversas secciones exclusivas de Twitter: Cronología. Tweets. Mensajes. Perfil. «Siguiendo». Buscar. Favoritos. Publicación de mensajes. Visualizar perfiles de usuarios (limitado por Twitter).

Bloque «Twitter», secciones:

• •

• • • • •

Cronología: cronología del perfil visualizado, permitiendo responder, twitear y marcar como favorito. Tweets: tweets del perfil visualizado. En el caso de ser el usuario registrado, el sistema permite borrarlo, además de responder y marcar como favorito. Mensajes: mensajes asociados al perfil que se está visualizando, permitiendo el borrado de los mensajes propios. Perfil: datos asociados al perfil visualizado. «Siguiendo»: listado de perfiles que está siguiendo el usuario, pudiendo dejar de seguir. Buscar: localizar cualquier perfil. Favoritos: listado de tweets favoritos, que permite comentar, retwitear y desmarcar como favorito.

54

5.5 Mi panel “YouTube” Bloque «YouTube», página de detalle:

•

•

Muestra diversas secciones exclusivas de YouTube: Portada. Más vistos. Mis vídeos. Suscripciones. Perfil. Favoritos. Buscar. Añadir vídeo. Visualizar perfiles de usuarios (limitado por YouTube).

Bloque «YouTube», secciones:

•

• • • • • • •

Portada: listado de los videos de los canales en los que el perfil visualizado está suscrito, permitiendo marcarlo como favorito y votarlo. Más vistos: lista de los vídeos más vistos en YouTube, pudiendo comentarlo, votarlo, editarlo o eliminarlo (en el detalle del vídeo). Mis vídeos: lista de los vídeos publicados por el usuario. Suscripciones: listado de canales a los que el usuario está suscrito. Perfil: datos asociados al perfil que visualizado. Favoritos: listado de videos favoritos, pudiendo votarlos o desmarcar favorito. Buscar: formulario para localizar un video. Añadir video: formulario para subir un video al canal del usuario en YouTube.

55

5.6 Mi panel “LinkedIn” Panel del usuario, bloque «LinkedIn»: •

• •

Visualización e interacción con la cuenta del usuario en LinkedIn: Actualizaciones. Perfil. Empleos. Nº de contactos. Conexión/desconexión con LinkedIn. Acceso a la página de detalle de LinkedIn.

Bloque «LinkedIn», página de detalle:

•

•

Muestra diversas secciones exclusivas de LinkedIn: Actualizaciones. Perfil. Contactos. Grupos. Empleos. Empresas. Visualizar perfiles de usuarios (limitado por LinkedIn).

56

Bloque «LinkedIn», secciones:

• • • • •

•

Actualizaciones: listado de actualizaciones en el perfil del usuario. Perfil: datos del perfil visualizado. Contactos: listado de contactos del perfil que se está visualizando, permitiendo acceder a su perfil y enviarle un mensaje. Grupos: listado de grupos a los que el usuario está suscrito, pudiendo acceder a datos del grupo en LinkedIn o desuscribirse. Empleos: listado de empleos en los que el usuario podría estar interesado, que puede visualizar y marcar como de interés. Puede buscar empleos y marcarlos como de interés. Empresas: listado de empresas en las que el usuario podría estar interesado. Puede buscar empresas y marcarlas como de interés.

57

6. Protocolo OAuth OAuth es un estándar que permite un sistema de autenticación delegada, utilizado por el interfaz web accesible y las plataformas de redes sociales para la autorización del intercambio de información entre aplicaciones web por parte del propietario de dicha información. A continuación se describe este protocolo. El protocolo presenta los siguientes conceptos básicos: 

Service Provider: Es el sitio, servicio web o servicio en general donde se localizan los recursos restringidos (y que por tanto hay que proteger mediante un sistema de autenticación/autorización). El protocolo no obliga a que el Service Provider sea adicionalmente el servicio de identidad, con lo que puede usar su propio mecanismo para realizar la autenticación de los usuarios.



Usuario. El usuario es el actor principal dentro de OAuth y es la persona que dispone de recursos privados que no quiere hacer público en el Service Provider, pero que quiere compartir con otro sitio.



Consumer: Se trata de la aplicación que está accediendo al recurso privado del usuario. Es por tanto, dicha aplicación la que mediante los permisos otorgados por el usuario el que accederá finalmente al recurso.



Recursos protegidos: Aquellos recursos que son privados, y para los que se le otorgan permisos al Consumer explícitamente para que proceda a procesarlos adecuadamente: fotos, documentos, contactos, etc.



Tokens: Dentro del protocolo se usan tokens como sustituto a las credenciales del usuario. Se usan técnicas de Firma Digital (par de claves pública-privada, algoritmos de hashing, etc..) para cifrar la información asociada al token y para garantizar la identidad de la persona/sistema que realiza la petición (Usuario/Consumer). Dentro del protocolo hay dos tipos de tokens: Request y Access. Uno asociado con el Consumer y otro asociado con el Usuario. A continuación entramos en detalle.

Supongamos, por ejemplo, que se está desarrollando un servicio de impresión de fotos y queremos que el usuario pueda imprimir las fotos alojadas en un sistema como Flickr. En este escenario, el ServiceProvider sería Flickr, puesto que es el sistema donde están los recursos protegidos (en nuestro caso, fotos). El rol de Consumer sería la aplicación de impresión de fotos. El usuario sería la persona que quiere imprimir unas fotos de su cuenta de Flickr, pero no quiere que la aplicación de impresión conozca sus credenciales, incluso no quiere tener unas credenciales específicas en este sitio. Los recursos protegidos serían las fotos alojadas dentro de Flickr. Normalmente hay un paso previo, que no aparece en el diagrama y que consiste en la necesidad de registrar la aplicación (Consumer) en el Service Provider, proceso que te devuelve un par de valores ConsumerKey y Consumer Secret. Básicamente estos dos datos se comportan como una clave pública y una clave privada en un proceso de firma digital. De hecho como se puede ver en el detalle de parámetros de las distintas peticiones, en algunas de ellas se pasa la clave pública (Consumer Key). Puesto que la clave privada es compartida entre el Consumer y el Service Provider, éste forma parte de la signature incluida en el Token de Petición. Como en cualquier proceso de firma electrónica, esta clave privada será usada en el destino para comprobar la veracidad/integridad de la petición. 58

6.1 Flujo del proceso

Diagrama autenticación con protocolo OAuth 1.0a

En la primera petición (A), como se puede ver el Consumer al custodiar las claves Consumer Key y Consumer Secret, usa estas llaves para enviar una petición al Service Provider para que éste identifique el sistema que quiere realizar la petición. Destacar que en el protocolo Auth, es un proceso de autorización en el que interviene básicamente Service Provider, Consumer y Usuario, produciéndose la autenticación en dos pasos básicos: uno en el que se autentica el Consumer (aplicación que quiere obtener recursos protegidos, pero que delega la autenticación en el service Provider). Posteriormente hay una segunda etapa de autenticación donde el usuario debe autenticarse en el sistema para poder ser identificado correctamente. A partir de esta segunda fase y mediante el mecanismo de tokens que estamos definiendo, es posible que el Consumer pueda acceder al recurso protegido (puesto que el usuario le ha dado los permisos oportunos). Centrándonos ahora en la petición (A), se ve que dentro de la petición se incluye la clave pública del consumer (identifica al consumer), además se genera un campo “signature” que básicamente consiste en construir una cadena de caracteres base (normalización de la petición http incluyendo el método http, parámetros, URL callback, adicionalmente se usa la clave privada para generar finalmente la signature), la cual va incluida dentro de la petición. Como hemos comentado adicionalmente dentro de la petición se indica la URL de “callback”, es decir la URL del Consumer a donde se debe redirigir el flujo una vez el usuario se ha autenticado en el Service Provider. 59

Una vez construida la petición con sus parámetros, el Service Provider realiza el correspondiente proceso de autenticación (procesamiento del parámetro “signature”) con la clave privada compartida, y garantizando por tanto, que la petición no ha sido alterada y comprobando mediante este algoritmo matemático que el peticionario de la petición es quien dice ser. Tras comprobar la integridad/veracidad de la petición, el Service Provider contesta al Consumer con la clave pública y privada que el usuario deberá usar en el proceso de autenticación de la segunda etapa del protocolo). Una vez realizado este proceso, el Consumer redirige al Service Provider para que tenga lugar el proceso de autenticación del usuario. Es en este paso, donde el usuario se autentica usando las credenciales del Service Provider. Si para autenticación se produce de un modo correcto, el Service Provider manda el token y un verificador que el Consumer usa para construir el segundo de los tokens (AccessToken). Este token será el que lleva incorporado la autorización implícita del usuario y por tanto, el que concederá al Service Provider la posibilidad de acceder a los recursos privados del Service Provider. Normalmente en el proceso de autenticación del usuario, se pueden otorgar diferentes permisos (acceso a datos personales del usuario, acceso a las fotos, posibilidad de enviar correo electrónicos al usuario, etc..). Es en el token donde reside el proceso de autenticación delegada, donde el usuario delega al Consumer la posibilidad de poder acceder a sus recursos. El protocolo permite que este token sea invalidado en cualquier momento, disponga de un tiempo de vigencia, etc. Una vez el Consumer dispone del token de acceso, se produce un intercambio similar al realizado para el Request Token, finalizando con el acceso por parte del Consumer a los recursos privados del usuario.

60