práctica de herramientas web 2.0

Universidad Internacional De La Rioja

Máster en Dirección e Ingeniería de Sitios Web

Informe sobre la creación y

uso de herramientas web 2.0

para el SEIE

Presenta: Héctor Garduño Real

Asignatura: Diseño De Sitios Usando Web 2.0

México, 01 de abril de 2015

01 de abril de 2015 Página ii

ÍNDICE DE CONTENIDOS

INTRODUCCIÓN .............................................................................................................................................. 4

1. HERRAMIENTAS EMPLEADAS ................................................................................................................ 4

2. SITIO WEB .............................................................................................................................................. 4

2.1. Creación de cuenta en Weebly ..................................................................................................... 6

2.2. Configuración de sitio web en Weebly .......................................................................................... 7

3. BLOG ...................................................................................................................................................... 9

3.1. Creación de una cuenta en WordPress ....................................................................................... 10

3.2. Configuración del blog en WordPress ......................................................................................... 11

4. RED SOCIAL .......................................................................................................................................... 14

4.1. Creación de una página en Facebook ......................................................................................... 14

4.2. Configuración de la página de Facebook .................................................................................... 16

5. ALMACENAMIENTO EN LA NUBE ......................................................................................................... 17

5.1. Configuración de carpeta compartida en Google Drive .............................................................. 18

6. OFIMÁTICA 2.0 .................................................................................................................................... 19

7. MICROBLOG ........................................................................................................................................ 20

7.1. Creación de una cuenta en Twitter ............................................................................................. 21

7.2. Configuración de la cuenta de Twitter ........................................................................................ 22

8. WIKI ..................................................................................................................................................... 22

ÍNDICE DE IMÁGENES

ILUSTRACIÓN 1. CAPTURAS DE PANTALLA DEL SITIO WEB FINALIZADO ................................................................................. 5

ILUSTRACIÓN 2. REGISTRO EN WEEBLY ......................................................................................................................... 6

ILUSTRACIÓN 3. ELECCIÓN DEL ENFOQUE DEL SITIO EN WEEBLY ......................................................................................... 6

ILUSTRACIÓN 4. SELECCIÓN DE PLANTILLA EN WEEBLY ..................................................................................................... 6

ILUSTRACIÓN 5. DEFINICIÓN DEL NOMBRE DE DOMINIO EN WEEBLY ................................................................................... 6

ILUSTRACIÓN 6. INTERFAZ SIMPLE E INTUITIVA DE WEEBLY .............................................................................................. 6

ILUSTRACIÓN 7. ELECCIÓN DE BACKGROUND EN WEEBLY ................................................................................................. 7

ILUSTRACIÓN 8. EDICIÓN DE IMAGEN DE FONDO EN WEEBLY ............................................................................................ 7

ILUSTRACIÓN 9. INSERCIÓN Y EDICIÓN DE ELEMENTOS EN WEEBLY ..................................................................................... 7

ILUSTRACIÓN 10. EDICIÓN AVANZADA CON HTML Y CSS EN WEEBLY ................................................................................ 7

ILUSTRACIÓN 11. PÁGINAS POR DEFECTO Y PROPIEDADES DE UNA PÁGINA EN WEEBLY .......................................................... 8

ILUSTRACIÓN 12. MENÚ CON LAS 5 PÁGINAS USADAS .................................................................................................... 8

ILUSTRACIÓN 13. EL CONTENIDO DE CADA UNA DE LAS 5 PÁGINAS CREADAS EN WEEBLY ........................................................ 8

ILUSTRACIÓN 14. CAPTURA DE PANTALLA DEL BLOG FINALIZADO ....................................................................................... 9

ILUSTRACIÓN 15. CREAR CUENTA EN WORDPRESS ....................................................................................................... 10

ILUSTRACIÓN 16. DEFINIR NOMBRE DEL DOMINIO EN WORDPRESS ................................................................................. 10

ILUSTRACIÓN 17. DEFINIR DATOS DE LA CUENTA Y COMPRA DE NOMBRES DE DOMINIOS ...................................................... 10

01 de abril de 2015 Página iii

ILUSTRACIÓN 18. ELECCIÓN DE LA PLANTILLA Y PLAN DE PAGO PARA EL BLOG .................................................................... 10

ILUSTRACIÓN 19. PANEL BÁSICO DE ADMINISTRACIÓN DE WORDPRESS ............................................................................ 11

ILUSTRACIÓN 20. PERSONALIZACIÓN DE PLANTILLA DE WORDPRESS ................................................................................ 11

