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
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/

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.
http://sistemadeevaluacion.weebly.com/
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.
https://www.facebook.com/sistemadeevaluacion
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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (20)

Similar to Práctica de herramientas web 2.0

Similar to Práctica de herramientas web 2.0 (20)

More from Héctor Garduño Real

More from Héctor Garduño Real (20)

Recently uploaded

Recently uploaded (20)

Práctica de herramientas web 2.0