ILUSTRACIÓN 21. PLANTILLA DE WORDPRESS YA PERSONALIZADA. .................................................................................. 11

ILUSTRACIÓN 22. ACCESO A WP ADMIN DESDE EL PANEL BÁSICO ................................................................................... 12

ILUSTRACIÓN 23. EL PANEL DE CONTROL DE WORDPRESS LLAMADO WP ADMIN ............................................................... 12

ILUSTRACIÓN 24. AÑADIR NUEVA ENTRADA AL BLOG .................................................................................................... 12

ILUSTRACIÓN 25. CREACIÓN DE UNA NUEVA ENTRADA Y VISUALIZACIÓN DEL RESULTADO ..................................................... 12

ILUSTRACIÓN 26. CREACIÓN DE UNA PÁGINA EN WORDPRESS........................................................................................ 13

ILUSTRACIÓN 27. CONFIGURACIÓN DE MENÚS EN EL BLOG Y VISUALIZACIÓN DE LOS RESULTADOS .......................................... 13

ILUSTRACIÓN 28. CONECTAR REDES SOCIALES A WORDPRESS ........................................................................................ 13

ILUSTRACIÓN 29. EJEMPLO DE OTORGAR PERMISO A WORDPRESS PARA QUE PUBLIQUE EN UNA PÁGINA DE FACEBOOK ............ 13

ILUSTRACIÓN 30. CAPTURA DE PANTALLA UNA VEZ FINALIZADA LA CONFIGURACIÓN DE LA RED SOCIAL EN FACEBOOK ................ 14

ILUSTRACIÓN 31. INICIAR LA CREACIÓN DE UNA PÁGINA EN FACEBOOK ............................................................................ 14

ILUSTRACIÓN 32. INICIAR SESIÓN EN FACEBOOK .......................................................................................................... 15

ILUSTRACIÓN 33. ESPECIFICAR EL TIPO DE PÁGINA DE FACEBOOK .................................................................................... 15

ILUSTRACIÓN 34. PROPORCIONAR INFORMACIÓN SOBRE LA PÁGINA DE FACEBOOK Y CARGAR FOTO DE PERFIL ......................... 15

ILUSTRACIÓN 35. DEFINIR PÚBLICO OBJETIVO DE LA PÁGINA........................................................................................... 15

ILUSTRACIÓN 36. ANTES Y DESPUÉS DE PERSONALIZAR LA PORTADA DE LA PÁGINA EN FACEBOOK .......................................... 16

ILUSTRACIÓN 37. COMPLETAR LA INFORMACIÓN DE LA PÁGINA DE FACEBOOK ................................................................... 16

ILUSTRACIÓN 38. CREACIÓN DEL BOTÓN DE LLAMADA DE ACCIÓN EN FACEBOOK ................................................................ 16

ILUSTRACIÓN 39. CARPETA COMPARTIDA EN GOOGLE DRIVE ......................................................................................... 17

ILUSTRACIÓN 40. CREACIÓN DE CARPETA EN GOOGLE DRIVE ......................................................................................... 18

ILUSTRACIÓN 41. OPCIÓN "COMPARTIR" EN GOOGLE DRIVE ......................................................................................... 18

ILUSTRACIÓN 42. PERSONALIZAR LA OPCIÓN DE COMPARTIR UNA CARPETA ....................................................................... 18

ILUSTRACIÓN 43. CARGA DE ARCHIVOS A CARPETA COMPARTIDA DE GOOGLE DRIVE ........................................................... 19

ILUSTRACIÓN 44. CREACIÓN DE UN DOCUMENTO DE TEXTO EN GOOGLE DRIVE ................................................................. 19

ILUSTRACIÓN 45. DOCUMENTO DE TEXTO EN GOOGLE DRIVE ........................................................................................ 19

ILUSTRACIÓN 46. VISTA DE LA CARPETA DE USUARIOS PÚBLICOS ..................................................................................... 20

ILUSTRACIÓN 47. VISTA DEL DOCUMENTO DE USUARIOS CON PERMISOS DE EDITAR ............................................................ 20

ILUSTRACIÓN 48. VISTA DEL DOCUMENTO POR UN USUARIO SIN PERMISOS DE EDICIÓN ....................................................... 20

ILUSTRACIÓN 49. CAPTURA DE PANTALLA DE TWITTER UNA VEZ CONFIGURADO ................................................................. 21

ILUSTRACIÓN 50. LOS TRES PRIMEROS PASOS PARA CREAR UNA CUENTA EN TWITTER .......................................................... 21

ILUSTRACIÓN 51. CAMBIO DE IMAGEN DE CABECERA Y DATOS DE PERFIL BÁSICOS EN TWITTER .............................................. 22

ILUSTRACIÓN 52. PÁGINA PRINCIPAL DEL WIKI ............................................................................................................. 22

ILUSTRACIÓN 53. CONSULTA SIN RESULTADOS Y OPCIÓN DE CREAR LA PÁGINA ................................................................... 23

ILUSTRACIÓN 54. LA CREACIÓN DE UNA CUENTA EN MEDIAWIKI SOLO IMPLICA UN PASO ..................................................... 23

ILUSTRACIÓN 55. REDACCIÓN DE LA PÁGINA CON WIKITEXTO ......................................................................................... 23

ILUSTRACIÓN 56. NUEVA PÁGINA LISTA PARA SER CONSULTADA Y MODIFICADA POR OTROS .................................................. 23

Por: Héctor Garduño Real

Máster en Dirección e Ingeniería de Sitios Web Diseño de sitios usando Web 2.0

01 de abril de 2015 Página 4 de 23

INTRODUCCIÓN

Este trabajo describe y justifica de forma detallada la creación y uso de diversas herramientas web

2.0 para el proyecto del Trabajo de Fin de Máster (TFM) denominado Sistema de Evaluación para

Instituciones Educativas (SEIE) que servirán de para comenzar a delinear los primeros parámetros

del TFM y permitir al estudiante y al tutor el trabajo de forma colaborativa.

Así pues, a lo largo de los siguientes temas se detalla el procedimiento para la creación de cuentas

para cada herramienta, así como la configuración necesaria para cumplir los objetivos antes mencio-

nados.

1. HERRAMIENTAS EMPLEADAS

A continuación se muestra una tabla con las herramientas empleadas así como las respectivas direc-

ciones desde las cuales se puede acceder, los criterios empleados para la elección de cada una de ellas

se detallan en los respectivos temas

2. SITIO WEB

La empresa del famoso buscador, tiene su herramienta para crear sitios web llamada Google Sites,

que resulta ser muy básico quedando incluso algo obsoleta ante los competidores del mismo sector,

pues presenta opciones muy limitadas, y en especial en cuanto a diseño el cual resulta muy pobre.

Quizá las únicas ventajas que se le puedan destacar son que permite el control de versiones y la

edición colaborativa. Así pues, Google Sites resulta ser más adecuado a quien esté totalmente enfo-

cado en el contenido y no le dé mayor importancia al diseño y funcionalidad, si por el contrario lo

que se busca es ganar adeptos y hacer algo de mercadotecnia, definitivamente esta es la peor opción,

y esta es precisamente la razón por la que no se usa para este proyecto.

Por otra parte, también es posible encontrar en la web una variedad de sitios web que ofrecen el

servicio de crear sitios web con unos cuantos clics, entre ellos se encuentran Wix, Squarespace y

1&1, que son muy buenas opciones pues cuentan con características interesantes, pero quizás esa sea

Herramienta Nombre Dirección URL

Sitio Web Weebly http://sistemadeevaluacion.weebly.com

Blog WordPress https://sistemadeevaluacioneducativa.wordpress.com/

Red Social Facebook https://www.facebook.com/sistemadeevaluacion

Almacenamiento

en la nube

Google Drive http://goo.gl/CGcZbq

Ofimática 2.0 Google Docs http://goo.gl/YcnSbi Permiso solo visualización

Microblog Twitter https://twitter.com/sis_evalua

Wiki MediaWiki http://52.10.233.12/wiki/

http://sistemadeevaluacion.weebly.com/

https://sistemadeevaluacioneducativa.wordpress.com/

https://www.facebook.com/sistemadeevaluacion

http://goo.gl/CGcZbq

http://goo.gl/YcnSbi

https://twitter.com/sis_evalua

http://52.10.233.12/wiki/




la razón por la que no cuentan con versiones gratuitas, solo de pago, razón por la cual tampoco son

contempladas para este proyecto.

Finalmente, entre las opciones que presentan versión gratuita se encuentran Jimdo y Weebly,

que son los dos principales y más populares servicios que cumplen esta característica. Ambos tienen

características aparentemente muy similares según se pueden ver en sus respectivas webs, de hecho

si se buscan opiniones de usuarios estas serán muy parejas, pero definitivamente al probar ambas

opciones, es fácil decidirse por Weebly, ya que cuenta una interfaz muy limpia y fácil de usar, lo que

hace que sea fácil de sacrificar las pequeñas funciones que ofrece como ventaja su competidor. Así

que la herramienta elegida después de haber probado ambas es Weebly, obteniendo como resultado

el siguiente sitio web.


Ilustración 1. Capturas de pantalla del sitio web finalizado





2.1. Creación de cuenta en Weebly

El proceso para iniciarse en Weebly es ex-

tremadamente sencillo, simplemente al en-

trar a su sitio web se muestra un formulario

de registro con los campos de usuario, email

y contraseña. Al dar clic sobre el botón se

inicia un asistente que irá guiando de forma

fácil todo el proceso.

El siguiente paso consiste en elegir el

enfoque que tendrá el sitio web y para lo cual

se ofrecen tres opciones como se puede ver

en la imagen. Como lo aclara en la parte inferior, no im-

porta el enfoque elegido, se tendrá acceso a todas las ca-

racterísticas.

Posteriormente debe elegirse un tema o plantilla en-

tre las opciones que se ofrecen, que aunque son escazas

en número, resultarán suficientes y adecuadas para la

mayoría de los caso. Y para finalizar, deberá definirse el

tipo de nombre de dominio a usar. Hecho esto la página

estará disponible para que se comience a realizar cam-

bios en el sitio web.

La interfaz de usuario es bastante sim-

ple de usar, ya que solo hay que posicio-

narse sobre el elemento que se desea modi-

ficar para que se muestren las diferentes

opciones de modificación, mientras que si

se desean agregar nuevos elementos, bas-

tará con arrastrarlos del panel lateral.

Ilustración 2. Registro en weebly

Ilustración 3. Elección del enfoque del sitio en

weebly

Ilustración 4. Selección de plantilla en weebly

Ilustración 5. Definición del nombre de dominio en weebly

Ilustración 6. Interfaz simple e intuitiva de Weebly




2.2. Configuración de sitio web en Weebly

Una de las primeras cosas que se pueden empezar a ha-

cer es a sustituir los textos de la página principal en

donde aparezca un “Haga click para…”, así como cam-

biar la imagen de fondo que emplea el tema, para lo cual

se tienen imágenes predefinidas pero también se cuenta

con la opción de cargarlas desde la computadora. Algo

que resulta interesante es que a la imagen de fondo (y al

resto de imágenes cargadas) se les pueden aplicar efec-

tos o recortes.

Una vez concluida la edición de la ima-

gen de fondo, se puede continuar con la edi-

ción del resto de los elementos de la página, si

hace falta pueden arrastrarse los elementos

desde el panel izquierdo y luego editarlos.

Desde el menú superior llamado “Diseño” es posible rea-

lizar cambios en el tema para todo el sitio web,

cambiar los tipos de letra o el fondo, e

incluso realizar cambios de apariencia

un poco más avanzados, como por

ejemplo la edición de código HTML y

CSS, algo que necesita unos conoci-

mientos mínimos para poder cambiar.

Ilustración 7. Elección de background en Weebly

Ilustración 8. Edición de imagen de fondo en weebly

Ilustración 9. Inserción y edición de elementos en weebly

Ilustración 10. Edición avanzada con HTML y CSS en weebly




Para el proyecto es necesario la existencia de ciertas páginas o secciones que se muestren desde

el menú, estás páginas se gestionan desde el menú superior llamado “Páginas”, las cuales como se

muestran en las siguientes imágenes, debe indicarse el tipo de página que se va a crear, el diseño de

la página, definir su visibilidad y finalmente la meta-información que será agregada para cada página

ya que ello mejorará el posicionamiento SEO.

Para el caso del proyecto será necesario tener la siguiente estructura de páginas, de las cuales las

que se muestran con sangría son solo enlaces directos a URLs externas. Así mismo, las diferentes

páginas se han diseñado de la siguiente manera, como se muestra en las imágenes.

Ilustración 11. Páginas por defecto y propiedades de una página en weebly

Ilustración 12. Menú con las

5 páginas usadas

Ilustración 13. El contenido de cada una de las 5 páginas creadas en weebly




3. BLOG

Dentro de las opciones gratuitas disponibles para crear un blog se encuentran Blogger, Tumblr,

WordPress, Joomla y Drupal. Las dos primeras opciones, es decir, Blogger y Tumblr no se contem-

plarán para este proyecto ya que solo se ofrecen como servicio, es decir, en el momento en el que se

llegase a tener un servidor o hosting propio, la posibilidad de migrar el blog son nulas, debido a que

son sistemas cerrado.

Por el contrario WordPress, Joomla y Drupal son los tres líderes indiscutibles del sector, y de los

cuales se descarta como opción a Drupal, debido a que es una opción muy robusta y de la cual se

requiere obligatoriamente un servidor propio o hosting. En cuanto a WordPress y Joomla, ambos

ofrecen el servicio de creación de blogs desde su mismo sitio, así como descargarlo para instalarlo en

servidores propios, sus prestaciones son muy similares, sin embargo Joomla es una solución que está

más enfocada a la administración, por lo que puede parecer algo más complejo de usar para usuarios

no técnicos, mientras que WordPress es una solución que está más dirigida a usuarios que buscan

enfocarse más en el contenido y dejar de lado la parte de gestión de las cuestiones técnicas, aunque

ello no significa que esto haga menos

potente a WordPress, sino que se

ofrece como una herramienta que a

medida que se le van implementando

funcionalidades más robustas va au-

mentando su complejidad de gestión.

Esta es la razón por la que para el

proyecto se ha elegido usar

WordPress, ya que se pretende cen-

trar más en la información que se va

a publicar, pues al no ser un blog que

proyecte millones de visitas concu-

rrentes, se puede sacrificar la parte de

la robustez por una fácil administra-

ción. Así pues el resultado de crear el

blog en WordPress fue el siguiente.

https://sistemadeevaluacioneduca-

tiva.wordpress.com/

Ilustración 14. Captura de pantalla del blog finalizado






3.1. Creación de una cuenta en WordPress

Al ingresar al sitio web de WordPress resalta el botón

“Crear sitio web”. Una vez que se da clic en él, se

comienza el proceso de creación de cuenta y al mismo

tiempo del blog, dicho proceso consta de cinco pasos

descritos a continuación.

El primer nombre será definir el nombre del

subdominio que tendrá el blog, para este proyecto se

ha decidido usar el nombre de “sistemadeevaluacio-

neducativa”, a continuación en el segundo paso habrá

que definir los datos de la cuenta como se haría en

cualquier otro servicio, es decir email, usuario y con-

traseña.

Posteriormente WordPress ofrecerá la opción de com-

prar un propio nombre de dominio como por ejemplo

“dominio.com”. Ya que el proyecto no lo requiere se

omite esta compra y se usa el subdominio que ofrece

gratuitamente WorPress.

El penúltimo paso con-

siste en elegir el diseño de la

plantilla que se desee para el

blog, y que para este caso se ha

elegido la llamada “Sequential”.

El último paso con el que

se termina el proceso de creación

de la cuenta, es la elección del

plan, y por los motivos que se

han mencionado con anteriori-

dad, se elige la gratuita.

Ilustración 15. Crear cuenta en WordPress

Ilustración 16. Definir nombre del dominio en

WordPress

Ilustración 17. Definir datos de la cuenta y compra de nombres de dominios

Ilustración 18. Elección de la plantilla y plan de pago para el blog




3.2. Configuración del blog en WordPress

Una vez creada la cuenta, el panel de

control que ofrece WordPress es una

versión extremadamente simple, diri-

gida para aquellos que tienen conoci-

miento técnicos muy bajos, la ilustra-

ción 19 muestra dicho panel, que para

este proyecto no será el que se usará.

Para iniciar la configuración lo primero

que se hará será personalizar la plantilla

usada en el blog, por lo que se dará clic

en el botón “Personalizar tu sitio” que

aparece en la pantalla de bienvenida,

pero que también aparece en el otro pa-

nel. En la nueva vista que se abre se pro-

cederá a hacer las configuraciones bási-

cas tales como definir el nombre del en-

cabezado, colores y los widgets a usar.

Una vez hechas todas las configu-

raciones antes mencionadas, se obtiene

un blog que se mostrará como en la ima-

gen 21.

Ilustración 19. Panel básico de administración de WordPress

Ilustración 20. Personalización de plantilla de WordPress

Ilustración 21. Plantilla de WordPress ya personalizada.




Para tener un mejor control sobre las configuraciones se usará

el panel avanzado, para lo cual se encuentra un enlace en el panel

básico, así que habrá que da clic sobre “WP Admin”.

Uno de los primero pasos a realizar es la publicación

de una entrada, por lo que se realizará una nueva para sus-

tituir la publicación de prueba que viene por defecto. Para

ello en el WP Admin, desde el menú lateral elegir “Entra-

das” y una vez que se esté en “Todas las entradas”, se podrá

eliminar la entrada Hola mundo que viene por defecto, una

vez hecho esto se podrá dar clic en “Añadir nueva” que se

encuentra disponible desde el mismo menú lateral o como

botón en las entradas. En la nueva vista solo bastara con

redactar el texto y darle formato con todas las opciones que

se encuentran disponibles, en este caso, se definió como “Minientrada”.

Así mismo, algo que debe también suele ser muy común es crear páginas en lugar de entradas

con la finalidad de que estás permanezcan siempre fijas sin que se organicen cronológicamente, lo

que comúnmente se usa para crear páginas tipo “Acerca de nosotros”, así que para éste proyecto, se

realizará una página con ese mismo objetivo, tal y como se muestra en la imagen 26.

Ilustración 22. Acceso a WP Admin

desde el panel básico

Ilustración 23. El panel de control de WordPress llamado WP Admin

Ilustración 24. Añadir nueva entrada al blog

Ilustración 25. Creación de una nueva entrada y visualización del resultado




Algo también importante que debe

configurarse es el menú que aparece en

la parte superior del encabezado para

que el usuario pueda navegar adecuada-

mente, para lo cual en el WP Admin se

elige “Apariencia” y luego “Menús”.

Una vez ahí, se agregaron la página prin-

cipal (Inicio) y la página Nosotros

(Quiénes somos) como menús de primer

nivel, posteriormente usando una cate-

goría creada previamente, se creó un tercer menú de primer nivel llamado “Sitios” que se usó para

agregar los submenús de enlaces a los otros sitios web, tal y como se puede apreciar en la imagen.

Ilustración 27. Configuración de menús en el blog y visualización de los resultados

Finalmente solo resta conectar las cuentas de

redes sociales con el blog, para que al momento

de que se realice una publicación en el blog, se

realicen automáticamente publicaciones en las re-

des sociales sobre la entrada. Para ello solo es ne-

cesario dirigirse al menú “Configuración” y luego

a “Compartir”, una vez ahí habrá que conectar las

respectivas cuentas con un par de clics. En el caso

del presente proyecto, al usarse Facebook y Twitter, serán las únicas cuentas que se configurarán.

Ilustración 26. Creación de una página en WordPress

Ilustración 28. Conectar redes sociales a WordPress

Ilustración 29. Ejemplo de otorgar permiso a WordPress para que publique en una página de Facebook




4. RED SOCIAL

Una de las más famosas redes sociales por lo menos en Latinoamérica y en países de habla hispana

es Facebook, que tiene una gran cantidad de usuarios. Así que para esta ocasión para el proyecto, en

lugar de intentar realizar un análisis para determinar la mejor opción de red social, se hará por cuestión

de alcance y difusión que tiene la misma herramienta, así pues, Facebook fue la elegida y el resultado

después de las configuraciones es el que se muestra a continuación.


Ilustración 30. Captura de pantalla una vez finalizada la configuración de la red social en Facebook

4.1. Creación de una página en Facebook

El presente procedimiento omite la creación de una cuenta de usuario de Facebook, ya que al ser

demasiado fácil, muy común y además estar fuera del objetivo del proyecto, se explicara el procedi-

miento para la creación de una página, que como lo dice en la página principal, en lugar de ser para

personas, será para celebridades, negocios o grupos sociales que buscan obtener un público y llevar

las estadísticas y seguimiento de ello. Así pues, el primer paso al entrar a la página de Facebook, será

ir a la parte inferior, y en lugar de usar el

botón para crear una cuenta, se dará clic en

el enlace “Create a Page”, esto llevara a una

nueva página en donde iniciará el proceso

de creación de una página de Facebook.

Como se mencionó anteriormente, es nece-

sario contar con una cuenta de usuario, por

lo que el primer paso será iniciar sesión.

Ilustración 31. Iniciar la creación de una página en Facebook





Una vez hecho esto, se pedirá elegir el tipo pá-

gina, y ya que se tratará de un software o aplicación,

la opción más correcta es “Marca o producto”, por lo

que una vez que se dé clic sobre el recuadro, se solici-

tará hacer una clasificación un poco más específica

del mismo.

Posteriormente se realizará una configuración básica guiada a lo largo de cuatro pasos. En el

primero se pide proporcionar un poco de información relacionada con la página, y sobre todo la

URL que tendrá la misma en Facebook y por la cual otros la podrán localizar. El siguiente paso

consistirá en definir la foto de perfil, que en este caso será el logotipo.

Los siguientes pasos también muy senci-

llos, serán para agregar la página a los favori-

tos de la cuenta del usuario y a definir el pú-

blico objetivo.

Ilustración 32. Iniciar sesión en Facebook

Ilustración 33. Especificar el tipo de página de Facebook

Ilustración 34. Proporcionar información sobre la página de Facebook y cargar foto de perfil

Ilustración 35. Definir público objetivo de la página




4.2. Configuración de la página de Facebook

En realidad la configuración de la página también resulta muy sencillo, ya que solamente habrá que

darle un poco de diseño cargando alguna imagen, así como completar la información de la página con

más información para que esto haga que Facebook ayude a encontrar más fácilmente público objetivo.

La primera configuración que se realizó fue sobre la portada, para lo cual se cargó una imagen y

también se creó una llamada de acción para que el usuario vaya directamente al sitio web, tal como

se muestra en las siguientes imágenes.

Finalmente se editó la sec-

ción de información para com-

plementar los datos tal como se

muestra en la siguiente imagen.

Ilustración 36. Antes y después de personalizar la portada de la página en Facebook

Ilustración 38. Creación del botón de llamada de acción en Facebook

Ilustración 37. Completar la información de la página de Facebook




5. ALMACENAMIENTO EN LA NUBE

Al día de hoy hay una amplia variedad de servicios que permiten el almacenamiento en la nube, de

los cuales destacan DropBox, OneDrive y Google Drive, y de los cuales se hará la elección de alguno

de ellos para usarlo a lo largo del Trabajo de Fin de Máster (TFM).

Como usuario activo de los tres servicios, puedo afirmar que en lo que respecta a DropBox es

una buena herramienta, pero que esta solo está enfocada al almacenamiento. En cuanto a OneDrive y

Google Drive, ambos ofrecen almacenamiento pero también la oportunidad de edición de documen-

tos, OneDrive a través de Office Online y Google Drive a través de Google Docs.

Si solo importará el almacenamiento, se podría elegir sin problema cualquiera de las tres opcio-

nes, sin embargo, ya que para el TFM se pretende dar revisiones de la memoria, entonces se descarta

DropBox. En lo que respecta a OneDrive resulta buena pues lleva a la web los famosos Word, Po-

werPoint y Excel, sin embargo ya que estos son de pago las características que presentan en la versión

online son reducidas además de que la interfaz de momento llega a ser un poco más lenta. Por el

contrario Google Docs tiene una variedad más amplia de opciones y herramientas, y ello sin contar

con la gran cantidad de herramientas desarrolladas por terceros y que se integran con Google Drive,

por ejemplo si se desean diseñar diagramas, si se desea editar video o imágenes, etc., todas esas he-

rramientas permiten almacenar directamente en Google Drive.

Por ello, la herramienta elegida es Google Drive, ya que a pesar la pequeña baja incompatibilidad

que presenta con los documentos de Microsoft Office se contrarresta con la amplia variedad que

características que se permiten en los documentos de Google Docs, así como con el alto grado de

integración de herramientas de terceros en Google Drive, el resultado entonces, es el siguiente:

Ilustración 39. Carpeta compartida en Google Drive




5.1. Configuración de carpeta compartida en Google Drive

Para hacer uso del servicio de Google Drive solo basta ser usuario de Google, posteriormente acceder

a drive.google.com y ahí realizar los siguientes pasos. Primero, dar clic en el botón “Nuevo” que se

encuentra en la parte superior izquierda para posteriormente dar clic sobre la opción “Carpeta”, tal

como se muestra en la siguiente imagen.

Ilustración 40. Creación de carpeta en Google Drive

Al hacer esto se solicitará asignar el nombre de la car-

peta, que para este caso fue “TFM-Héctor_Garduño”. Una

vez creada la carpeta, habrá que dar clic derecho sobre ella

y luego elegir la opción “Compartir…” esto hará que se

despliegue un cuadro de diálogo en donde se configurará

con unos cuantos clics la forma en que se va a compartir

la carpeta.

En el cuadro de diálogo mostrado, simplemente se po-

dría escribir un correo electrónico y establecer sus permi-

sos, que en este caso serían para todo el contenido de la

carpeta, sin embargo en esta ocasión solo se permitirán permisos de lectura para todo el público ya

que no se cuenta con el email del tutor.

Quizás más adelante este permiso al tutor

se le podría asignar directamente sobre

un solo archivo y no sobre toda la car-

peta.

Así pues en el cuadró de diálogo bas-

tará con hacer clic en la parte superior de-

recha que dice “Obtener enlace para

compartir”, esto generará una URL aso-

ciada a un permiso que por defecto es

solo visualización. Ese es el enlace que

se debe proporcionar a las personas que

Ilustración 41. Opción "Compartir" en Google

Drive

Ilustración 42. Personalizar la opción de compartir una carpeta




quieran ingresar al contenido de la carpeta. Cabe resaltar que también está disponible la opción

“Avanzada” desde la cual se permite especificar específicamente quiénes tendrán acceso, incluido el

mismo Google para ofrecer los documentos como parte de los resultados de su buscador.

Ya que la URL es muy larga y compleja, se puede hacer uso de un acortador como goo.gl, el cual

acortó la URL anterior en lo siguiente: http://goo.gl/CGcZbq

Para concluir, solo bastará con crear en dicha carpeta documentos, o como se hará en esta ocasión,

cargarlos, usando para ello la técnica de arrastrar y soltar

Ilustración 43. Carga de archivos a carpeta compartida de Google Drive

6. OFIMÁTICA 2.0

De la mano con el apartado anterior para crear un docu-

mento de acceso público (de momento editable por un

solo usuario) solo bastará entrar a la carpeta que se creó

anteriormente en Google Drive y de forma similar a como

se creó la carpeta, se crea el documento. Al crearse dentro

de una carpeta que ya es compartida, se advierte que este

documento también poseerá los mismos permisos, si estás

no fueran las circunstancias o por el contrario, no se qui-

siera compartir, entonces habría que dar clic derecho so-

bre el documento y cambiar las opciones de compartir con

otros.

Ilustración 44. Creación de un documento de

texto en Google Drive

Ilustración 45. Documento de texto en Google Drive

http://goo.gl/CGcZbq




Ilustración 48. Vista del documento por un usuario sin permisos de edición

7. MICROBLOG

El líder indiscutible de microblogs es Twitter, una herramienta muy conocida que no necesita carta

de presentación y que sus ventajas son ampliamente conocidas. Por ello y sin mayor preámbulo, fue

la herramienta elegida para añadir al proyecto, así pues, una vez realizadas todas las configuraciones,

el resultado es el que se muestra a continuación.

Ilustración 47. Vista del documento de usuarios con permi-

sos de editar

Ilustración 46. Vista de la carpeta de usuarios pú-

blicos




Ilustración 49. Captura de pantalla de Twitter una vez configurado

7.1. Creación de una cuenta en Twitter

La creación de la cuenta al igual que la mayoría de las herramientas anteriores, consta de unos cuantos

pasos, así que el primero de ellos consiste in ingresar a la página y rellenar los campos de usuario,

email y password. Hecho esto el siguiente paso será elegir el nombre de usuario de twitter así como

verificar su disponibilidad

Ilustración 50. Los tres primeros pasos para crear una cuenta en Twitter

Los últimos dos pasos del proceso (de los cuales se omiten las capturas de pantalla) consisten en

elegir la foto de perfil e importar contactos desde la cuenta de correo electrónico, este último paso no

necesario.




7.2. Configuración de la cuenta de Twitter

Al igual que en Facebook, la configuración básica se realiza de una forma bastante rápida ya que solo

se tiene que dar clic sobre el botón “Editar perfil” y hacer las modificaciones correspondientes.

8. WIKI

Aunque existen unos cuantos wikis tales como DokuWiki, TiddlyWiki o XWiki, la verdad es que el

ganador indiscutible por toda la experiencia que lleva acumulada y por la gran comunidad que lo

respalda es el gran MediaWiki, el sistema que está detrás del gigante Wikipedia. Así que MediaWiki

será la herramienta a usar para el proyecto.

En las wikis existe un término llamado vandalismo, el cual hace referencia a usuarios que realizan

acciones inapropiadas en la wiki, y una de esas acciones es la de agregar contenido sin valor. Fue

precisamente por no querer caer en el vandalismo al agregar información de una tarea que no cabe en

ninguna de las principales wikis existentes que decidí usar un servidor propio e instalar MediaWiki

para realizar dicha actividad.

Ilustración 52. Página principal del wiki

Ilustración 51. Cambio de imagen de cabecera y datos de perfil básicos en Twitter




En la esquina superior derecha se encuentra el enlace que lleva a la página para crear una cuanta,

el proceso solo consiste en ingresar nombre, usuario, email y contraseña, con lo que resulta suficiente

para que se pueda comenzar a editar páginas

En el momento en el que se realice

una búsqueda y no se obtengan resulta-

dos favorables, se le ofrecerá al usuario

la oportunidad de crear dicha página

para colaborar en el wiki. Para ello solo

bastará en dar clic sobre el enlace ofre-

cido.

Así que solo faltará redactar el

texto haciendo uso de wikitexto para fi-

nalmente publicar la página.

Ilustración 54. La creación de una cuenta en MediaWiki solo implica un paso

Ilustración 53. Consulta sin resultados y opción de crear la página

Ilustración 55. Redacción de la página con wikitexto

Ilustración 56. Nueva página lista para ser consultada y mo-

dificada por otros

práctica de herramientas web 2.0

Technology