Libro Aplicaciones Web

Módulo 8
Aplicaciones Web
Módulo 8: Aplicaciones Web
UF1: OFIMÁTICA Y HERRAMIENTAS WEB .................................................... 5
1. Instalación de aplicaciones web. .................................................................................... 5

1.1. Origen y evolución de las aplicaciones web. ......................................................... 5
1.2. Instalación de aplicaciones web. Características y entorno de su uso. ............... 10
1.3. Correo electrónico web. Gestión de cuentas de usuario. ................................... 11
1.4. Configuración de calendario web. ....................................................................... 13
1.5. Configuración de las diferentes aplicaciones para integrarlas en un servidor de
correo. 14
1.6. Documentación técnica. ....................................................................................... 15
2. Realiza tareas de configuración de aplicaciones de ofimática web. ............................. 16

2.1. Origen y evolución y funcionalidades de las aplicaciones ofimáticas web. ......... 17
2.2. Características distintivas de las aplicaciones de ofimática web. ........................ 17
2.3. Configuración y, si es posible, instalación de aplicaciones de ofimática web..... 17
2.4. Gestión de usuarios y permisos ............................................................................ 18
2.5. Utilización de las funcionalidades de las aplicaciones de ofimática web. ........... 20
2.6. Utilización colaborativa de las aplicaciones de ofimática web. ........................... 23
2.7. Documentación de la configuración, de las incidencias aparecidas y de las
soluciones aportadas. ........................................................................................................ 24
UF2: GESTORES DE ARCHIVOS WEB .......................................................... 26
1. Instalación de servicios de gestión de archivos web. ................................................... 27

1.1. Aplicaciones de gestión de archivos web. ........................................................... 27
1.2. Tipos de aplicaciones de gestión de archivos web. ............................................. 28
1.3. Instalación y configuración de las aplicaciones de gestión de archivos web. ..... 32
1.4. Administración de aplicaciones de correo web: creación de usuarios. Permisos.
Tipos de usuario. ...................................................................................................................
34
1.5. Seguridad del gestor de archivos......................................................................... 35
1.6. Documentacion e interpretación de la documentación técnica. ......................... 36
UF3: GESTORES DE CONTENIDOS ............................................................. 38
1. Instalación de gestores de contenidos......................................................................... 38

1.1. Instalación de sistemas operativos libres y propietarios. ..................................... 39
1.2. Creación de usuarios y grupos de usuarios.......................................................... 40
1.3. Utilización de la interfaz gráfica. .......................................................................... 43
1.4. Funcionalidades proporcionadas por el gestor de contenidos. .......................... 44
1.5. Gestión de contenidos. Extensiones .................................................................... 45
1.6. Configuración de módulos y menús. Sindicación. ............................................... 49
1.7. Copias de seguridad............................................................................................. 50
1.8. Búsqueda e interpretación de documentación técnica. ...................................... 51
UF4: PORTALES WEB DE APRENDIZAJE ..................................................... 53
1. Instalación de sistemas de gestión de aprendizaje a distancia. .................................... 53

1.1. Elementos lógicos: comunicación, materiales y actividades................................ 56
Página 2 de 105
1.2. Instalación en sistemas operativos libres y propietarios. ..................................... 57

1.3. Creación y configuración de perfiles de usuario. ................................................. 60
1.4. Activación y uso de funcionalidades. Foros. ........................................................ 61
1.5. Creación de cursos siguiendo especificaciones. .................................................. 64
1.6. Copias de seguridad. Mecanismos de restauración de cursos y datos. .............. 68
1.7. Búsqueda e interpretación de documentación técnica. ...................................... 69
UF5: FUNDAMENTOS DE HTML Y HOJAS DE ESTILO ................................ 71
1. Origen y evolución de HTML ....................................................................................... 71

1.1. Definiciones y estándares SGM. ........................................................................... 74
1.2. Versiones HTML. ................................................................................................... 76
2. Estructura de un documento HTML ............................................................................. 77

2.1. Identificación SGML.............................................................................................. 77
2.2. Cabecera. .............................................................................................................. 80
2.3. Cuerpo del documento. ....................................................................................... 82
3. Texto ........................................................................................................................... 83
3.1. Bloques de texto. ................................................................................................. 83
3.2. Formatos y elementos. ......................................................................................... 83
4. Hipervínculos ............................................................................................................... 85
4.1. Relativos y absolutos. ........................................................................................... 86
5. Imágenes ..................................................................................................................... 86
5.1. Incorporación de imágenes. ................................................................................. 87
5.2. Uso de mapas sensibles........................................................................................ 88
6. Tablas. ......................................................................................................................... 90
6.1. Filas, columnas y celdas. ....................................................................................... 91
6.2. Combinación de celdas. ....................................................................................... 91
7. Listas. .......................................................................................................................... 92
7.1. Listas numeradas. ................................................................................................. 92
7.2. Listas no numeradas. ............................................................................................ 93
7.3. Listas de definición o glosario. ............................................................................. 94
8. Formularios. ................................................................................................................ 95
8.1. Propiedades de los formularios. ........................................................................... 95
8.2. Elementos de los formularios. .............................................................................. 96
9. Marcos ........................................................................................................................ 97
9.1. Definición de marcos (frames). ............................................................................. 97
9.2. Uso de marcos. ..................................................................................................... 98
10. Editores y gestores de HTML ...................................................................................... 98

10.1. Editores simples. ................................................................................................... 99
10.2. Editores avanzados. .............................................................................................. 99
10.3. Gestores de lenguajes HTML. ............................................................................ 100
Página 3 de 105
11. Origen y evolución de los CSS................................................................................... 100
BIBLIOGRAFÍA............................................................................................ 104
Página 4 de 105
UF1: Ofimática y herramientas web
1. Instalación de aplicaciones web.
1.1. Origen y evolución de las aplicaciones web.
Aplicaciones web
En un equipo local, para poder trabajar y realizar tareas específicas con

nuestro equipo debemos de disponer de unos programas instalados. De esta
forma, podemos realizar tareas de escritura de documentos, si tuviéramos
una aplicación instalada de procesador de texto como Microsoft Word o
OpenOfficeWriter. Si quisiéramos navegar por internet, deberíamos tener
instalada un navegador web.
Podemos extrapolar este concepto anterior a la red de ordenador. Por tanto,

las aplicaciones no van a estar instaladas en forma local, sino en el servidor de
la red. Una condición que deberíamos tener en cuenta es recomendable que
el servidor tenga el servicio de Servidor web instalado, para que de esta
forma podamos acceder a la aplicación desde cualquier equipo.
A estas aplicaciones instaladas en el servidor y que por tanto podemos usar

desde cualquier equipo los denominamos Aplicaciones Web y la pueden
utilizar los usuarios mediante Internet o alguna intranet utilizando un
navegador web para conseguir los servicios oportunos.
Estas aplicaciones web, han ido evolucionando, de forma considerable la

forma de trabajar con Internet. Aumentando el contenido de las páginas con
texto estático a un contenido bastante más visible e interactivo.
Este concepto de aplicación web, fue inventado, en 1987 por Larry Wall
cuando Internet todavía no era accesible para todos los públicos. Pero, a
partir de 1995, el programador Rasmus Lerdorf lo puso a disposición del
lenguaje PHP y fue entonces cuando este concepto tomó mucha más
importancia.
Un año después, en 1996, los desarrolladores Sabeer Bhatia y Jack Smith,

pusieron en marcha el servicio de correo, denominado Hotmail que permitía
Página 5 de 105
(por primera vez), que el público en general, pueda acceder y realizar

consultas sobre el correo electrónico sin necesidad de que los usuarios se
puedan desplazar.
Otros servicios importantes que han ido ocurriendo a lo largo de

los años son:
• 2001 aparece la Wikipedia.
• 2003 se funda My Space que va tomando auge en los años
2005 y 2008
• 2005 se lanza Youtube de forma oficial.
• 2006 empieza a funcionar Twitter
• 2007 aparece el iphone
Existen numerosas aplicaciones web, de diferentes tipos, como pueden ser

los gestores de correo, web mails, wikis, blogs, entre otros.
Según su tipo de acceso, las aplicaciones web pueden ser:
• Públicas. Algunas de las aplicaciones web públicas pueden ser: los

distintos portales de Internet, diarios digitales, portales de Internet
• Restringidas.Como pueden ser las intranets que ofrecen una serie de
servicios para mejorar las gestiones internas de una empresa. La
mayoría tiene acceso restringido a determinadas aplicaciones web en
las extranets.
En cuanto a la popularidad de las aplicaciones web, destacamos las siguientes

opciones:
• Fácil acceso ya que cuenta sólo con un navegador web.

• Independencia del sistema operativo
• Fácil actualización y mantenimiento
World Wide Web (www) es un grupo de protocolos que permite consultar de

forma remota los archivos de hipertexto. Para ello, utiliza Internet como
medio de transmisión.
Página 6 de 105
Algunos servicios y protocolos que podemos encontrar en Internet, son:
• Envío de correo electrónico (SMTP)

• Transmisión de archivos (FTP y P2P)
• Conversaciones en línea (IRC)
Las páginas web estáticas son aquellas que muestran información al

navegante, de tal forma que, este se limita a conseguir dicha información sin
necesidad de interactuar con la página web visitada.
Las páginas web dinámicas contienen elementos que permiten que exista una
comunicación activa entre usuario y aplicación. En este caso, el contenido
comienza a generarse a partir de lo que el usuario introduce de ella.
Desarrollos de aplicaciones web
Debido a la creación de Internet, aparecieron un gran número de

posibilidades de acceder a la información desde casi cualquier lugar.
En un primer momento, se empezó a trabajar con la arquitectura cliente-

servidor, que es una aplicación distribuida en la que las diferentes tareas, se
van a repartir entre los distintos proveedores de recursos o servicios. El
Página 7 de 105
cliente realiza la petición a otro programa, y es el servidor, el que debe darle

respuesta.
Las aplicaciones web se encargan de denegar de forma dinámica una serie

de páginas web en formato estándar como pueden ser HTML o XHTML,
soportados por los navegadores web que sean comunes.
• Web 2.0.
Es un estado de la World Wide Web en el que las páginas que han
sido diseñadas con un estilo distinto a las que componían el estado
anterior que se denomina Web 1.0 o Web de “sólo lectura”.
La Web 2.0 o Web “social” representa el desarrollo que han tenido las
aplicaciones tradicionales tradicionales hacia las aplicaciones web que están
más enfocadas al usuario.
Esta Web 2.0 se considera más, una forma de entender y de trabajar

que, una tecnología en sí. Son una serie de aplicaciones que ofrecen a
los diferentes usuarios la posibilidad de escribir en Internet (blogs,
wikis, etc) y compartir sus producciones (vídeos, fotos, etc.).
Página 8 de 105
Las principales características de esta Web 2.0 consisten:

o Se considera la web como una plataforma.
o La información es el procesador.
o Los diferentes efectos ocasionados en la Red los traslada la
arquitectura de participación de usuarios.
o Este proceso de innovación surge a través de una serie de
características distribuidas por una serie de desarrolladores
independientes.
o El principal fin de esta cadena es adaptar distintos softwares.
• Hacia la Web 3.0.
También conocida como la web semántica. Se encuentra en pleno

desarrollo y su tarea principal es analizar con detalle las diferentes
tareas de los usuarios.
Es una web más “inteligente” ya que permite la posibilidad de realizar

búsquedas más cercanas al lenguaje normal.
En este caso, la información va a disponer de contenido semántico

asociado y la web va a contar con la posibilidad de poder relacionar
conceptos de funtes diferentes para poder deducir información
mediante una serie de reglas que están asociadas al contenido.
Las tecnologías principales que permiten el desarrollo de la WEB 3.0

son, entre otros:
o RDF (Resource Description Framework): Su función principal se

basa en convertir los recursos en diferentes expresiones
siguiendo la forma de sujeto, predicado y objeto.
o RDF Schema: Estudio que se encarga de proporcionar los
elementos básicos del vocabulario.
o OWL (Web Ontology Language): Lenguaje cuya función principal
consiste en publicar y compartir una serie de datos utilizando
ontologías en la www con la función de conseguir facilitar el
modelo que se ha construido en RDF y codificado en XML.
Página 9 de 105
o XML (Extensible Markup Language): Es un lenguaje estándar que

permite intercambiar información entre diferentes plataformas.
1.2. Instalación de aplicaciones web. Características y entorno de

su uso.
Para llevar a cabo la gestión de las diferentes aplicaciones y servicios web

que ofrecen la posibilidad de publicar distintos tipos de contenidos (blogs,
wikis, foros, etcétera.) en las diferentes páginas web, los servidores web que
necesitan establecer una comunicación con uno de los servidores de la base
de datos que es el encargado de almacenar toda la información disponible
para poder almacenar esos servicios, mediante un intérprete de alguno de
los lenguajes de programación de servidores disponibles, como Python, PHP,
Perl.
Cuando llevamos a cabo un proceso de instalación, debemos llevar a cabo

una serie de pasos como:
1. Ejecutar el fichero que hemos descargado previamente. Debe iniciar a

ejecutarse de forma automática. Si nos piden el idioma en el que
queremos iniciar la instalación, seleccionamos el que corresponda.
Página 10 de 105
2. Seleccionamos Siguiente. Y, si el caso lo requiere, podemos

seleccionar la carpeta de destino en la que se va a instalar el programa.
3. A continuación, Install para continuar. Seguidamente, seleccionamos

Finish para finalizar el proceso de ejecución.
Características:
• Permiten una comunicación más fluida y dinámica en cuanto a la

estructura cliente- servidor
• Posibilidad de mantenimiento y actualización a través de Internet
• Generan una serie de páginas dinámicas en un formato estándar
como, HTML o XHTML soportada por los navegadores web más
comunes.
• Utiliza lenguajes interpretados como JavaScript para añadir diferentes
elementos dinámicos a la interfaz de usuario.
1.3. Correo electrónico web. Gestión de cuentas de usuario.
El correo electrónico es uno de los acontecimientos más importantes que,

hoy en día, utiliza un gran número de personas.
Mediante el correo electrónico podemos comunicarnos con amigos,

compañeros, familia simplemente teniendo un ordenador con conexión a
Internet. Es uno de los servicios más demandados cuando trabajamos con
Internet.
Página 11 de 105
Entre sus ventajas principales podemos encontrar que es:
• Inmediato y que se recibe al poco tiempo de enviarlo.

• Cómodo ya que permite que podamos enviar un correo desde
cualquier sitio.
• Dinámico, porque también cuenta con la posibilidad de recibir correos
mediante el ordenador.
Las cuentas de correo electrónico, se utilizan como si tuviésemos un apartado

de correos de los de toda la vida. Imaginemos que existen varias compañías
que prestan estos servicios de correo a los direfentes usuarios. En el caso en
el que quisiéramos abrir uno, necesitamos, previamente, elegir una
compañía. Una vez que elijamos la compañía, necesitamos una dirección de
correo que nos permita podernos comunicar.
En este caso, la sintaxis que debe cumplir las diferentes direcciones de

correo, viene expresadas de la siguiente forma:
nombre_elegido@compañía.com
Donde nombre_elegido es el nombre elegido para nuestra dirección,

seguido de la @ y, a continuación, el nombre de la compañía a la que
pertenezcamos seguido de .com
Una vez que ya tenemos asignada una cuenta de correo, ya podemos

comunicarnos vía online, sin necesidad de desplazarnos.
Vamos a realizar los pasos correspondientes para crearnos una cuenta de

correo electrónico. En este caso, vamos a utilizar, como compañía, Gmail.
Página 12 de 105
1.4. Configuración de calendario web.
El calendario web, cuenta con cuatro entradas diferentes:
- Cita. Es una función en la que la única persona que partcipa es el

usuario por lo que no es necesario que se reserve ningún tipo de
recursos.
- Reunión. En la reunión, es necesario que participen diferentes
personas siendo una de ellas la encargada de poner en marcha la
reunión. Es conveniente que la reunión tenga asignado un día y una
hora determinada.
- Evento. Un evento puede tener una duración de un día completo o
incluso de varios días.
- Tarea. En una tarea específica, es conveniente que participe sólo el
usuario. En este caso, tampoco es necesario que asigne ninguna hora
programada.
Configuración del calendario web.
Para llevar a cabo la configuración del calendario, vamos a poner un ejemplo

y realizaremos la configuración necesaria.
Veamos como ejemplo práctico, la configuración para una semana laboral

con sus los días no laborables de España junto con su zona horaria.
1. Ejecutamos el menú Herramientas/ Opciones

2. Y hacemos clic en Opciones de calendario.
3. Marcamos las casillas correspondientes a los días laborables: lunes,
martes, miércoles, jueves, viernes.
4. Se abre una lista desplegable Primer día de la semana. Ya aparece, por
defecto, lunes.
5. A continuación, se muestra otra lista desplegable Primera semana del
año y seleccionamos correspondiente.
Página 13 de 105
6. En las listas desplegables que se corresponden con las horas de inicio

y fin de la jornada laboral, seleccionamos también las que se
correspondan con el horario.
7. Es conveniente que seleccionemos las festividades preddefinidas en la
parte de Opciones de calendario. Y, a continuación, Agregar días no
laborables. Activamos la casilla de España y Aceptar.
8. En Opciones avanzadas, seleccionamos Zona horaria. Y comprobamos
que los cambios se han realizado de forma correcta. Y, por último,
Aceptar.
1.5. Configuración de las diferentes aplicaciones para integrarlas

en un servidor de correo.
En este capítulo estamos tratando las distintas aplicaciones que podemos

utilizar en el servidor de correo. Venimos utilizando un servidor de correos
gratuito como es Google. En este caso, además de un servidor de correo
podemos tener distintas aplicaciones, pero en el mismo Gmail (servidor de
correo de google) está integrada la aplicación de Contactos y Tareas
disponibles.
En el apartado de Correos, podemos gestionar todos correos electrónicos

que nos llegan, bandeja de entrada, bandeja de salida, elementos enviados,
papelera… estas son las carpetas más elementales de en los programas de
correos. Además, podemos crear nuestras propias carpetas para tener más
organizado nuestras conversaciones por email, separadas por temáticas o
asuntos.
Otros de los capítulos con los que también cuenta el gestor de correo, es
con el listín telefónico, en el apartado de Contacto, tendremos disponible
todos los contactos a los que alguna vez hemos mantenido una
Página 14 de 105
comunicación por mensaje electrónico. Por otra parte, en el caso de

Google, si tenemos un teléfono con sistema operativo Android, tenemos la
posibilidad de enlazar nuestro listín telefónico con los contactos web y
viceversa, esta forma disponemos de toda la información enlazada y por
tanto nos facilitará las tareas empresariales y personales desde cualquier
dispositivo con la misma naturaleza.
En el apartado de Contacto, tenemos a nuestra disposición una solicitud de

registro bastante completa, en la cual, disponemos además de la
información personal básica, el almacenamiento de varios teléfonos,
dirección de correo electrónica, fotografía incluso dirección web o blog
personal.
Por último, en el apartado de Tareas, podemos planificar junto con el

calendario, un recordatorio de las acciones a planificar en el día, semana,
mes o año. Con esta aplicación, y desde Gmail, tenemos disponible en una
sola aplicación, pero integradas con varias, toda la gestión de las tareas
diarias, junto con la persona a la que debemos de comunicarnos para
llevarla a cabo si es posible. Y otra de las ventajas que presenta este gestor
de correo es la versatilidad de estar disponibles en varias plataformas,
como web, Tablet o móvil, es decir, Multiplataforma.
En contraposición, debemos de mencionar el inconveniente de presenta

este tipo de aplicaciones, debemos de tener muy presente los rasgos
relativo a la seguridad en todos los dispositivos en los tenemos acceso al
gestor de correo. De esta forma, no podemos tener un descuido ya que, si
nos implanta la identidad, una persona no autorizada, tiene acceso a todas
las herramientas anteriormente mencionadas.
1.6. Documentación técnica.
Para todo el proceso que hemos visto en apartados anteriores, es

recomendable realizar un documento que lo englobe todo. Las ventajas de
realizar este documento es que dejamos constancia de:
• Pasos previos.
• Configuraciones para instalar y utilizar las aplicaciones web.
• Pasos para la comprobación de que todo el proceso está
funcionando correctamente.
Página 15 de 105
Sobre todo, cabe resaltar que en el proceso de configuración hemos

dejado constancia de las opciones que hemos seleccionado y las razones
que nos han llevado a tomar tal decisión.
Este documento debe ser donde hemos tenido que escribir en el momento,
los pasos e incidencia ocurrida. Esta guía debe servir como cuaderno de
consulta para futuras ampliaciones o posibles incidencias ocasionadas.
Otros posibles administradores pueden utilizar este tutorial como posible

ayuda explicación de todo el proceso y el estado en el que se encuentra el
servidor y toda la red de comunicaciones.
Cuando aparecen las incidencias en el equipo servidor, podemos ayudarnos

de este documento para buscar una solución y si el proyecto está totalmente
actualizado, podemos ver como se solucionaron algunos incidentes
parecidos ocurridos anteriormente.
La realización de este documento se puede hacer mediante de una aplicación

informática que facilite la recogida de las incidencias.
Actualmente existe en la red una gran variedad de foros expertos, e incluso

las propias distribuidoras poseen comunidades de ayuda al usuario. De esta
forma, los incidentes se pueden solventar o bien exponiéndolo en el foro
para que algún experto nos responda o bien consultado los temas de
conversación para buscar el caso de error que tenemos entre manos y ver si
alguien ha estado en la misma situación que nosotros.
2. Realización de tareas de configuración de

aplicaciones de ofimática web.
Para realizar tareas cotidianas en la oficina, utilizábamos un paquete que

consta de varios programas informáticos que facilita las operaciones a realizar
habitualmente en la empresa.
Estos paquetes ofimáticos, presentan la ventaja de agrupar en una sola

aplicación varios programas, pero a su vez tienen el inconveniente de tener
que realizarse en el equipo local. En este apartado veremos cómo se pueden
gestionar y utilizar las aplicaciones ofimáticas alojadas en un servidor web y,
Página 16 de 105
por tanto, podemos acceder a ellas desde cualquier lugar conectado a la red
mundial como es internet.
2.1. Origen y evolución y funcionalidades de las aplicaciones

ofimáticas web.
Podemos definir aplicaciones ofimáticas como el conjunto de técnicas,

programas y herramientas para realizar funciones que optimicen, automaticen
y mejoren las tareas en la oficina de la empresa.
Estas herramientas permiten idear, crear y tratar la información necesaria en

la oficina mediante una conexión local o web.
El origen de estas aplicaciones ofimáticas está en la necesidad de realizar las
tareas de procesamiento de texto, hojas de cálculo y bases de datos de una
forma automática, ya que hasta su aparición se realizaba de forma manual.
En la época de los 70 con el auge de las computadoras y la sustitución de un

ordenador personal por las máquinas de escribir.
2.2. Características distintivas de las aplicaciones de ofimática

web.
Las aplicaciones ofimáticas web presentan unas características frente a los

paquetes ofimáticos locales que hace su utilización entre los usuarios vaya en
auge. No necesita de instalación por parte del usuario, por esta razón no
ocupa memoria en el disco duro y son fáciles de utilizar ya que se asemeja
mucho a las aplicaciones ofimáticas locales.
La gratuidad en la mayoría de los casos de estas aplicaciones web es razón

de peso para que lo utilicen bastantes usuarios. Los requisitos mínimos que
necesita estas aplicaciones son pocas ya que solo necesitan de una conexión
internet para poder utilizar estas aplicaciones web.
Estos tipos de programas ofimáticos están más sujetos a virus informático

que los programas locales, y los archivos no vamos a tener en nuestro equipo
a menos que nos lo descarguemos. Hacemos usos de los gestores de archivos
para almacenar los archivos en la nube.
2.3. Configuración y, si es posible, instalación de aplicaciones de

ofimática web.
Página 17 de 105
Para este apartado nos vamos a centrar en las aplicaciones ofimática que
tiene a nuestra disposición la plataforma de Google. Este producto se llama
Google Docs.
Dentro de este paquete ofimático, disponemos de Documentos, Hojas de

cálculos, Presentaciones, Correos y demás herramientas que esta plataforma
que nos ayudan en las tareas empresariales, aunque no sean de mucha
utilidad, pero en ocasiones puntuales, viene muy bien su uso, como el
traductor
Para este tipo de aplicaciones no hace falta instalación, esa era una de las
ventajas que antes hemos enumerado, por tanto, solo lo que hace falta en
este caso específico de google es crear una cuenta mediante el relleno de
una solicitud con los datos típicos tanto personales como usuario y
contraseña que nos permita el acceso de una forma individual e
intransferible.
Una vez dentro del portal de las herramientas de google, con un simple
acceso a la herramienta ofimática, ya estará preparada para su uso, sin
necesidad de licencia.
Si es verdad que la primera vez que accedemos a las herramientas ofimáticas,

podemos configurar la visualización de las mismas en el apartado de Ajustes
del portal de Google.
2.4. Gestión de usuarios y permisos
Las credenciales de estas herramientas online es el paso más importante para

hacer uso del programa. En el caso de las herramientas de Google Docs no
hay diferencias de tipos de usuarios, pero sí que existen permisos.
Página 18 de 105
El usuario propietario del archivo es el administrador de los permisos de otros

usuarios sobre este fichero. La condición para acceder a cualquier
herramienta ofimática online es ser usuario del portal que suministra el
paquete ofimático, en este caso, Google.
Por tanto y volviendo al tema de los permisos. El propietario del archivo

permitirá a otros usuarios Google tener acceso al archivo en cuestión. Los
permisos de google son los siguientes:
1. Edición
2. Visualizar
3. Comentar
El permiso de edición hace posible que el usuario pueda escribir y realizar

modificaciones en el documento. El propietario posee este permiso y
cualquier usuario que tenga el permiso puede realizar funciones de
propietario.
El permiso de visualización solo puede realizar la lectura del documento
El permiso de comentar, solo puede realizar comentarios al respecto, pero

nunca en el documento.
Una vez asignados los permisos, estas herramientas ofimáticas web tienen la
peculiaridad de poder compartir el acceso con diferentes usuarios.
Página 19 de 105
Como se muestra en la imagen, estas herramientas facilitan la compartición

de los archivos con los demás usuarios del dominio. Dispone de distintas
opciones para compartir:
1. Se puede hacer público para cualquier usuario en la web que lo

encuentre.
2. Otra opción es la compartición mediante un enlace, ya que se genera
un enlace al archivo y aquel usuario que posea el enlace, puede
acceder al archivo.
3. Solo visible para los usuarios de un dominio (Ilerna en el caso de la
imagen) y a continuación podemos combinar las opciones anteriores,
es decir, el usuario de Ilerna que contenga el enlace.
4. Por último, está el acceso privado, es decir, que el propietario del
archivo, desea restringir el acceso a todos los usuarios existente en la
red.
2.5. Utilización de las funcionalidades de las aplicaciones de

ofimática web.
Página 20 de 105
En este apartado, nos hemos centrado en Google Docs., aunque actualmente

se llame Google Drive, la razón por la que hemos querido mantener el
nombre anterior es que en la siguiente unidad formativa como una
herramienta de gestor de contenido online. Por tanto, en las aplicaciones
ofimática en red, nos centraremos en el anterior Google docs, que ahora se
le denomina Documentos, Hojas de Cálculos y Presentaciones.
Estos son las herramientas más importantes para la oficina y sobre las que
nos centraremos.
Para más información sobre los productos de Google, incluido los

que mencionamos en este manual, los puedes encontrar en:
https://www.google.es/intl/es/about/products/
1.1.
Tanto información como soporte o descarga.
Google Drive
Página 21 de 105
2.5.1. Documentos
Además de disponer de las herramientas necesarias de un procesador de

texto, la ventaja de estos programas ofimáticos en red, es la facilidad con la
que un grupo de usuarios pueden trabajar sobre el mismo documento. Ya que
en todo momento y si los permisos lo permiten, se puede ir modificando una
imagen, mientras que otro usuario con acceso puede ir escribiendo. Las
modificaciones se pueden ir viendo en tiempo real y el identificador del
usuario que lo está modificando.
Se caracteriza por la facilidad de trabajar en este entorno de Google. Posee

un diseño de entorno gráfico muy atractivo y fácil de utilizar, ya que las
distintas opciones presentan una disposición gráfica muy amigable.
Presenta una característica de Multiplataforma, tanto desde Smartphone,

Tablet o PC, se puede trabajar en Documentos Google, facilitando el
tratamiento y se resuelvan las incidencias lo más rápido posible desde
cualquier dispositivo informático.
Otra de las opciones más interesantes es la de guardado automático, el

usuario no se debe de preocupar por guardar el documento, ya que tiene
implementado un proceso de autoguardado.
La total conversión y compatilibilidad con herramientas ofimáticas de otros

formatos, hacen que el uso de esta herramienta vaya en aumento. La
compatibilidad con Microsoft Word es total y con OpenOffice también,
aunque este último caso era de esperar, ya que las dos herramientas son de
código libre.
Gracias a los complementos que independiente del programa disponemos

en el mercado, hacen que su uso sea muy eficiente y de poco tamaño, ya que
instalaremos, aquellas extensiones que más nos convengan.
Al ser un documento online, todos los documentos se almacenarán en el

gestor de información (nube) de Google. Además, si el usuario desea tenerlo
en su equipo, solo tendrá que descargar el archivo.
2.5.2. Hojas de Cálculo
Al pertenecer al mismo paquete ofimático, presenta las mismas ventajas que

el punto anterior, pero todo orientado a las hojas de cálculos.
Página 22 de 105
La parte gráfica es unas de las pocas opciones que varían con respecto al
procesador de texto, en este caso tanto los números como fórmulas, y gráfica
son aspectos importantes a tener en cuenta.
Un documento de Hoja de Cálculo, normalmente, no lo utilizamos como lo

deberíamos. Dispone de numerosas opciones y herramientas que facilitan las
tareas a realizar en la oficina.
2.5.3. Presentaciones
Este programa de presentaciones es uno de los que no varíen con respecto

a los programas ofimáticos locales, como Microsoft u OpenOffice.
Simplemente es un programa de creación de presentaciones con diapositivas,

donde se puede incrustar imágenes, gráficas y texto.
2.6. Utilización colaborativa de las aplicaciones de ofimática web.
Como ya hemos comentado anteriormente, al tratarse de aplicaciones

ofimáticas en red, la opción de poder trabajar en grupo de una manera
remota, hace que se utilice este tipo de programas ofimáticos.
Google, se basan en la compartición de las tareas y el trabajo en equipo.

Esa es su filosofía. Por esta causa, el trabajar en tiempo real con un
grupo de usuarios desde el mismo documento, hace que estas
herramientas sean originales y vanguardistas.
Tanto información como soporte o descarga.
Dependiendo de los permisos concedidos por el propietario del documento,

el usuario podrá realizar unas tareas y otras.
Cuando el propietario trabaja en grupo, normalmente se le permite todos a

los usuarios elegido para modificar el documento. Es labor del administrador
la gestión de todas las indicaciones a tener en cuenta.
Página 23 de 105
2.7. Documentación de la configuración, de las incidencias

aparecidas y de las soluciones aportadas.
Llegado a este punto solo nos queda confeccionar el documento que lo

englobe todo. Las ventajas de realizar este documento es que dejamos
constancia de todos los pasos previos, tanto de la instalación como de la
configuración.
En apartados anteriores hemos venido detallando la definición de las

aplicaciones ofimáticas en red, así como su instalación (que en este caso no
habría) como su configuración, accesos y permisos. Y por último los pasos
para la comprobación de que todo el proceso está funcionando
correctamente. Sobre todo, cabe resaltar que en el proceso de configuración
hemos dejado constancia de las opciones que hemos seleccionado y las
razones que nos han llevado a tomar tal decisión.
los pasos e incidencias ocurridas. Esta guía debe servir como cuaderno de

ayuda explicación de todo el proceso.
Cuando aparecen las incidencias en el equipo, podemos ayudarnos de este

documento para buscar una solución y si el proyecto está totalmente
actualizado, podemos ver como se solucionaron algunos incidentes
parecidos ocurridos anteriormente. En estos casos hay un apartado de
Preguntas Frecuentes, para recabar todas las dudas surgidas con sus posibles
soluciones.


las propias distribuidoras poseen comunidades de ayuda al usuario.
De esta forma, los incidentes se pueden solventar o bien exponiéndolo en el

foro para que algún experto nos responda o bien consultado los temas de
alguien ha estado en la misma situación que nosotros. Al utilizar una
herramienta libre y que está respaldada por una gran empresa, es esta misma
Página 24 de 105
la que proporciona dicha ayuda para solventar los errores surgidos durante
la configuración o el manejo del programa. La empresa, es este caso Google,
es la primera interesada en que los usuarios puedan ejecutar bien sus
herramientas y le puedan sacar el mayor fruto posible.
Página 25 de 105
UF2: Gestores de archivos web

Existen una serie de servicios web que cuentan con la posibilidad de
almacenar en Internet una serie de ficheros de diferentes tipos como pueden
ser canciones, vídeos, fotografías, documentos, etc. Por lo que la nube está
convirtiéndose, cada día más en una de las principales alternativas para las
distintas empresas que desean guardar información.
Mediante este sistema de gestión de archivos, podemos acceder a los

diferentes ficheros desde cualquier dispositivo que disponga de una
conexión a Internet.
Algunos de los servicios (algunos con un coste y otros gratuitos), que ofrecen
este tipo de almacenamiento, pueden ser:
• Google Drive
• SkyDrive
• Youtube,
• Dropbox, etc.
Las empresas que utilizan esta gestión de documentos en la nube, cuentan

con una serie de características como:
• Permite el almacenamiento y la clasificación de los diferentes archivos

que disponen de la información necesaria para la empresa.
• Tiene la posibilidad de compartir archivos con seguridad,
confidencialidad e integridad.
• La empresa puede disponer de la información desde cualquier lugar y
dispositivo que tenga conexión a Internet.
Página 26 de 105
• Puede controlar las diferentes versiones de documentos para llevar un

seguimiento de las diferentes tareas.
Aunque existen distintos factores que ayudan a este proceso de gestión de

archivos en la web, también es cierto que este proceso presenta una serie de
inconvenientes, entre los que econtramos:
• Es necesaria una conexión a Internet siempre que queramos acceder a

la información almacenada en la web.
• Necesitan adaptarse a la interfaz propuesta de la nube.
• La política sobre los derechos disponibles, se otorgan en su totalidad
al proveedor.
• Depende de los proveedores de servicios. A más usuarios que
compartan la red, si no se dispone de un esquema de crecimiento
correcto, puede producirse una degradación del servicio.
1. Instalación de servicios de gestión de archivos

web.
1.1. Aplicaciones de gestión de archivos web.
Disponemos de varios servicios de almacenamiento web que están

espacializados dependiendo del uso que se le de a la distinta información
que queramos almacenar en la web.
Algunos son bastante recomendables a la hora se sincronizar las carpetas

disponibles en el escritorio, mientras que otros, son recomendables a la hora
de compartir y organizar fotos, realizar colecciones de música, gestión de
documentos, etc.
• Sincronización de ficheros en la nube.

Son servicios que tienen reservado un espacio (varios gigabytes) para
el almacenamiento de la información y sincronización de las diferentes
carpetas existentes en la web. Algunos de ellos, de forma integrada
en el escritorio, como Amazon, iCloud, Dropbox, Google Drive, etc.
Página 27 de 105
1.2. Tipos de aplicaciones de gestión de archivos web.
Almacena y escucha música en la web
A la hora de escuchar música que tengamos almacenada en la web, podemos

contar con una serie de servicios de alamcenamiento, mediante los cuales,
los usuarios tienen la posibilidad de escuchar en streaming (en tiempo real)
aquellos archivos de música que tienen almacenados.
Entre otros, podemos contar con los diferentes servicios:
- DropTunes. Es una extensión de DropBox que ofrece a los usuarios la

posibilidad de oir música mediante un reproductor web. No es
necesario que se descarguen contenidos, basta con acceder al
DropBox y, automáticamente, el sistema nos muestra un listado con
las canciones que existan en la cuenta. Este servicio es uno de los más
recomendados para realizar streaming sobre nuestra música y es
gratuito.
- Mougg. Esta empresa ofrece a los distintos usuarios hasta 2GB de

forma gratuita. Muestra y comparte diferentes colecciones de música,
vídeos y conciertos online a través de la web. Además, dispone de una
tienda en la que los usuarios pueden realizar sus compras de
canciones.
- CloudPlayer. Puede reproducir, en ordenadores, tablets, smartphone,

etc. diferentes contenidos musicales que se encuentran previamente
almacenados en Amazon Cloud Drive. Permite el almacenamiento de
Página 28 de 105
música, vídeos y documentos que son accesibles desde la cuenta de

usuario. Y también pueden comprarlos en la tienda online de MP3.
- Play. Servicio que ofrece todo tipo de contenido, como música,

películas, juegos, etc. Es una tienda online y, además, funciona como
un sistema de almacenamiento.
Surgió de la unión de varias tiendas como Google Music, eBookstore, y

Andoid Market con el fin de almacenar toda la información en un lugar
común Tanto información como soporte o descarga.
Play regulariza, entre otros factores, los archivos de diferentes

dispositivos, y permite comprar algún contenido desde el teléfono para
poder visualizarlo posteriormente desde cualquier lugar.
- iTunes. Herramienta que gestiona todo tipo de documentos de audio

y vídeo en el sistema operativo Mac IOS de la empresa Apple. Por lo
que tiene una perfecta sincronización con todos los productos
suministrados por esta empresa de distinta naturaleza como pueden
ser: iPhone, iPad y los diferentes ordenadores de sobremesa y
portátiles de esta marca, llegando incluso a poder gestionar a través
de una televisión con adaptador web Apple TV.
Esta herramienta añade una opción para comprar los diferentes

archivos de forma directa.
Debido a su gran funcionamiento, permite descargarlo para cualquier

sistema operativo, aunque siempre orientado a la sincronización con
algún producto Apple.
https://www.apple.com/itunes
Página 29 de 105
Gestión de fotos en la web
Una de las cosas más comunes que nos podemos encontrar hoy en día es la
gran cantidad de fotografías de las que disponemos mediante el uso de
cámaras digitales junto con los smartphones. Gracias a los sistemas de
almacenamiento de la web, solemos tener copias de seguridad de dichas
fotos. Por ejemplo,
• Si utilizamos iPhone, tenemos las copias almacenadas en el iCloud.

• Para los usuarios de Windows Phone, el sistema de alamcenamiento
en la web es a través de SkyDrive.
• DropBox es otro sistema de almacenamiento que también permite
cargar las fotos de forma automática a través de la aplicación
disponible para Android.
Dropbox
La verdad es que existen bastantes alternativas que nos permiten llevar a

cabo el proceso de la gesitón de fotos a través de Internet, por los que, a
continuación, vamos a citar dos de las opciones mas utilizadas:
Página 30 de 105
• Picasa. Servicio que almacena fotos de Google y

está basado en poder almacenar en una misma
carpeta una gran cantidad de fotos que tienen la
posibilidad de mostrarse como diapositivas.
También se pueden descargar o compartir
mediante correo o enlaces que sean accesibles
desde Internet.
• Flickr. Es uno de los servicios de almacenamiento

de imágenes más conocidos que permite
compartir todo tipo de fotos y vídeos tanto de
forma pública como privada. Permite que se
comparta la información entre una comunidad de
usuarios y que comenten sobre ellas. Cuenta con
una de las marcas de imágenes más modernas
del mundo por lo que es bastante utilizada por
muchos profesionales.
Ambas ofrecen unas prestaciones bastante parecidas. Picasa cuenta con una
serie de herramientas para subir fotos en un ordenador y en la página web.
Y la versión de pago Flickr cuenta con un módulo de estadísticas gracias al
cual podemos conocer cuáles son las fotos preferidas de los usuarios.
Gestión de vídeos en la web
Entre los distintos servicios web que permiten el almacenamiento de vídeos

en la web, podemos encontrar:
- Youtube. Es un servicio de Google que, posiblemente es el que cuenta

con una de las mayores comunidades de vídeos que existe. Dispone
Página 31 de 105
de distintas funciones entre las que se encuentran: búsqueda de

vídeos, subir y compartir archivos propios con los demás usuarios,
valorar los vídeos publicados, etc. Youtube también ofrece la
posibilidad de poder alquilar películas para que podamos verlas en
nuestro ordenador o smartphone.
- Vimeo. Es bastante sencillo de utilizar y ofrece la posibilidad de cargar

vídeos de diferentes formatos. Cuenta con una serie de herramientas
que podemos aplicar para que estos vídeos se vean correctamente
(HD, 3D, etc.) y dispone de unos controles de privacidad para
seleccionar los usuarios que van a poder acceder a estos vídeos.
- Dailymotion. Ofrece numerosas subidas de vídeos HD y 3D. Sigue las

subidas de gente y tiene posibilidad de compartir las distintas
opiniones en los foros. Es accesible desde casi todos los dispositivos.
Youtube, Vimeo y Dailymotion
1.3. Instalación y configuración de las aplicaciones de gestión de

archivos web.
En esta unidad formativa, nos centramos en el gestor de archivos de la

empresa Google, denominado Google Drive. Para este caso en particular, no
necesitamos un proceso de instalación ya que toda la instalación se realiza
de forma online, por lo que, si accedemos a la página web correspondiente
con nuestras credenciales (usuario y contraseña), ya podemos utilizar esta
herramienta.
Para ver un ejemplo de instalación, vamos a llevar a cabo la instalación de

otro gestor de archivos como es DropBox que también es bastante utilizado
en el mundo laboral.
Página 32 de 105
DropBox es una herramienta software que gestiona y sincroniza todos los

dispositivos informáticos mediante una carpeta. Es uno de los gestores de
archivo más utilizados debido a su sencilla utilización donde podremos
almacenar los archivos de forma fácil e intuitiva.
1. Nos creamos una cuenta en DropBox para reservar un espacio en

nuestro disco virtual, para ello accedemos a:
www.DropBox.com
Una vez rellenada la información del formulario, ya podemos acceder

a nuestro disco virtual en el que podremos gestionar nuestro espacio
reservado de disco duro en la nube. Para organizar este espacio
virtual, utilizaremos carpetas para poder clasificar la información de
forma ordenada.
Sólo nos faltaría subir los archivos o sincronizar el dispositivo mediante

una aplicación cliente de DrooBox que nos facilitará la transmisión de
archivos entre el dispositivo real y el disco visrtual en la nube.
El único inconveniente que se da este proceso es la necesidad de

instalar una herramienta cliente en el dispositivo físico.
2. Instalación de una aplicación cliente de DropBox.
En la misma página que indicamos en el apartado anterior y ya con

una cuenta creada, podemos descargarnos de forma gratuita esta
herramienta. Mediante un proceso de instalación rutinario,
sincronizamos nuestro equipo con el disco en la nube a través de una
carpeta que seleccionemos en el proceso de instalación de nuestro
equipo.
3. La gestión básica. Esta herramienta de gestión de archivos de

DropBox, permite sincronizar tanto la inserción de nuevos archivos
como la modificación de los mismos ya que el proceso de instalación
se sincronizará de forma automática cada cierto período de tiempo.
Estos rasgos se pueden configurar en la misma página web. Mientras
Página 33 de 105
que el archivo se esté subiendo, va a aparecer un icono azul que indica

el estado. Una vez que finalice este proceso de sincronización y, por
tanto, ya esté disponible en la nube, aparecerá un icono con la tilde
en verde.
4. Otra de las opciones que podemos desempeñar en la gestión de

archivos es la de compartir la información con otros usuarios DropBox,
mediante enlaces o introduciendo directamente su email.
Estos gestores de archivos cuentan con unas herramientas de seguridad

que hacen que la información almacenada en sus servidores, estén
protegidas ante cualquier amenaza. Apartado que desarrollaremos más
adelante
1.4. Administración de aplicaciones de correo web: creación de

usuarios. Permisos. Tipos de usuario.
En esta unidad formativa, nos estamos centrando en el Google Drive como

gestor de archivos en la red. Es costumbre tanto en esta herramienta como
otras otros gestores web que las credenciales de usuarios y contraseñas, sean
los datos necesarios para hacer uso del programa.
Al tener una cuenta de usuario ya tiene disponible todas las herramientas de

Google para trabajar, tanto herramientas ofimáticas, correos, como gestores
de archivos, redes sociales o calendario.
Para la creación de una cuenta de usuario, solo es necesario rellenar un

formulario como el que se muestra a continuación:
Página 34 de 105
En las herramientas de Google, no hay diferencias de tipos de usuarios, pero

sí que existe permisos. El usuario que es el propietario del archivo es el
administrador de los permisos sobre otros usuarios de este fichero.
Los permisos de Google son los siguientes:
1. Edición
2. Visualizar
3. Comentar.
El permiso de edición hace posible que el usuario pueda escribir y realizar

modificaciones en el documento. El propietario posee este permiso y
cualquier usuario que tenga el permiso puede realizar funciones de
propietario.
El permiso de visualización solo puede realizar la lectura del documento
Epermiso de comentar, solo puede realizar comentarios al respecto, pero

nunca en el documento.
1.5. Seguridad del gestor de archivos.
La seguridad en los programas de administración de archivos en la nube, se

asemeja a la seguridad que hay que mantener en un sistema informático, solo
con la diferencia de no tener que mantener nigún equipo servidor de
almacenamiento, ya que no sabemos la localización de los datos. No
disponemos de mantenimiento hardware.
En estos gestores de archivos se utilizan herramientas de monitorización

como herramientas de seguridad en el programa. De esta forma se protege
uno de los aspectos más a tener en estos tipos de programas que es el flujo
de archivos tanto de entrada como de salida.
Los aspectos a tener en cuenta sobre la seguridad en la nube están centrados

en los datos que contienen estos servidores. La protección de información
crítica frente al robo, la filtración de datos y la eliminación es un aspecto a
tener en cuenta a la hora de pensar en la seguridad. Mantener un sistema
seguro, hace que las operaciones que se realicen en el, sea más ágil y se
actue de una forma más eficiente.
Página 35 de 105
Los servidores de estas aplicaciones contienen datos con información

sensibles como historiales médicos, contraseñas y números de tarjetas de
créditos de los usuarios. Por esta razón, la empresa que gestiona estos
servidores además de contener medidas de seguridad propias, gestionar
medidas de seguridad impuestas por el país que rigan los servidores,
mediante alguna administración pública y leyes en vigor.
Es tal la importancia de la asegurar la integridad de estos datos frente a robos

y manipulaciones indebidad que en el territorio español se dispone de una
agencia que tiene la competencia de asegurar que las empresas mantienen
la ley que rige la protección de datos en España. La administración se
denomina la Agencia Española de Protección de Datos.
Para más información podemos acceder a la página web de la Agencia
https://www.agpd.es
1.6. Documentacion e interpretación de la documentación

técnica.
Para finalizar la unidad formativa de los de gestores de archivos debemos de

confeccionar el documento que lo englobe todo el proceso que hemos
venido desarrollando a lo largo de todos los puntos anteriores. Uno de los
objetivos de este ciclo medio de Sistemas Microinfomático y Redes es la
creación en todas las funciones realizadas de un documento donde se recoja
todos los pasos realizados tanto para la instalación y configuración de los
servicios.
Empezamos este tema con la definición de los gestores de archivos, así como
su instalación y configuración, accesos y permisos. Y por último los pasos para
la comprobación de que todo el proceso está funcionando correctamente.
Sobre todo, cabe resaltar que en el proceso de configuración hemos dejado

constancia de las opciones que hemos seleccionado y las razones que nos
han llevado a tomar tal decisión.
los pasos e incidencia ocurrida. Esta guía debe servir como cuaderno de
Página 36 de 105

ayuda explicación de todo el proceso. Cuando aparecen las incidencias en el
equipo, podemos ayudarnos de este documento para buscar una solución y
si el proyecto está totalmente actualizado, podemos ver como se
solucionaron algunos incidentes parecidos ocurridos anteriormente. En estos
casos hay un apartado de Preguntas Frecuentes, para recabar todas las dudas
surgidas con sus posibles soluciones.


Al utilizar una herramienta libre y que está respaldada por una gran empresa,
es esta misma la que proporciona dicha ayuda para solventar los errores
surgidos durante la configuración o el manejo del programa. La empresa, es
este caso Google, es la primera interesada en que los usuarios puedan
ejecutar bien sus herramientas y le puedan sacar el mayor fruto posible.
Página 37 de 105
UF3: Gestores de contenidos
1. Instalación de gestores de contenidos.

Los sistemas de gestión de contenidos (CMS), Content Management System,
son una serie de herramientas software a través de la cual podemos realizar
creaciones, mantenimiento, publicaciones de las diferentes páginas web
dinámicas que disponen de contenidos digitales y multimedia. Para trabajar
con esos gestores de contenido, no es necesario tener un gran conocimiento
de los distintos lenguajes de programación. Todo el proceso que desarrollan
los CMS se produce desarrollar tanto en un ámbito local (intranet) como
global (Internet).
• Características
Cuando trabajamos con gestores de contenidos, es recomendable que

conozcamos algunas de sus características más importantes que, a
continuación, especificamos.
1. Necesitan un servidor web en el que alojar las páginas, una base de

datos en la que almacenaremos la información y un lenguaje de
programación determinado mediante el cual los usuarios podrán
interactuar con el servidor.
2. Diferencian entre diseño y contenido. El diseño se puede llevar a cabo

mediante plantillas, sin necesidad de escribir código y el contenido se
obtiene de forma dinámica.
3. Permiten incorporar distintas funcionalidades a las páginas web.
4. Colaboración sencilla con usuarios.
5. Permiten publicar contenido.
6. Cuentan con un control estadístico sobre los accesos realizados.
7. Permiten realizar copias de seguridad además de operaciones de

restauración.
8. Los CMS ofrecen posicionamiento de las webs en los buscadores.
Página 38 de 105
9. Cuentan con un entorno bastante intuitivo que facilitando la creación,

publicación y presentación de los contenidos.
▪ Creación. Se llevará a cabo mediante editores de texto.
▪ Gestión de la base de datos en la que se encuentra

almacenada toda la información.
▪ Publicación de los distintos contenidos que ya han sido

creados con anterioridad.
▪ Presentación de aquellos contenidos que se han llevado

a cabo según una serie de especificaciones.
1.1. Instalación de sistemas operativos libres y propietarios.
En este apartado, vamos a proceder a la instalación del CMS Joomla ya que

es un sistema de gestión de datos que no tiene nada que ver con la
plataforma y es bastante sencillo de utilizar.
Joomla cuenta con un código abierto, programado

en PHP que tiene licencia GPL.
El nombre de Joomla deriva de la palabra swahili “yumla” que quiere decir,

todos juntos y fue elegido por el compromiso o la unión que debe existir
entre los distintos desarrolladores.
Las características más importantes que debemos conocer a la hora de

trabajar con un sistema Joomla, son las siguientes:
1. Ofrece una serie de mejoras frente al rendimiento web.

2. Cuenta con una serie de versiones imprimibles de páginas.
3. Dispone de flash con noticias.
Página 39 de 105
4. Blogs.
5. Foros.
6. Encuestas.
7. …
• Requisitos para la instalación: De la misma forma que cuando

instalamos algún programa, cuando instalamos un sistema de gestión
de contenidos, debemos tener en cuenta los requisitos mínimos que
necesitamos para su instalación.
En este caso, Joomla necesita:
1. Un servidor web, como por ejemplo Apache.

2. Una base de datos, como MySQL.
3. Un lenguaje de script del lado del servidor PHP.
• Versiones Joomla: Fue a partir de la versión 2.5.X cuando empieza a

tomar forma las distintas versiones de Joomla, estableciéndose las
versiones X.5.X con un soporte de larga duración ya que son versiones
bastante estables. Disponían de una vida útil de 18 meses.
Las demás versiones, 3.5.X, 4.5.X, etc. Son menos duraderas, de unos
seis meses aproximadamente, aunque aportan nuevas
funcionalidades.
1.2. Creación de usuarios y grupos de usuarios.
Vamos a especificar cómo se lleva a cabo la gestión de usuarios en Joomla.

En un primer momento, cuando sólo existe un usuario registrado, lo
definimos como usuario administrador, o superusuario y va a ser el encargado
de administrar el sistema mientras dure el proceso de instalación de Joomla.
Otra forma diferente de poder utilizar Joomla es de forma anónima. En este

caso, los usuarios no se van a administrar en el sistema por lo que se
denominan usuarios invitados.
Por tanto, en los sistemas de gestión de contenidos (CMS) diferenciamos dos

categorías distintas de usuarios: registrados e invitados.
Página 40 de 105
Los usuarios se van a seguir creando mientras dure el tiempo de vida de un

CMS y éstos van a tener asignadas unas tareas específicas sobre los
diferentes contenidos del sistema. Cuando creamos un usuario, le debemos
asignar a qué grupos (de los dos existentes) va a pertenecer. Los distintos
grupos, a su vez, también pueden pertenecer a distintos niveles de acceso.
Esta organización de usuarios con la configuración de los diferentes permisos

asignados a cada grupo, pueden ser configurables para cada nuevo
contenido permitiendo conseguir un nivel alto de control de acceso a la
información CMS
• Niveles de acceso
Cuando creamos un contenido en el sistema, debemos indicar:

1. Quién es
2. Su forma de acceder
3. Permisos que tiene
Independientemente de si es, entre otros, un artículo, una categoría, una

opción del menú.
Los niveles de acceso permiten definir quién puede acceder, estbleciendo

uno o diferentes grupos.
Los usuarios pertenecientes a algún grupo, de un determinado nivel, son los

que tienen permitidos el acceso a ese nivel correspondiente.
Joomla, dispone de tres niveles por defecto, que son: especial, público
y registrado. Y podemos realizar las configuraciones convenientes a
través de la pestaña:
Gestor de usuario/Niveles de acceso.
• Grupos de usuarios
Cuentan con una estructura jerárquica compuesta por los diferentes grupos
y subgrupos permitiendo la herencia de privilegios de los grupos más
externos hasta los subgrupos.
Página 41 de 105
• Usuarios Joomla
Podemos diferenciar entre los usuarios que son registrados y los que no o
son (invitados).
Los que se registran pueden tener acceso a todo el sistema y se dividen en
frontend y backend.
Sin embargo, los usuarios invitados sólo pueden visitar el contenido web
público aunque no pertenecen al sistema.
A continuación, vamos a especificar entre los dos tipos de usuarios

registrados que podemos tener:
o Usuarios del frontend: Tienen una serie de derechos como la

creación y publicación del contenido web. Y según el grupo de
usuarios al que pertenezcan, pueden tener una serie de privilegios
diferentes.
Los distintos grupos de usuarios existentes son: Anónimo,
Registrado, Autor, Editor y Publicador.
o Usuarios del backend: Se denominan administradores de sitio.
Tienen permitido el acceso a la interfaz de administración y a la de
frontend.
Dependiendo del grupo de usuarios al que pertenezcan, cuentan
con una serie de privilegios diferentes.
Podemos diferenciar entre los grupos: Gestor, Administrador y
Superusuario.
Página 42 de 105
• Registro de usuarios
A la hora de registrar a los distintos usuarios, es conveniente seguir un orden

como:
1. En primer lugar, crearemos los grupos de usuarios.

2. A continuación, asignaremos los grupos que se han definido
3. Por último, crearemos los usuarios y podremos configurarlos
indicando a qué grupo de usuarios pertenece, como mínimo, al del
nivel más bajo de privilegios, es decir, al Público.
Los distintos usuarios pueden crear un CMS de dos formas diferentes que,
detallamos a continuación.
1. Registro automático de usuarios a través de frontend

Si en Opciones/Permitir registro de usuarios está seleccionado la
opción de Sí, el usuario invitado, va a poder realizar el registro en el
sistema CMS.
2. Registro de usuarios a través de backend
Sólo aquellos usuarios que pertenecen al grupo de administradores
y/o al grupo de superusuarios, tienen permitido crear usuarios y
registrarlos.
1.3. Utilización de la interfaz gráfica.
• Interfaz del CMS Joomla
La interfaz de Joomla es doble, es decir, una es la portada de la página web,

la que se muestra al principio, para nevegar por un sitio, mientras que la otra,
es la página web que permite entrar en la administración sel sistema para
realizar los cambios oportunos.
▪ Interfaz frontal, frontend
Cualquier usuario perteneciente a la red del CMS tiene el acceso

permitido. Es la parte pública de la interfaz.
Página 43 de 105
o Interfaz de administración, backend
Sólo tienen permitido el acceso los usuarios que cuenten con

permisos de administración.
Es la parte privada de la interfaz y ofrece la posibilidad de acceder,

de forma bastante rápida, a las funciones más utilizadas, como son
la creación y administración de diferentes artículos.
o Configuración en la interfaz de administrador
Hace referencia a diferentes sitios del menú que ofrecen la

posibilidad de configurar, mantener e informar sobre Joomla.
En la pestaña de Mi perfil contamos con estas opciones para

modificar y visualizar la información que se encuentre relacionada
con el perfil del usuario.
1.4. Funcionalidades proporcionadas por el gestor de contenidos.
Las funcionalidades básicas de un gestor de contenidos se pueden llevar a

cabo mediante la instalación de diferentes módulos, aunque por defecto, en
la instalación básica ya vienen implementados los módulos más comunes y
utilizados para poder llevar a cabo el diseño de un portal web.
La gestión de usuario es uno de los módulos básicos que vienen

implementados. Con él podemos gestionar a los distintos usuarios, grupos y
diseño de roles para permitir asignar permisos de forma sencilla y precisa.
Este método de trabajo es imprescindible llevarlo a cabo para restringir o
conceder el acceso a distintos tipos de usuarios, dependiendo de las
reponsabilidades que cada uno tenga asignada. Podemos diseñar un menú
personalizado a cada tipo de usuario para que sólo puede visualizar las
opciones que necesite.
La gestión de la estructura de la navegación es el módulo principal para el

diseño de una página web, desde el panel de administración, podemos
gestionar toda la estructura y el árbol de navegación de nuestro sitio. Crear
nuevos puntos del menú, modificar el orden de aparición de las distintas
secciones, especificar la información que deseemos visualizar en cada
apartado, mostrar u ocultar acciones dependiendo del usuario, etc. son
Página 44 de 105
algunos ejemplos permitidos en el panel de control de un gestor de

contenidos.
En el apartado anterior, hemos tratado el tema de la edición de contenidos,

Joomla dispone de un editor (herramienta de edición web) para facilitar la
introducción de información mediante distintas opciones como en cualquier
herramienta de procesador de texto. Podemos utilizar tablas, cambiar tipo
de letras, personalizar con total libertad los hipervínculos, alineaciones de
texto, enlaces internos y externos, entre otras opciones básicas de una
herramienta ofimática. De esta forma, haremos la información mucho más
atractiva y eficaz.
En las nuevas versiones de los gestores de contenido y debido al avance

de la información que incrustamos en una página web, Joomla dispone
de una gestión de imágenes, vídeos y ficheros de audio para facilitar, de
forma intuitiva la gestión de dicha información.
Por último, ya que toda la información que hemos diseñado se debe publicar
en Internet, cualquier gestor de contenidos, en este caso, Joomla, debe
facilitar la publicación de todo nuestro sitio web en Internet.
1.5. Gestión de contenidos. Extensiones
Los contenidos son una parte muy importante en los lenguajes CMS. En la
versión Joomla que hemos instalados debemos profundizar un poco en los
contenidos basados en conceptos fundamentales como son los artículos y las
categorías.
▪ Categorías
Si queremos crear un sitio web con varias categorías y que, cada una
de ellas tenga información almacenada siguiendo una temática
relacionada:
Necesitaremos un contenido del sitio web estructurado, haciendo uso

de la jerarquía de categorías. De esta forma, organizaremos los
diferentes artículos necesarios para, posteriormente, escribirlos. Por
último, enlazaremos estos artículos al sitio web para que queden
legibles a los usuarios.
Página 45 de 105
▪ Artículos
Una vez creada la jerarquía de categorías para el sitio web, crearemos

la información para los artículos que se debe visualizar.
Para ello, haremos uso del panel de control y seleccionaremos la

interfaz de administración. Una vez ahí, elegiremos la opción de Gestor
de artículos.
También podemos acceder mediante el menú principal de

Administración/ Añadir nuevo artículo.
o Edición y creación de artículos
Necesitamos hacer uso de una interfaz que disponga de dos

campos obligatorios que nos permitan crear y editar un artículo.
Estos campos van a ser el de Título y el de Categoría.
Es recomendable también rellenar los campos de:

▪ Alias, para la URL de acceso Estatus. De esta forma,
podemos indicar si el artículo va a estar publicado o no.
▪ Acceso, indica el nivel al que se pretende acceder.
▪ Permisos, permite gestionar la configuración de los
diferentes grupos.
▪ Destacados, señala si queremos que el artículo se encuentre
entre los más importantes.
▪ Texto Artículo, contenido asociado al artículo que deseemos
crear.
• Extensiones Joomla
Se refieren a los diferentes paquetes software que podemos añadir para, de

esta forma, aumentar la funcionalidad en un proceso de instalación estándar.
Página 46 de 105
Según el CMS que hemos instalado, Joomla, cuenta con distintos tipos de
extensiones que podemos encontrar en el menú principal, como:
o Módulos. Estan organizados en forma de caja y los empleamos para

conseguir visualizar algún contenido que se encuentre en un lugar
específico de la página. Tienen la posibilidad de trabajar de forma
independiente o estar asociados a otro componente.
o Plugins. Son las distintas características asociadas a algún evento.
o Plantillas. Tienen como objetivo principal modificar el aspecto
visual de la página.
o Idiomas. Permiten seleccionar el idioma de la interfaz.
• Gestor de extensiones
Podemos acceder a través del menú principal o desde Panel de control/

Interfaz de administración.
Este gestor cuenta con una serie de opciones en las distintas pestañas que
permiten instalar y configurar las distintas extensiones.
• Módulos
Extensiones estructuradas en forma de caja que nos ofrece la posibilidad de

visualizar los contenidos correspondientes a una pádina determinada.
La plantilla que estemos utilizando es la que va a determinar el

posicionamiento.
Si seleccionamos Extensiones/ Gestor de módulos en el menú principal de la

interfaz, se muestra un listado con todos los módulos existentes que esten
configurados en el sitio web. Pueden aparecer distintos módulos que sean
del mismo tipo.
▪ Tipos de módulos. Existe una gran cantidad de módulos que

permiten ampliar las posibilidades del sistema. A continuación,
detallamos algunos de ellos.
▪ Artículos archivados. Lista los meses del calendario

▪ Anuncios- Barnes. Anuncios activos del componente barners.
Página 47 de 105
▪ Artículos- Noticias de última hora. Cantidad de artículos de una

categoría determinada.
▪ Cambiar idioma. Listado de todos los idiomas disponibles.
▪ Categorías artículos. Listado de categorías.
▪ Enlaces web. Enlaces asociados a una categoría definida.
▪ Imagen aleatoria. Desde el directorio seleccionado.
▪ Búsqueda inteligente. Sistema de búsqueda.
▪ Últimos usuarios. Los últimos usuarios que han accedido.
▪ Artículos- Artículos relacionados. Relacionado con el artículo
que se está visualizando.
▪ Buscar. Referente a la caja de búsqueda.
▪ Estadísticas. Sobre la información de la instalación del servidor,
los usuarios del sitio web, número de los artículos existentes en
la base de datos, etc.
▪ Menú. Menú de la interfaz central.
▪ Últimas noticias. Lista de los artículos publicados
recientemente.
• Plugins
Se refieren a las diferentes extensiones que tienen la misión de realizar

pequeñas funciones complementarias para pofer funcionar de forma
independiente, como si fueran módulos o componentes.
Aparte de los pluggins, en la instalación del Joomla vienen incluídos algunos

que podemos agrupar en grupos diferentes como:
o Autenticación. Viene seleccionado por defecto la autenticación de

Joomla.
o Captcha. Previene el acceso de robots ante los contenidos que están

dirigidos a las personas.
o Contenido. Gestionan los distintos elementos que forman el contenido

del sitio web. Como cargar módulos, Joomla, Búsqueda inteligente,
Protección email, Código Highlighter, Salto de página, Página de
navegación, valoración.
Página 48 de 105
o Editor. Permite crear artículos con el formato que deseemos
o Plantillas. Extensiones que van a permitir seleccionar el diseño y la

forma de mostrar los distintos contenidos de un sitio web.
Una vez instlado Joomla, disponemos de una serie de plantillas por

defecto, tanto para backend como para frontend. Aunque también
existen muchos modelos que podemos descargar para trabajar con
ellos.
Accederemos a ellas mediante la opción Extensiones/Gestor de

plantillas o bien, desde el panel de control, accediendo a la interfaz de
administración y, en las pestañas Estilos y Plantillas.
o Idiomas. Podemos seleccionar el tipo de idioma en el que queramos

trabajar mediante Extensiones/Gestor de idiomas o bien mediante el
panel de control, interfaz de administración, configuramos el idioma
del sitio correspondiente.
1.6. Configuración de módulos y menús. Sindicación.
El sistema de gestión de contenidos Joomla, que es el que hemos instalado,

cuenta con una amplia variedad de menús, flexibles y configurables que
ofrecen la posibilidad de navegar por la web pudiendo tener acceso a todos
los contenidos mediante módulos de tipo “Menú”.
Los menús agrupan enlaces a los atributos que se publican, a las diferentes
categorías o incluso a cualquier otra información del sistema. Incluso pueden
contener enlaces a otras páginas externas.
Los menús están formados por los denominados elementos de menú. Deben
contener, al menos uno para poder ser visible en el fronend. Estos elementos
pueden ser de diferentes tipos según si van a actuar como enlaces con otros
artículos, contactos, noticias externes, etc.
Página 49 de 105
Y cada menú se enlaza con lo que denominamos módulo de tipo menú que
debemos crear para que, tanto menú como elementos tengan visibilidad
desde frontend.
Si aparece en el menú algún elemento con una estrella, no podemos borrarlo

ya que es el elemento del menú por defecto y se va a mostrar en el elemento
del fronend.
1.7. Copias de seguridad.
Cuando hablamos de copias de seguridad, también denominadas backup,

nos referimos a las distintas copias que se pueden realizar, bien sea de forma
total o parcial del CMS y del contenido.
El principal objetivo de estas copias de seguridad es conseguir que los datos

se puedan restaurar después de que se haya producido cualquier problema
garantizando siempre la integridad de los datos y disponibilidad de los
mismos tras restaurar las copias.
Por tanto, se recomienda realizar una copia de seguridad antes de realizar las
diferentes instalaciones de algún componente o módulo, como, por ejemplo,
de algún foro o galerías que neceiten subir una gran cantidad de archivos. O
si se van a realizar modificaciones en la base de datos o en el código,
eliminación de archivos del servidor, etc.
Los diferentes métodos de los que dispone Joomla para realizar copias de
seguridad, son los siguientes:
• Copiar la carpeta principal
Para copiar la carpeta principal, crearemos una nueva carpeta en la que

vamos a almacenar la copia de seguridad que realicemos:
Si estamos trabajando en Linux:

/opt/lampp/htdocs/joomla256
Si estamos trabajando en Windows:

xampp/htdocs/joomla256/
Página 50 de 105
Es un método que resulta bastante tedioso al tratarse de un servidor externo

ya que ocupa bastante espacio.
• Exportar con phpMyadmin
Debemos acceder, a través del navegador, a la dirección
http://localhost/phpmyadmin/
Y, en la pestaña Exportar, seleccionaremos la opción del formato de

exportación. Haremos clic en Continuar para guardar la copia
correspondiente a la base de datos.
• Componente Akeeba Backup
Este ultimo método, está basado en instalar alguno de los components

externos existentes para llevar a cabo la copia de seguridad.
Uno de los componentes más utilizados, es Aleekba Backup, que permite

realizar backups completos del sitio web en cuestión, de los diferentes
archivos y bases de datos. Dispone de varias opciones de configuración y es
un proceso bastante sencillo.
1.8. Búsqueda e interpretación de documentación técnica.
Como objetivo de este ciclo medio, de Sistemas Microinformáticos y Redes,

debemos finalizar todo proceso con la creación de un documento
recopilatorio de todo el proceso, en este caso, de los gestores de contenidos
web.
En dicho documento, recogeremos todos los pasos realizados tanto para la

instalación y configuración de los servicios necesarios para este gestor de
contenidos.
En primer lugar, vimos la definición de los gestores de contenido, así como

su instalación y configuración, accesos y permisos. Y, por último, los pasos
para la comprobación de que todo el proceso está funcionando
Página 51 de 105
correctamente. Sobre todo, cabe resaltar que en el proceso de configuración

hemos dejado constancia de las opciones que hemos seleccionado y las
razones que nos han llevado a tomar tal decisión.
Este documento debe ser una guía en la que escribimos, en todo momento,
los pasos e incidencias ocurridas. Esta guía debe servir como cuaderno de
Otros posibles administradores pueden utilizar este tutorial como ayuda

explicativa de todo el proceso. Cuando aparecen las incidencias en el equipo,
podemos ayudarnos de este documento para buscar una solución y si el
proyecto está totalmente actualizado, podemos ver como se solucionaron
algunos incidentes parecidos ocurridos anteriormente. En estos casos, hay un
apartado de Preguntas Frecuentes, para recabar todas las dudas surgidas
con sus posibles soluciones.


Al utilizar una herramienta libre, Internet se convertirá en nuestro gran aliado

para conseguir solventar cualquier tipo de error.
Página 52 de 105
UF4: Portales web de aprendizaje
1. Instalación de sistemas de gestión de aprendizaje

a distancia.
Los sistemas de aprendizaje electrónico, e- learning, se basan en la
adquisición de conocimientos ofrecidos por los sistemas de aprendizaje a
través de las redes (locales o globales) de comunicación. Estos sistemas,
suelen hacer uso de las tecnologías de la información y comunicación (TIC)
como herramientas que ofrecen ayuda al docente y favorecen este proceso
educativo virtual.
También existen otros tipos de esistemas de enseñanza derivados del

aprendizaje electrónico, como son, entre otros:
▪ b- learning (blended learning). Es una combinación de educación

presencial con el aprendizaje electrónico.
▪ u- learning (ubiquitous lerning). Apuesta por un aprendizaje a través
di distintos contextos o situaciones en la que intervienen diferentes
dispositivos, entre los que ya aparecen los dispositivos móviles.
▪ m- learning. Esta modalidad de aprendizaje que, cada vez está
tomando más fuerza debido al crecimiento de las plataformas
virtuales y la posibilidad de estudiar a través de los smartphones.
En esta unidad, nos vamos a basar en el aprendizaje electrónico (e- learning)

que, entre otras posibilidades, permite la incluir foros, chats y sistemas de
correo electrónico. Todas estas características, están siempre orientadas a
favorecer la comunicación entre los estudiantes virtuales que esten
realizando un curso online junto con sus profesores responsables.
El aprendizaje electrónico, va adquiriendo cada vez más importancia

llegando hasta el ámbito empresarial, de forma que permite que los
trabajadores de una empresa se puedan ir actualizando a través de la
realizaciónde este tipo de cursos.
De tal manera que los trabajadores disponen de una gran flexibilidad para
combinar su jornada laboral con la formación.
Página 53 de 105
• Sistemas de Gestión de contenidos de aprendizaje
Estos sistemas de gestión de contenido de aprendizaje, LCMS (Learning

Content Management System), hacen referencia a un tipo de software que
ofrece la posibilidad de crear sistemas e- learning de diferentes cursos
virtuales de formación. Estos sistemas apuestan por una innovación en la
educación y pretenden ayudar a docentes y alumnado durante el desarrollo
de los cursos.
En un primer momento, estos cursos pretendían centrarse en el desarrollo de

los cursos a distancia. Sin embargo, hoy en día, han conseguido servir de
apoyo a los cursos presenciales y ofrecen el acceso a los distintos contenidos
a través de la red de Internet.
o Características
Entre las características principales de los LCMS, se encuentran las siguientes:
▪ Hacen uso de un servidor web para ofrecer el contenido de los

diferentes cursos desarrollados a distancia para que sean
accesibles mediante el navegador.
▪ Apuestan por una colaboración de un conjunto de usuarios
(profesores y alumnos).
▪ Son capeces de gestionar los diferentes cursos de formación.
▪ Ofrecen una serie de plantillas para la creación del contenido
educativo de los cursos.
Página 54 de 105
▪ Gracias a la asignación de los diferentes permisos, pueden

controlar, de forma más exhaustiva a usuarios y grupos.
▪ Disponen de la posibilidad de realizar copias de seguridad.
▪ Son capaces de añadir más funcionalidades como, exámenes,
evaluaciones, actividades, etc.
Algunas universidades, instituciones educativas, empresas apuestan por este

método de aprendizaje ya que permiten economizar el tiempo empleado por
el docente, cuentan con un servicio en Internet para los estudiantes, facilitan
el uso de la formación a distancia, etc.
Los LCMS fomentan el aprendizaje y el trabajo en equipo, ya que apuestan

por la colacoración en foros, chats, etc en los que los usuarios pueden
expresar las inquietudes que encuentren.
Algunos de los sistemas de gestión de aprendizaje son:
1. Moodle. Es uno de los más conocidos y utilizados para el desarrollo

de los cursos. Consiste en una publicación web de libre distribución
que ayuda a los docentes a crear diferentes comunidades de
aprendizaje.
2. Sakai. Utiliza un sistema de código abierto con una parte de para
la educación que ofrece mejoras en la enseñanza, aprendizaje y la
educación.
3. LNR (Learn Research Network). Es uno de los softwares e-learning
de código abierto más conocidos y utilizados.
4. ILIAS. Basado en la tecnología Moddle. Facilita la navegación y
apuesta por organizar los contenidos de forma más eficiente.
5. Chamilo. Plataforma e- learning de código abierto cuyo objetivo
principal es conseguir un mejor acceso a la educación.
6. Blackboard. Es un sistema comercial e- learning mediante el que se
pueden crear diferentes cursos y desarrollar la actividad docente
Página 55 de 105
Estándares en el aprendizaje electrónico
Cuando trabajamos con material didáctico que se va a compartir con los

diferentes alumnos que participan en un sistema de gestión de contenidos
de aprendizaje electrónico, existe un conjunto de normas que debemos
cumplir que se encuentran recogidas en un modelo de referencia
denominado SCORM.
El estándar SCORM (Sharable Content Object Reference Model), es un

proyecto, en el que colaboran distintas organizaciones (AICC, IMS
Global, IEEE, etc.), cuya función principal es conseguir integrar las
diferentes especificaciones que estén destinadas al
aprendizaje en línea.
Este paquete, es un bloque en el que se encuentra recogido y empaquetado

el material web educativo bajo las normas del estándar SCORM en cuanto a
los objetos del aprendizaje.
Más info:
cloud.scorm.com
1.1. Elementos lógicos: comunicación, materiales y actividades.
El entorno Moodle cuenta con una serie de módulos que nos van a permitir
realizar configuraciones en el sistema según cuáles sean las necesidades de
los cursos.
Estan formados por una serie de herramientas cuya función principal es

facilitar la comunicación entre alumnos y profesores.
▪ Comunicación
Hacen referencia a diferentes foros, chats, sistemas de mensajes, etc. que

ofrecen la posibilidad a los alumnos ponerse en contacto con los profesores
junto con los demás participantes a la hora de plantear cualquier duda sobre
los contenidos específicos de algún curso determinado. También es posible
que los alumnos establezcan una comunicación entre ellos formando, lo que
denominamos, comunidad de aprendizaje.
Página 56 de 105
▪ Materiales
Documentos de texto, soluciones, apuntes, diapositivas, etc. son los distintos

recursos que el profesor puede ofrecer a los alumnos a través del gestor de
aprendizaje.
▪ Actividades
Ofrece la posibilidad a los diferentes participantes de un curso, mediante la

entrega de ejercicios, tareas, participación en los foros, resolviendo
cuestionarios, etc. su interacción y colaboración en la plataforma.
1.2. Instalación en sistemas operativos libres y propietarios.
• Instalación
En este caso, vamos a realizar la instalación del entorno visual de aprendizaje

Moodle (Module Object Oriented Dynamic Learning Environment) ya que es
uno de los sistemas de gesitón de contenidos más conocidos y utilizados.
Más info:
https://moodle.org/?lang=es
Moodle es una publicación gratuita de código abierto, por lo que permite a

los educadores trabajar mediante un sitio web dinámico caoaz de gestionar
el aprendizaje de los estudiantes.
Puede ser utilizado por cientos de estudiantes a la vez o incluso por una
pequeña escuela. Algunas universidades o instituciones lo llevana a cabo para
complementar una formación presencial, miestras que otras, lo utilizan para
llevar a cabo estudios a distancia.
Cuenta con una serie de módulos de colaboración para el aprendizaje como

los foros, chats, wikis, etc. Y permite ofrecer a los estudiantes una serie de
contenidos con idea de que puedan cumplimentarlos para volverlos a
entregar, como, las actividades, exámenes, cuestionarios, etc.
Además, cuenta con una interfaz interactiva bastante cómoda para trabajar y
poder realizar la gestión de contenidos y cursos.
Página 57 de 105
Ofrece la posibilidad de realizar un seguimiento sobre las actividades y el

trabajo realizado por los diferentes estudiantes pudiento realizar estadísticas
sobre el uso, las copias de seguridad de los cursos, acceso a manuales y
ayuda, etc.
▪ Requisitos previos a la instalación y versiones
Es necesario, antes de instalar Moodle, disponer de un servidor web que ya

se encuentre instalado y configurado, ya sea en un ordenador personal o
alguno de una empresa determinada. Debe soportar, como mínimo, PHP
5.3.2 y MySQL 5.1.3.
En cuanto a las versiones de Moodle, pueden ser de dos tipos diferentes:
o Las de corta duración, que tienen el formato 3.3.X

o Las de larga duración, que se corresponden con el formato 3.1, 3.2,
3.3, etc.
Siempre es recomendable utilizar las últimas versiones que que suelen ser las
más actuales y mejoradas.
• Pasos para realizar el proceso de instalación en un sistema operativo

Windows
Más info:
https://download.moodle.org/
Más info:
https://www.youtube.com/watch?v=h5o6-BOhhds
• Personalización del entorno
Tenemos la opción de realizar las configuraciones oprtunas de la interfaz del

sistema siempre que accedamos a Moodle como Administrador, a través de
Ajustes.
Página 58 de 105
Otra de las características principales de Moodle es la posibilidad que

tenemos de cambiar su apariencia según el tema que seleccionemos o incluso
modificando características de alguno de los temas que hayamos instalado.
Podemos llevar a cabo este tipo de modificaciones mediante la opción

Apariencia/Temas/Administración del sitio.
• Navegación y edición
Mediante el modo de edición activado, se permite que el usuario o

administrador puedan navegar por la web, pudiendo realizar distintas
funciones como creaciones, configuraciones de aquellos bloques que
componen este entorno de navegación de Moodle.
Podemos activar este modo de navegación mediante la pestana

Ajustes/Ajustes de la página principal y seleccionamos la opción de Activar
edición y, podemos ver que, en el mismo instante, se producen los siguientes
cambios:
o Se muestra la opción contraria Desactivar edición

o Aparecen en pantalla los iconos de edición en los bloques que
forman parte del entorno y se pueden modificar, borrar, e incluso
ocultar.
o Aparece un nuevo bloque, Agregar un bloque que nos ofrece la
posibilidad de crear nuevos bloques.
o Activamos la posibilidad de poder mover los diferentes bloques
simplements haciendo clic con el ratón y arrastrando el bloque
deseado hacia el lugar correspondiente.
Página 59 de 105
1.3. Creación y configuración de perfiles de usuario.
• Gestión de usuarios
Podemos realizar una clasificación de los diferentes usuarios según las tareas
que tengan asignada, pudiendo ser, entre otros, administradores, profesores
o estudiantes.
Los administradores son los encargados de gestionar a los demás usuarios,

asignándoles un rol correspondiente a cada uno según las tareas que deban
llevar a cabo.
• Creación de usuarios
o Forma 1
En la plataforma Moodle, podemos llevar a cabo la creación se usuarios a

través del bloque Ajustes, en Administración del sitio/ Usuarios. En las
opciones que se encuentran en las pestañas Cuentas y Permisos.
Cuando el administrador desea crear un usuario, debe acceder a la opción

Agregar usuario y proceder a rellenar los datos correspondientes.
Una vez rellenos los datos, el administrador debe dar de alta al usuario
seleccionando la opción de Actualizar información personal.
o Forma 2
Otra posibilidad que tenemos para realizar la creación de usuarios es,

mediante la opción Subir archivos. En este caso, el administrador, a trvés de
un fichero de texto, cuenta con la posibilidad de crear varias cuentas de
correo a la misma vez.
Además, también tiene opción de realizar otro tipo de operaciones como:

inscribir a alumnos en varios cursos, actualizar perfiles de usuarios, eliminar
usuarios, etc.
El formato del archivo que se utilice, debe cumplir los siguientes aspectos:
▪ Cada línea sólo puede contener un registro.
Página 60 de 105
▪ Un registro debe estar formado por diferentes datos y entre ellos,

deben ir separados: “,”, “;”, “:”, “\t”.
▪ El primer registro debe contener una lista de nombres que definan
el formato que va a tener el resto del archivo.
▪ Hay definidos una serie de nombres de campo obligatorios, como:
username, password, firstname, lastname, email.
Además, existen una serie de campos opcionales como pueden ser: city,
country, etc y algunos otros que nos van a permitir marticular a un usuario en
uno o varios cursos (course1, course2, etc.).
• Tipo de usuario: rol
Una vez que se ha creado un usuario, es conveniente definir de qué tipo es

junto con los permisos que va a tener asignado. En la plataforma Moddle, los
distintos tipos de usuarios se van a especificar mediante el concepto de “rol”
que asigna una serie de funciones que un usuario o varios pueden realizar
dentro del LCMS.
El administrador es el tipo de usuario más importante que vamos a tener, y

éste, puede realizar cualquier tipo de función. En un primer momento, va a
ser el único que puede llevar a cabo configuraciones y gestionar los
diferentes roles del sistema. Aunque también existe la opción de otorgar a
otro usuario el papel de administrador y los haremos a través de
Administrador del sitio/Permisos de usuarios.
Mediante la opción de Definir roles, podemos seleccionar Asignar roles

globales, que asigna a los usuarios roles ya definidos, que se corresponden,
por defecto con Gestor y Creador de curso y son capaces de cubrir todas las
necesidades.
1.4. Activación y uso de funcionalidades. Foros.
Una vez que ya nos hemos creado un curso, lo normal es que no muestre
demasiadas funcionalidades, aunque sí que disponemos de una estructura,
en la que poder ubicar los distintos contenidos. Esta estructura va a depender
del formato que hayamos especificado en la creación, como pueden ser:
semanas, temas, etc. Lo normal es que el profesor de un determinado curso
sea el encargado de asignar las diferentes tareas, actividade y
funcionalidades del curso en cuestión.
Página 61 de 105
• Foro
Cuando nos creamos un curso en el que el formato del mismo se corresponde

con semanal o temas, aparece el primer bloque, denominado Novedades. Se
trata de un foro, en el que, en un primer momento, añaden a todos los
participantes del curso.
El profesor o gestor de ese curso, es el responsable de añadir las distintas

novedades o temas principales de debate que van a aparecer en la página
principal del curso.
Los estudiantes no pueden contestar ni empezar a debatir, aunque, gracias a

las distintas configuraciones que se pueden realizar, se pueden ir realizando
modificaciones sobre los ajustes del mismo.
En cuanto a los iconos de este bloque del foro de novedades, está permitido
acceder a los temas de debate, editar un título, cambiar de lugar al bloque
que lo contiene, editar la configuración, asignar roles, etc. También existen
otros iconos que permiten editar el nombre de la sección, tema o semana a
la que corresponden y cambiarlo de posición.
Es posible seleccionar un tema como “tema actual” asignándole una mayor

importancia que al resto de temas.
• Actividades
Son diferentes módulos de Moodle que solicitan a los alumnos la realización

de alguna actividad, trabajo, práctica.
o Base de datos. Los participantes tienen opción de crear, mantener,

buscar la distinta información almacenada en un banco de registros.
o Chat. Ofrece la posibilidad de discusión de los distintos participantes
en la web en tiempo real.
o Consultas. Permite que el profesor realice una serie de preguntas.
o Cuestionarios. Permite que el profesor diseñe una serie de preguntas
de tal forma que, cada intento, quede guardado. Es libre que, una vez
terminado el cuestionario, permita realizarlo de nuevo o lo muestre
con las opciones ya resueltas.
Página 62 de 105
o Encuestas. En este módulo existen tres tipos de encuestas distintas

mediante las cuales el profesor puede hacer un seguimiento al alumno
y comprobar, de esta forma, su evolución.
o External Tool. Conjunto de herramientas que permiten a los alumnos
interactuar con los distintos recursos disponibles para el aprendizaje.
o Foro. Ofrece la posibilidad a todos los participantes de poder opinar
sobre los temas abiertos en los foros.
o Glosario. Permite que los participantes creen una lista de definiciones.
o Lección.Conjunto de páginas con explicaciones sobre los temas de los
que conste el curso. A veces, incluye una serie de preguntas que le
sirve al alumno para saber si ha entendido el tema en cuestión.
o Paquete SCORM. Ofrece una mejor accesibilidad y un mejor uso de
los contenidos de aprendizaje.
o Taller. Ofrece a los estudiantes la posibilidad de evaluar el trabajo de
los demás alumnos a través de un formulario.
o Tarea. Trabajo que permite al profesor evaluar el aprendizaje de los
alumnos.
o Wiki. Permite a los usuarios añadir un conjunto de páginas web con los
apuntes de clase, esquemas, resúmenes, etc.
• Recursos
Hacen referencia a los alumnos sobre los distintos contenidos que puede
tener un curso. Podemos diferenciar entre:
o Archivo. Material con el contenido de aprendizaje.

o Carpeta. Conjunto de archivos relacionados que pueden compartir
los distintos profesores.
o Etiqueta. Permite identificar mediante un texto las distintas
actividades y recursos.
o Libro. Conjunto de páginas con la información referente a un
determinado módulo.
o Página. Posibilidad que tiene el profesor de crear una página web
para presentar el programa del curso.
o Paquete de contenidos IMS. Distintos contenidos educativos.
o URL. El profesor proporciona, mediante un enlace de Internet el
recurso del curso.
Página 63 de 105
1.5. Creación de cursos siguiendo especificaciones.
• Gestión de cursos
Es recomendable que los sistemas de gestión de contenidos que están

orientados al aprendizaje, dispongan de información para poderla ofrecer a
los distintos usuarios, pero de forma organizada. El material disponible para
un determinado curso que se encuentra a disposición de los estudiantes, la
estructura de las categorías que contienen los diferentes cursos y la opción
que debe existir de que, dentro de cada curso, puede haber distintos grupos
de usuarios.
• Categorías
En Moodle suele existir una categoría por defecto tras el proceso de

instalación denominada Miscelánea.
Para crear diferentes categorías o cursos, podemo hacerlo a trvés de Ajustes/

Administración del sitio/ Cursos/ Agregar/ editar cursos.
Cursos
•
Los cursos en Moodle disponen de una serie de actividades formativas para

los estudiantes como pueden ser los foros, cuestionarios, consultas,
materiales, tareas, etc.
Al igual que cuando creamos alguna categoría, para crear un curso,

seleccionamos la opción Agregar/ editar cursos. Es recomendable que antes
de empezar a crear los diferentes cursos, tengamos una estructura lógica de
las diferentes categorías que existen.
Cuando damos de alta un curso, tenemos que rellenar una serie de campos
obligatorios, como son el nombre del curso, tanto el nombre completo como
el corto. A través del campo Formato podemos seleccionar el más apropiado
y dispone de una serie de contenidos para el curso como:
o Semanal. Puede organizar un curso por semanas correspondientes

al calendario.
o Temas. Hace referencia a las distintas unidades de un libro.
Página 64 de 105
o Social. Apartado sobre los distintos foros y temas para debatir.

o SCORM. Paquete SCORM con distintos materiales para el
aprendizaje.
Además, también existen una serie de campos que podemos rellenar como
son:
o Fecha inicio del curso. Inicio de la primera semana de un curos en

formato semanal.
o Temas ocultos. Muestra las secciones ocultas de un curso.
o Paginación del curso. Si el curso se muestra en una sóla página o
en varias.
o Mostrar calificaciones a los estudiantes. Donde los estudiantes
pueden visualizar sus calificaiones.
o Ítem de noticias para ver. Existe un apartado en los foros,
denominado Novedades en el que podemos incluir aquellos
mensajes importantes para los alumnos.
• Matriculación
Tras crearnos algún curso, ya es posible que los usuarios se puedan matricular
en él, de tal forma que, hasta que no se matriculen, no van a tener ningún
permiso sobre el curso en cuestión.
Podemos diferenciar entre dos procesos diferentes de matriculación,

pudiéndolo realizar de forma manual o, automática. Lo encontramos en la
opción Ajustes/ Administración del curso/ Usuarios/ Métodos de
matriculación.
▪ Matriculación manual
Una vez que se ha creado un nuevo curso, el sistema ofrece la posibilidad de

realizar una matriculación manual al mismo, de tal forma que, permite
convertir a los distintos usuarios en Participantes del curso. Para tal fin,
seleccionamos la opción Matricular usuarios.
Se muestra una ventana en la que se permite matricular nuevos usuarios

mediante la opción Ajustes/ Administración del curso/ Usuarios matriculados.
Página 65 de 105
Al hacer clic en la opción de Matricular usuarios, accedemos a la

matriculación manual de tal forma que podemos asignar los diferentes roles
a los usuarios matriculados en algún curso. Por defecto, se asigna el rol de
estudiante en el curso en el que esté matriculado, aunque podemos
seleccionar el rol de profesor asignándole permisos para la gestión o sin
permisos.
▪ Matriculación automática
Ofrece la posibilidad a un alumno de matricularse de forma automática bajo

el rol de estudiante cuando necesita tener acceso a la página de un curso.
Existe la posibilidad de pedir a los diferentes alumnos una clave en caso de
que deseen realizar el proceso de matriculación.
• Grupos Vs Cohortes
o Grupos
Hacen referencia a un conjunto de usuarios que se unen para realizar una

función determinada. Estos grupos podemos definir dos niveles diferentes:
1. A nivel de curso. Es el tipo de nivel definido por defecto y se puede

aplicar a todas las actividades que se definen en un curso.
2. A nivel de actividad. Para todas las actividades que definan su
modo de agrupación.
Tanto el administrador, como los profesores de un curso determinado,

pueden crear un grupo y añadir los diferentes alumnos que este contenga.
Por lo que hay que entrar en el curso, y seleccionar la opción

Ajustes/Administración del curso/ Usuarios/Grupos. Y, en la pestaña Editar
ajustes del curso, podemos seleccionar la opción de Configurar. En el
apartado Grupos podemos comprobar los campos que lo componen, que
son:
▪ Modo de grupo. Mediante este campo podemo comprobar el

comportamiento que tiene un determinado grupo, como:
I. No hay grupos. Todos los participantes de un curso

pertenecen a un grupo único.
Página 66 de 105
II. Grupos separados. Cuando un estudiante tiene opción de

ver el trabajo que realiza su propio grupo.
III. Grupos visibles. Si un estudiante trabaja dentro de un grupo,
éste puede ver su trabajo y el trabajo de otros grupos.
▪ Forzar el modo de grupo. Si su valor es Sí, el modo seleccionado

del grupo se puede aplicar a las diferentes actividades de un curso.
o Cohortes
Grupo de usuarios, también denominados grupos globales, pero los

correspondientes a nivel de sitio, no al nivel de un curso determinado como
los grupos, es decir, los que pertenecen a un nivel superior.
Podemos llevarlo a cabo a través de la opción Ajustes/Administración del

sitio/ Usuarios/ Cuentas/ Cohortes.
Todos los miembros pertenecientes a una cohorte determinada, puede llevar

a cabo, lo que denominamos acciones “masivas”. Como podría ser una
cohorte de profesores, que comparten la opción de poderse matricular en
un determinado curso con sólo un clic del ratón.
Página 67 de 105
1.6. Copias de seguridad. Mecanismos de restauración de cursos

y datos.
El administrador o administradores junto con los profesores autorizados, van

a ser los máximos responasables de llevar a cabo las copias de seguridad
cada cierto período de tiempo para poder restaurar cada vez que sea
necesario.
• Copia de seguridad de un curso
Lo haremos accediendo a la opción de Ajustes/Administración del

curso/Copia de seguridad y, a continuación, el proceso para realizar la copia
de seguridad consta de cinco pasos:
o Ajustes iniciales. Hace referencia a la configuración de los datos que

se deseen copiar.
o Ajustes del esquema. Permite seleccionar semanas, temas, etc.,
que se deseen copiar.
o Confirmación y revisión. Muestra un resumen con las diferentes
opciones que se han ido seleccionando.
o Ejecutar copia de seguridad. Para realizar la copia de seguridad.
o Completar. Muestra un mensaje de éxito si se el proceso se ha
completado con éxito o un mensaje de error en caso de que no se
haya podido realizar la copia de seguridad.
• Restaurar un curso
Antes de poder restaurar un curso, necesitamos haber realizado previamente

una copia de seguridad. Seguidamente, podemos hacer clic sobre el icono
que deseemos restaurar o, mediante la opción Ajustes/ Administración del
curso/ Restaurar.
Y podemos diferenciar tres formas distintas de llevar a cabo el proceso de

restauración, que son:
Página 68 de 105
o Podemos importar un archivo de copia de seguridad. De esta forma,

buscamos el archivo en el sistema de ficheros o, simplemente, lo
arrastramos hasta el lugar reservado.
o Si tenemos una zona de copia de seguridad de curso, se muestra
un listado con las distintas copias de seguridad de un curso
determinado perparada para ser restaurada o descargada.
o Si existe una zona de copia de seguridad privada de usuario, y tiene
seleccionada la opción Hacer anónima la información de usuario los
archivos se podrán guradar ahí.
Este proceso de restauración, consta de siete pasos diferentes:
1. Confirmamos la información de los datos que se desean restaurar.

2. Indicamos el destino en el que deseemos almacenar la copia.
3. Ajustes: elegimos los elementos a copiar.
4. Esquema: indicamos nombre, fecha, seleccionamos semanas, etc.
5. Revisamos el resumen con las opciones seleccionadas.
6. Comienza el proceso de ejecución del proceso de restauración.
7. Se muestra un mensaje de éxito o error cuando se complete el
proceso.
1.7. Búsqueda e interpretación de documentación técnica.
Como último apartado de esta unidad formativa, finalizaremos con la

creación de un documento recopilatorio de todo el proceso, en este caso, de
los gestores de aprendizaje en Moodle.
En dicho documento, recogeremos todos los pasos realizados tanto para la

instalación, configuración y funcionalidades de este gestor de aprendizaje.
Como recopilación de este tema, hablamos en primer lugar, de la definición

de los gestores de aprendizaje. A continuación, viemos el proceso de
instalación, configuración y funcionamiento de la plataforma Moodle.
La realización de un documento donde incluyamos cada uno de los pasos

que hemos seguido con su explicación correspondiente de las razones que
nos han llevado a realizarlo, es el objetivo al que queremos llegar en este
apartado.
Página 69 de 105
Esta guía debe servir como cuaderno de consulta para futuras ampliaciones
o posibles incidencias ocasionadas.
Otros posibles administradores pueden utilizar este tutorial como ayuda

explicativa de todo el proceso. Cuando aparecen las incidencias en el equipo,
podemos ayudarnos de este documento para buscar una solución y si el
proyecto está totalmente actualizado, podemos ver como se solucionaron
algunos incidentes parecidos ocurridos anteriormente. En estos casos, hay un
apartado de Preguntas Frecuentes, para recabar todas las dudas surgidas
con sus posibles soluciones.


la propia organización posee una comunidad de gran importancia para
ayudar al usuario.
Podemos acceder a dicha comunidad a través de la web oficial

https://www.moodle.org
De esta forma, los incidentes se pueden solventar o bien exponiéndolo en el

foro para que algún experto nos responda o bien consultadlo en la web para
buscar el caso de error que tenemos entre manos y ver si alguien ha estado
en la misma situación que nosotros.
Al utilizar una herramienta libre, Internet se convertirá en nuestro gran aliado

para conseguir solventar cualquier tipo de error.
Página 70 de 105
UF5: Fundamentos de HTML y hojas de estilo
1. Origen y evolución de HTML

Cuando hablamos del origen de HTML, nos remontamos al año 1980, que
fue cuando el físico Tim Berners- Lee que trabajaba para CERN (Organización
Europea para la Investigación Nuclear) propone un nuevo sistema de
“hipertexto” para que de pudieran compartir
diferentes documentos.
Estos sistemas de “hipertexto”, ya se habían

desarrollado con anterioridad, aunque en el ámbito de
informática, cuando se habla de “hipertexto”, se
refiere a que los usuarios puedan acceder a la
información que esté relacionada con aquellos
documentos electrónicos que están visibles. Así, los
“hipertextos” iniciales, se asimilaban a los enlaces a las
distintas páginas web.
Tim Berners-Lee
Años posteriores, Tim Berners- Lee se une con el ingeniero de sistemas

Robert Cailliau con el que gana la propuesta WorldWideWeb (W3).
- En 1991 se presenta el primer docuemnto con descripción de HTML y

bajo el nombre HTML Tags (Etiquetas HTML).
- En 1993 se presenta la primera propuesta oficial para convertir HTML

en un estándar. Aunque existieron avances muy significativos, porque
se definieron las etiquetas de imágenes, las tablas y los formularios,
no se llegó a conseguir ser el estándar oficial.
- Ya en 1995, es el organismo IETF se encarga de poner en marcha un

grupo para trabajar con HTML y es cuando se consigue publicar, el 22
de septiembre de 1995, el estándar HTML 2.0, siendo éste, el primer
estándar oficial de HTML.
Página 71 de 105
- A partir del año 1996, los diferentes estándares de HTML los publica
otro organismo distinto denominado W3C (World Wide Web
Consortium), llegando a publicar la versión HTML 3.2 el 14 de Enero
de 1997. Esta fue la primera recomendación de HTML que publicó
W3C
- Con la versión HTML 4.0, publicada el 24 de Abril de 1998, se

consiguieron numerosos avances sobre las versiones anteriores y
aparecía la posibilidad de añadir pequeños programas (scripts) en las
páginas web con lo que se conseguía mejorar la accesibilidad de las
páginas que ya estaban diseñadas, trabajar mediante la utilización de
tablas más complejas y mejora de los formularios.
- La publicación de HTML 4.01 (publicada en 1999), basada, sobre todo,

en revisar publicaciones anteriores, pero no añade avances
significativos. Detuvo un poco el desarrollo de HTML para centrarse
más en el estándar XHTML.
- Sobre el año 2004 y debido a este parón que existió, algunas empresas
como Appel, Mzilla y Opera, empezaron amostrar su preocupación
por la falta de interés que estaba existiendo del W3C DE HTML y fue
entonces cuando empezaron a organizar una nueva asociación
denominada WHATWG (Web Hypertext Application Technology
Working Group).
- El 22 de enero de 2008 se publica el primer borrador oficial del

estándar HTML5.
- De forma paralela, se seguía avanzando sobre la estandarización de

XHTML (versión avanzada de HTML basada en XML), publicando su
primera versión en enero del 2000.
- XHTML 1.0 está basado en la adaptación de HTML 4.01 al lenguaje

XML por lo que utiliza sus mismas etiquetas y muchas de sus
características auqneu añade algunas nuevas.
- La versión XHTML 1.1 y XHTML 2.0 se publicaron en forma de borrador

con la intención de poder modularizar XHTML.
Página 72 de 105
Una vez conocido el origen y la evolución a lo largo de los años de este

lenguaje de marcas, nos pararemos un poco en conocer, más a fondo este
lenguaje.
HTML es un lenguaje de marcas que nos permite desarrollar diferentes páginas

web. Para ello, necesitamos:
• Un editor de textos ASCII mediante el que vamos a poder añadir el

contenido que pretendemos mostrar.
• Un navegador web con el que podemos visaulizar el contenido de la

página.
Todos aquellos ficheros que contengan documentos HTML van a tener como
extensión .html o .htm.
Otro editor HTML (aunque un poco más específico), puede ser WYSIWYG
(What You See Is What You Get), que se traduce como “Lo que ves, es lo que
obtienes”.
De esta forma, podemos scribir diferentes documentos HTML y ver, de forma

simultánea, cómo quedaría el resultado final de la página web, de la misma
forma que se vería cuando la publicásemos en Internet.
También existen otras herramientas de edición, que podemos utilizar para

llevar a cabo la realización de diferentes páginas web de forma más
profesional, como pueden ser, entre otras, Aptana, Amaya, Dreamweaver y
Kompozer.
Adobe DreamWeaver
Página 73 de 105
Esta serie de editores utilizan diferentes menús e iconos en los que podemos
añadir:
1. Algunas etiquetas (directivas) de HTML sin que las tengamos que

teclear.
2. Reglas estilo CSS
3. Diferentes funciones destinadas a la creación y mantenimiento de la

página web.
Cuando tengamos la página web lista para su posterior publicación en

Internet, vamos a necesitar un servidor de páginas web en los que podamos
almacenar las distintas páginas. El servidor web es un software que se
encuentra en el propio ordenador y debe estar conectado siempre a Internet.
Cuando pongamos las páginas en el servidor, ya se hacen accesibles a

todos los usuarios que pertenezcan a la misma red.
Existen proveedores de servicios de Internet que ofrecen a sus clientes, sitios

webs gratuitos para que pueden publicar sus páginas web personales o
corporativas y, de esta forma, evitamos instalar un servidor web propio.
1.1. Definiciones y estándares SGM.
Veamos una serie de definiciones básicas para poder acercarnos un poco a

estos lenguajes.
La definición que más se acerca a la hora de definir el HTML (Hyper Text

Markup Language), lenguaje de marcado de cifrado, es utilizado para
conseguir establecer un límite sobre los diferentes elementos del lenguaje.
Permite describir el contenido y la estructura de las páginas web y éstas,

pueden ser interpretadas y visualizadas haciendo uso de los distintos
navegadores de Internet como pueden ser, entre otros, Firefox, Internet
Explorer o Chrome.
Gracias al lenguaje HTML podemos publicar una serie de documentos en

línea que contengan encabezados, textos, listas, tablas, foros, etc., y tenemos
la opción de poder recuperar información novedosa mediante otros enlaces
de hipertexto (con un solo clic del ratón). También permite la opción de
Página 74 de 105
diseñar interfaces con formularios, en los que los usuarios tengan la

posibilidad de poderlos rellenar con sus datos. Sin embargo, HTML no
permite modificar los datos que se introducen en los formularios. Si necesita
hacerlo, debe hacer uso de algunos lenguajes de programación específicos
como son, entre otros, PHP y JSP.
Otra definición bastante importante, es la de SGML (Standard Generalized

Markup Language) tecnología estándar que utilizamos para definir aquellos
lenguajes de marcado generalizado que cuentan con la posibilidad de
organizar, mediante etiquetas, los distintos documentos. A partir de SGML,
se creó posteriormente, HTML presentando una versión más simplificada.
Este estándar está basado, principalmente en dos postulados que

detallamos, a continuación:
1. El marcado tiene que ser declarativo, es decir, es conveniente que

describa la estructura que tiene un documento junto con otros
atributos.
2. El marcado tiene que ser riguroso, es decir, permite que otros

programas, procesen los documentos.
A la hora de definir documentos, utilizamos DTD (Document Type Definition),

que ofrece la posibilidad al navegador, de conocer la definición del tipo de
documento que hay que interpretar.
Una UDT es un documento que está basado en SGML y cuenta con las
distintas reglas sintácticas que permiten definir un tipo de documento
determinado. Cuenta con elementos permitidos junto con sus atributos,
además de otras funciones sobre anidación de elementos y los valores de los
atributos. Si comprobamos un documento con su correspondiente UDT. Si la
cumple, verificaremos que es válido. Fallido en caso contrario.
A continuación, vamos a ventrarnos en la definición de XHTML (Extensible

HyperText Markup Language). En este caso, nos encontramos con un
lenguaje que está considerado como una variante, bastante más restrictiva y
ordenada de HTML, que se lleva a cabo mediante la utilización de la propia
sintaxis de XML (Extensible Markup Language).
En sus comienzos, fue considerado como el sustituto de HTML, aunque,

cuando se llevó a la práctica, no fue así debido a una serie de diferencias que
Página 75 de 105
se dieron entre los distintos fabricantes. Fue HTML quien siguió en un

contínuo crecimiento.
Aunque XML cuenta casi con los mismos elementos que HTML, debemos
señalar que su sintaxis es diferente, ya que, en este caso, se basa en una
composición de los diferentes elementos más coherente que en HTML. Para
ello, trabaja separando el contenido de un documento de su formato sin
alterar su contenido.
1.2. Versiones HTML.
Debido al crecimiento tan rápido de la web y a cómo van evolucionando las

versiones HTML, aparece la necesidad de estandarizarlo para que, autores y
navegadores, puedan reconocer el tipo de versión de HTML que pueden
utilizar.
HTML llegó a convertirse en estándar en 1995 y, con el paso de los años, ha

estado en un desarrollo constante de evolución. Hace algunos años, la
versión de HTML recomendada por el W3C era HTML 4.01.
Cuando diseñamos una página web, es conveniente especificar la versión de

HTML con la que vamos a trabajar, y lo haremos utilizando en la etiqueta
<!DOCTYPE> en la primera línea. Gracias a esta información, el navegador
puede interpretar de forma correcta. HTML 4.01 cuenta con tres variantes
disponibles de DTD:
• HTML 4.01 Strict (Strict DTD). Es la más restrictiva de todas ya que no

permite la utilización de etiquetas que ya sean anticuadas, sólo
permite hacer uso de las propias que estás definidas en HTML 4.01.
Página 76 de 105
Si queremos utilizar esta versión, escribimos en la primera línea la

siguiente instrucción:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

http://www.w3.org/TR/html4/strict.dtd>
• HTML 4.01 Transitional (Transitional DTD)
• HTML 4.01 Frameset (Frameset DTD)
2. Estructura de un documento HTML
2.1. Identificación SGML.
Antes de comenzar a utilizar cualquier lenguaje de marcas es conveniente

familiarizarnos con una serie de normas básicas que debemos tener en cuenta
como:
• Etiquetas
Las etiquetas, también conocidas como marcas, definen una serie de

elementos que forman el léxico del lenguaje HTML. Se encuentran entre los
signos de menor que (<) y mayor que (>). Podemos diferenciar entre dos
tipos de etiquetas: cerradas y abiertas.
o Etiquetas cerradas.
Consta de una etiqueta para la apertura que indica el comienzo de la etiqueta

y otra de cierre que indica que hemos terminado de trabajar con la etiqueta
en cuestión y lleva el símbolo “/” antes del nombre.
Por ejemplo:
<p>
…
</p>
Página 77 de 105
o Etiquetas abiertas.
Cuentan con una única palabra reservada para indicar el inicio y fin de la
etiqueta a la vez.
Por ejemplo:
<hr>
<br>
<img>
• Atributos
Los atributos, al igual que las etiquetas, se pueden definir tanto en

mayúsculas como en minúsculas, aunque los valores que se asignen a los
atributos, sí son sensibles a mayúsculas o minúsculas. Por ello, es
recomendable utilizar siempre minúsculas para etiquetas y para los atributos
y, de esta forma, evitar confusiones.
Las etiquetas pueden contener atributos si necesitan realizar alguna

configuración sobre alguna característica determinada. Estos atributos se
definen a continuación de la palabra reservada en la etiqueta de apertura
separada por un espacio en blanco y antes del signo de cierre. Asignaremos
el valor correspondiente al atributo a través del signo “=”.
Cada comando cuenta con una serie de atributos con sus

correspondientes valores, como, por ejemplo:
<p ALIGN = “left”>
Definición de un párrafo y alineación del texto a la izquierda.

Es recomandable poner el valor entre dobles comillas para que sea más
legible.
• Comentarios
Los comentarios son unas líneas que definen, de cara al usuario, lo que vamos
realizando en cada momento, aunque no se interpretan por el navegador.
Página 78 de 105
Es conveniente que, por parte del desarrollador, utilice, a lo largo del código
fuente una serie de comentarios para explicar, con sus palabras lo que se va
realizando en cada momento. De esta forma, se pretende conseguir que, si
alguien necesita trabajar con el código, sea capaz de interpretarlo de un
simple vistazo gracias a los comentarios que aparecen en él.
Los comentarios van escritos entre los símbolos <!- - y - ->.
Por ejemplo:
<!- - Esto es un comentario - ->
• Estructura básica
Como ya hemos indicado, las etiquetas que utilicemos en HTML, siempre van
a ir entre los símbolos “<” y “>”. Y, cada vez que tengamos que cerrar una
etiqueta, pondremos el nombre correspondiente cmenzando con el símbolo
“/”.
Todas las etiquetas afectan al código que se encuentre delimitado entre la

apertura y cierre de la etiqueta correspondiente.
<html> Inicio del documento

<head> Comienzo de la cabecera
<title> Inicio título del documento
Título
</title> Fin título del documento
…
</head> Fin de cabecera
<body> Inicio del cuerpo

…
</body> Fin de cuerpo
</html> Fin documento
Página 79 de 105
HTML5, mediante unas etiquetas nuevas, añade una serie de características

y elementos cuya función es facilitar la tarea a los autores de la aplicación
web.
HTML5 se basa, principalmente en una estructuración avanzada que se

encarga de definir los contenidos agrupándolos en distintas etiquetas que
tengan un nombre asignado correspondiente con la tarea que se va a realizar.
Algunas de estas etiquetas, serían las que detallamos a continuación, que se

refieren a:
o <header>. Encabezado de la página.
o <nav>. Enlaces de navegación.
o <article>. Algún artículo que se haya publicado.
o <section> Parte correspondiente a algún artículo.
o <aside>. Barras laterales.
o <footer>. Pie de página.
o <dialog>. Distintos diálogos o comentarios.
Además de estas etiquetas, HTML5 también cuenta con elementos como

<div> y <span>, que utilizados para poder agrupar los diferentes elementos
hijos haciendo uso de atributos como: class, id o tittle. De esta manera, se
pretende utiizar una misma semántica con un estilo común.
2.2. Cabecera.
La cabecera del programa, se encuentra siempre entre
<head>
…
</head>
Que se encuentra dentro de un elemento superior como es <html>.
Dentro de la cabecera es donde vamos a definir los elementos generales,

como el título de la página:
Página 80 de 105
• <title>. Es el título que va a aparecer en el navegador web, en la barra

superior.
• <meta>. Encargada de indicar el contenido de nuestras palabras junto
con las palabras clave. Esta directiva, suele llevar dos atributos (name
y content) que hacen referencia al nombre de la página y a sus
principales contenidos.
<meta name = “description” content = “Página principal ILERNA con

alumnos y profesores”>
<meta name = “keywords” content = “Nombre y apellidos de alumnos
matriculados”>
Otro uso diferente de la etiqueta <meta> es el “refresco automático”

que, transcurrido un tiempo estimado, pasa a actualizarse de nuevo la
misma página. Es bastante recomendable para aquellas páginas en las
que el contenido se modifica con mucha frecuencia.
<meta http-equiv = “refresh” content = “10”; url =

http://www.google.es”>
Con esta instrucción, estamos indicando que, pasados 10 segundos, se va a

acceder a la página web de goolge.
• <base>, al que le podemos indicar una URL base de algún documento,

sonidos, gráficos, etc. Que hagan referencia a una determinada página
web.
Cuando creamos una página web, es conveniente que, inicialmente,

realicemos una planificación de su diseño para, seguidamente,
ordenar la información y recursos disponibles que se van a ofrecer.
Para llevar a cabo esta tarea, es recomandable que hagamos uso de
una estructura de directorios.
Página 81 de 105
2.3. Cuerpo del documento.
El cuerpo del programa, se encuentra siempre entre
<body>
…
</body>
Siempre situado detrás de la cabecera <head>. Va a contener todo el cuerpo

correspondiente a una determinada página web junto con los elementos
propios de la página como pueden ser, gráficos, textos, imágenes, etc.
En el cuerpo de un programa, también tenemos la posibilidad de definir una

serie de acciones necesarias para eventos más concretos, entre los que
podemos destacar:
• onload. Cuando se descarga el contenido completo de una página.
• onunload. Cuando un documento se va a descargar.
• ononline. Cuando hay conexión a Internet.
• onoffline. Cuando no hay conexión a Internet.
• onafterprint. Cuando terminamos de imprimir un documento.
• onbeforeprint. Cuando finalizamos la impresión de un documento.
Además, existen un conjunto de atributos (opcionales) de <body> que

permiten realizar diferentes configuraciones sobre la apariencia de un
documento. Hoy en día están obsoletos ya que HTML5 no los soporta.
Algunos de ellos son: bgcolor, text, link y vlink.
Página 82 de 105
3. Texto
3.1. Bloques de texto.
Saltos de línea
br Representa un salto de línea.

Hr Representa un salto de párrafo
Párrafos
<p> Escribe un texto en forma de párrafo. </p>
<blockquote> Permite visualizar una cita con el margen izquierdo mayor

produciéndose un efecto de una sangría </blockquote>
<pre> Devuelve una copia exacta del texto respetando los espacios en
blanco, tabulaciones y retorno de carro, es decir, tal y como se ha escrito.
</pre>
3.2. Formatos y elementos.
• Colores
Podemos representar los colores mediante el símbolo de “#” seguido de tres

pares de dígitos hexadecimales. El rango de colores indica la intensidad de
los colores primarios (rojo, verde y azul), que en dígitos hexadecimales son
(#RRVVAA).
Los diferentes pares de cigras hexadecimal, van a oscilar desde 00 hasta FF

proporcionando un rango que va desde 0 hasta 255 valores diferentes.
También tenemos otra forma diferente de expresar colores en HTML

haciendo uso de una notación hexadecimal más corta, que utiliza un dígito
para cada color (#JVA). En este caso, el rango de valores va a oscilar entre 0
y 15 o si lo preferimos, podemos indicar el color de forma directa: Red,
Green, Blue.
Página 83 de 105
• Cabeceras
Existen seis tipos diferentes de cabeceras (elementos de encabezado):
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
El texto que se escriba en h1 va a ser el del título de mayor tamaño hasta el

de h6, que va a ser el menor.
Contenido de ejemplo Visualización

<h1> Texto de Prueba </h1> Texto de Prueba
Texto de Prueba
<h6> Texto de Prueba </h6>
• Semántica en textos
Son una serie de elementos HTML que ofrecen un significado a una parte del
contenido de un texto, haciendo uso del texto en negrita, subrayado o
cursiva (<b> </b>, <u> </u> y <i> </i>).
Existen algunas etiquetas, bastante parecidas entre sí, que tienen como finm
ofrecer un estilo diferente para alguna letra especial de un texto
determinado.
Algunos tipos de los elementos semánticos más utilizados para los distintos
textos los vemos en el cuadro que se detalla a continuación.
Página 84 de 105
4. Hipervínculos
Los hipervínculos son elementos del lenguaje HTML que permiten acceder a
otro recurso, es decir, lo podemos definir como un enlace que apunta a otro
sitio web, un fichero, una imagen, etc.
La sintaxis que debemos utilizar a la hora de incluir un hipervínculo es:

<a> </a>
de tal forma que, el texto que se encuentre en esa directiva,
se puede convertir en un hipervínculo.
Si hacemos clic con el ratón, nos debe llevar al sitio referenciado.
En el caso en el que el sitio web esté referenciado por un texto, debe

aparecer subrayado y de otro color.
El atributo href es el que nos ofrece la posibilidad de crear un hiperenlace.

Debemos indicar una URL que va a ser a la que queramos acceder al hacer
clic en el hiperenlace. A continuación, si en el elemento <a> no indicamos el
atributo href, entonces el elemento representa un marcador de posición que
va a ser a la que referencie otro hipervínculo en su atributo href
Disponemos de otro atributo, target (opcional) que va a hacer referencia al

destino en el que se va a mostrar la información disponible en esa dirección
a la que nos lleva.
Anclas y vínculos internos
Los vínculos internos permiten acceder a un sitio concreto dentro de una

página web. Aunque, si queremos hacer uso de los vínculos internos, antes
debemos establecer un ancla que es el punto fijo de posición al que
accederemos tras un vínculo interno.
Página 85 de 105
4.1. Relativos y absolutos.
• Absolutos.
Aquellos que enlazan con páginas, cuya dirección absoluta se indica en el

atributo href del comando a. Suelen ser páginas web externas a nuestro
proyecto.
La sintaxis que debemos utilizar a la hora de incluir un hipervínculo es:

<a> </a>
de tal forma que, el texto que se encuentre en esa directiva,
se puede convertir en un hipervínculo.
Si hacemos clic con el ratón, nos debe llevar al sitio referenciado.
<a href = “http://www.google.es”>
Las direcciones absolutas empiezan a direccionarse desde el comienzo de la

ruta que indicamos.
• Relativos.
Aquellos enlaces cuya dirección relativa, se indica en el atributo href del

comando a. Suelen ser enlaces a páginas internas al mismo proyecto.
<a href = “./pagina2/pagina2.html”>
Las direcciones relativas empiezan a direccionarse a partis del directorio

actual.
5. Imágenes
Las imágenes pueden estar en diferentes formatos como pueden ser los
mapas de bits (archivos PNG, GIF, JPEG), documentos vectoriales de una
página (archivos PDF, XML), mapas de bits animados, gráficos de bits
animados, etc.
Página 86 de 105
Aunque existen otros tipos de archivos que no se consideran imágenes, como

pueden ser los archivos PDF de varias páginas, interactivos, documentos
HTML, documentos sin formato, archivos SVG.
Gracias al elemento <img> podemos representar una determinada imagen

ayudados por su atributo (obligatorio) src. En este caso, indicamos:
• La dirección válida en la que está la imagen que queremos visualizar
• Una ruta relativa si es que la imagen está en alguna parte local
• Una URL si se refiere a una imagen externa que se encuentra

almacenada en una página web diferente.
El atributo alt nos permite que indiquemos un texto alternativo que sea capaz
de representar el contenido de una imagen. Podemos utilizar esta forma en
el caso en el que el navegador no pueda visualizar o descargar las distintas
imágenes.
Las etiquetas <figure> y <figcaption> son novedosas para HTML5 y nos

ofrece la posibilidad de agrupar una imagen junto con su información o
leyenda.
5.1. Incorporación de imágenes.
Una vez llegado el momento de añadir imágenes a las diferentes páginas

web, debemos contar con que los navegadores, permiten trabajar con
ficheros que tengan formatos JPEG o GIF ya que son los más recomendables.
Si queremos que una imagen se muestre en una web, necesitamos, en primer

lugar, declarar una etiqueta <img> que no necesita etiqueta de cierre.
Por ejemplo:
<img src=”imagen.jpg” alt=”Texto”>
Aparte de estos dos aributos, también contamos con algunos más que
declaramos en la siguiente tabla.
Página 87 de 105
Etiqueta Atributo Valor Significado

Img arc URL Indica la URL de la imagen
alt Texto Define un texto alternativo
por si no se encontrara la
imagen deseada
align Top, middle, Alinea la imagen respecto al
bottom, left, texto, tanto en sentido
right, center horizontal como vertical
border Número Pone un borde o marco a la
imagen. Se expresa en
píxeles
height Número % Especifica la altura de la
píxeles o porcentaje
width Número % Especifica la anchura de la
píxeles o porcentaje
hspace Número Especifica en píxeles la
separación horizontal entre el
texto y la imagen
vspace Número Especifica en píxeles la
separación vertical entre el
texto y la imagen
5.2. Uso de mapas sensibles.
Los mapas de imagen nos permiten definir distintas zonas “pinchables”

dentro de una imagen. De tal forma que el usuario puede hacer clic sobre las
zonas definidas y, cada una de éstas, puede apuntar a una URL distinta.
Las diferentes zonas que se definen en una imagen, se van creando mediante
rectángulos, círculos y polígonos. A la hora de crear un mapa de imagen:
En primer lugar, insertamos la imagen original mediante la etiqueta <img>.
A continuación, utilizaremos la etiqueta <map> para defnir las diferentes

zonas o regiones de la imagen. Cada una de estas zonas, la definiremos con
la etiqueta <area>.
Veamos un ejemplo práctico de los mapas de bits.
Página 88 de 105
<map> Mapa de imagen

Atributos comunes Básicos, i18n y eventos
Atributos específicos • name = “texto”. Nombre que
identifica de forma única al mapa
definido (es obligatorio indicar un
nombre único)
Tipo de elemento Bloque y en línea

Descripción Se emplea para definir mapas de imagen
<area> Área de un mapa de imagen

Atributos comunes Básicos, i18n, eventos y foco
Atributos específicos • href = “url”. URL a la que se accede al
pinchar sobre el área.
• Nohref = “nohref”. Se emplea para las
fórmulas que no son seleccionables
• Shape = “default / rect / circle / poly”.
Indica el tipo de área que se define
(toda la imagen, rectangular, circular o
poligonal)
• Coords = “lista de números”. Se trata
de una lista de números separados por
comas que representan las
coordenadas del área. Rectangular =
X1, Y1, X2, Y2…XnYn (coordenadas de
los vértices del polígono). Si las últimas
coordenadas no son iguales que las
primeras, se cierra automáticamente el
polígono uniendo ambos vértices.
Tipo de elemento Bloque y en línea

Descripción Se emplea para definir mapas de imagen
Página 89 de 105
Mediante este círculo, triángulo y los dos rectángulos, podemos acceder a 4

zonas diferentes de la imagen a través del siguiente código HTML.
<img src="imagen.gif" usemap="#mapa_zonas" />

<map name="mapa_zonas">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24"
href="triangulo.html"
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211"
href="mailto:rectangulo@direccion.com" />
<area shape="default" nohref="nohref" />
</map>
6. Tablas.
Son elementos de HTML que nos ofrecen la posibilidad de representar datos
de una o varias dimensiones (matriz) con la información distribuida en filas y
columnas.
Uno de los objetivos que pretende HTML5 es conseguir separar el contenido

que se pretende mostrar de una página web, de la forma que lo ha
presentado, mediante hojas de estilo CSS.
A la hora de definir una tabla, debemos hacerlo haciendo uso de la siguiente

directiva:
<table>
…
</table>
Página 90 de 105
Hasta el momento, y para versiones anteriores a HTML5, se han podido

utilizar distintos atributos como: align, bgcolor, cellspacing, cellpadding,
width, frame, rules y summary. Sin embargo, desde la aparción de HTML5,
sólo soporta el atributo border dentro de la etiqueta <table>, que nos ofrece
la información de si las celdas de la tabla deben tener fronteras o no. Según
cual sea la respuesta, va a devolver 0 o 1.
Si tenemos una tabla, el primer elemento que podemos representar es que

que aparece dentro de la etiqueta:
<caption>
</caption>
Representa el título de la tabla que lo contiene.
6.1. Filas, columnas y celdas.
Las tablas se componen de un número de filas y columnas que se pueden

representar a través de la directiva:
<tr> …</tr>
Que permiten definir una nueva fila.
Después, cada fila, cuenta con una serie de elementos:
<td> …</td>
Nos permite ir generando las diferentes columnas con su valor asignado
dentro de una determinada fila
<th> …</th>
Realiza columnas de cabecera y contiene un texto centrado y en negrita
Cada dato de una fila y una columna determinada, contiene un dato que
denominamos valor.
6.2. Combinación de celdas.
Es posible combinar un conjunto de celdas de una determinada tabla por lo

que van a afectar a su definición:
Página 91 de 105
<colgroup> Representa las columnas de una tabla

</col> Indica el número de columnas que tiene
una tabla
Disponemos de un conjunto de elementos que nos permiten referirnos a las

diferentes partes de una tabla en el lenguaje HTML, como:
<thead> Cabecera
<tbody> Bloques de filas
<tfoot> Pie
7. Listas.
7.1. Listas numeradas.
Ofrece la posibilidad de poder representar los diferentes elementos de una

lista enumerándolos a todos dependiendo del lugar que ocupen
En las listas numeradas, utilizan las directivas:
<ol>
<li>Apartado 1</li>
<li>Apartado 2</li>
…
</ol>
Y se muestra de la siguiente forma:
1. Apartado 1
2. Apartado 2
…
Por ser una lista numerada.
La directiva <ol> tiene disponibles los siguientes parámetros:
• start = numero. Permite seleccionar el número que deseemos que sea

el primero de la lista.
• Type = tipo. Nos permite seleccionar el tipo de numeración que

deseemos.
Página 92 de 105
En HTML5, podemos diferenciar entre los siguientes tipos:
• 1. Expresa números desde 1, 2, 3, etc.
• a. Expresa letras minúsculas a partir de a, b, c, etc.
• A. Expresa letras mayúsculas a partir de A, B, C, etc.
• i. Expresa números romanos desde i, ii, iii, etc.
• I.Expresa números romanos en mayúscula desde I, II, III, etc.
7.2. Listas no numeradas.
Ofrece la posibilidad de poder representar los diferentes elementos de una

lista sin enumerar independientemente del lugar en el que se vayan a
almacenar. Lo que sí lleva es una especie de “viñeta” para marcar la lista.
En las listas no numeradas, utilizan las directivas:
<ul>
<li>Apartado 1</li>
<li>Apartado 2</li>
…
</ul>
o Apartado 1
o Apartado 2
o …
Por ser una lista no numerada.
La directiva <ul> tiene disponibles los siguientes parámetros:
• Type = tipo. Nos permite seleccionar el tipo viñetas que deseemos.
En HTML5, podemos diferenciar entre los siguientes tipos:
Página 93 de 105
• disk. Expresa una viñeta en forma de disco.
• circle. Expresa una viñeta en forma de círculo.
• square. Expresa una viñeta en forma de cuadrado.
7.3. Listas de definición o glosario.
Ofrece la posibilidad de poder representar los diferentes elementos de un

diccionario formado por su término y su definición.
En las listas de definición, se utilizan las directivas
<dl>
<dt>Coche</dt>
<dd>Vehículo de cuatro ruedas</dd>
<dt>Moto</dt>
<dd>Vehículo de tres ruedas</dd>
…
</dl>
Coche
Vehículo de cuatro ruedas
Moto
Vehículo de cuatro ruedas
Página 94 de 105
8. Formularios.
Utilizaremos los formularios cuando necesitamos recoger la información
específica de un objeto en cuestión.
Los formularios están compuestos, entre otros, por diferentes elementos

como las cajas de texto (textBox), casillas de verificación (checkbox), casillas
de opción (radio button), listas desplegables y subformularios.
Toda la información que recogen los formularios debe traterse por archivos
que se deben implementar por el propio desarrollador. De esta forma, lo
almacenaremos en bases de datos diseñadas previamente que, en este
manual, no vamos a detallar ya que sólo nos centraremos en la definición y
diseño de los formularios.
Esta información también puede ser enviada o procesada mediante email o

servidor web a través de un botón de envío (submit).
8.1. Propiedades de los formularios.
Un formulario se define mediante el comando
<form>
…
</form>
Por tanto, dentro de este bloque, debemos implementar todos los elementos
necesarios que, previamente, hemos enumerado. Esta marca form, consta de
varios atributos bastante importantes, como pueden ser los atributos:
• action: indica el lugar al que se envían los datos.

• method: indica le método de transferencia de los datos en el servidor
web. Los valores que puede tomar este atributo pueden ser:
• post. Para el envío de los datos al usuario de forma codificada.
• get. pPara el envío de los datos a una dirección web.
Página 95 de 105
• tarject: se utiliza para indicar o especificar, dónde vamos a mostrar la

respuesta del formulario. Los diferentes valores que puede tomar este
atributo son:
o “_blank”. Se muestra en una ventana nueva.
o “_self”. Se muestra en la misma ventana del formulario.
o “_parent”. Se muestra en la ventana padre, es decir, la que
precede al formulario.
• name: identifica, mediante un nombre, al formulario. De esta forma,
podemos llamarlo desde otro archivo. Recomendamos que el nombre
de formulario sea único para facilitar su tratamiento.
8.2. Elementos de los formularios.
Dentro de un formulario, podemos tener distintas directivas que vana

componer todo el diseño. Para comenzar, podemos agrupar un conjunto de
elementos bajo un nombre, mediante el siguiente comando
<fieldset> … </fieldset>
A continuación, y mediante las etiquetas:
• <input> … </input>
Vamos a poder crear varios tipos de elementos dentro de un formulario,

dependiendo del valor que asignemos al atributo type. Lo primero que
recomendamos dentro de esta marca es especificar el valor del atributo
name, ya que. de esta forma. Podemos identificar el elemento.
Seguidamente, elegiremos, mediante el atributo type el tipo de elemento
que deseamos tener en el formulario.
• <textarea> … </textarea>
En este caso, definiremos un campo de texto de grandes dimensiones para

que el usuario tenga la posibilidad de escribir todo lo deseado sin ningún
tipo de limitaciones. Este comando se utiliza en muchos formularios cuando
escribimos en un campo de observaciones.
Página 96 de 105
Los atributos de esta marca, serían los siguientes:
• name. Identifica el nombre del área de texto.

• cols. Número de caracteres que puede contener cada línea.
• rows. Número de líneas del área de texto.
• readonly. Para impedir que el usuario pueda editar este campo.
<select>
<options>
</options>
</select>
Este bloque de comandos se utiliza para definir una lista desplegable con
opciones. Tendremos tantas marcas options como opciones deseemos tener
en nuestra lista.
9. Marcos
9.1. Definición de marcos (frames).
Los marcos ofrecen la posibilidad de poder mostrar varios archivos HTML en

la misma ventana del navegador.
También tenemos la posibilidad de que estos frames interactúen como, por

ejemplo, cuando presionamos un enlace en un frame para conseguir acceder
a él, contamos con la posibilidad de cargar una página en otro frame
diferente.
Es recomendable la utilización de frames cuando tengamos una situación que

lo aconseje. El uso de los frames hace que los sitios sean menos accesibles y,
por tanto, también es más difícil imprimir el contenido que tengan.
Página 97 de 105
9.2. Uso de marcos.
Vamos a ver la forma de utilizar dos frames para poder visualizarlos a la vez.
<html>
<head>
<title>Prueba de frames</title>
</head>
<frameset cols=”20%,80%”>
<frame src=”página2.html”>
<frame src=”página3.html”>
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
En este ejemplo, podemos ver la estructura de un documento HTML que

realiza la función de esquema de una página web, dividida en dos columnas.
La primera, ocuparía un 20% del total de la página, mientras que, la segunda,

el resto.
En el primer marco, se puede visualizar el documento “pagina2.html”, y en

el segundo marco, lo enlazamos a la “página3.html”. Por tanto, para hacer
uso de los marcos, vamos a tener que cargar tres archivos html diferentes: el
principal y los dos enlaces correspondientes a los marcos.
10. Editores y gestores de HTML

Uno de los aspectos por los que el lenguaje de marcas es el más utilizado
para la creación de páginas web, es la facilidad de poder escribir el código
en cualquier herramienta de procesador de texto.
En este apartado, vamos a detallar los distintos editores de los que

disponemos, desde los más básicos hasta los más sofisticados para
implementar dicho código.
Página 98 de 105
10.1. Editores simples.
Culquier sistema operativo instalado en un equipo informático, dispone de

unas herramientas básicas para escribir un texto determinado. En el caso del
sistema operativo Windows, suministra la herramienta Bloc de Notas, así
como la de NotePad para la creación de un fichero de texto con extensión
.txt.
Este tipo de fichero es uno de los más básicos que podemos encontrar en un
equipo informático ya que no necesita utilizar ninguna herramienta
sofisticada para su manipulación y visualización.
Haremos uso de esta herramienta básica para escribir un código en HTML

con la salvedad de almacenarlo con la extensión que lo identifica: .html.
De esta forma, podemos tener nuestras páginas web ya codificadas de forma

sencilla, intuitiva y fácil.
10.2. Editores avanzados.
Debido al gran auge y complejidad en el que se ha convertido el desarrollo

de las páginas web desde su existencia, cada vez, es más complicada la
implementación del código en este lenguaje de marcas ya que en nuevas
versiones, aparecen nuevos comandos con sus correspondientes atributos y
valores para tratar nuevos conceptos que el mercado obliga a insertar.
El código de una página web conlleva numerosas líneas de código,

interacción con otros lenguajes, incrustaciones de códigos y enlaces
externos, etc. Por todas estas características, cada vez resulta más
complicada la identificación de las distintas marcas y, para el desarrollador es
una tarea árida y complicada.
Para solucionar estos inconvenientes, aparecen los editores de texto

avanzados con una interfaz amigable y sencilla de utilizar donde, mediante
distintos colores, podemos diferenciar cada elemento de una parte del
código en lenguaje HTML.
De esta forma, facilita bastante la tarea al desarrollador y a cualquier técnico

que necesite visualizarlo.
Página 99 de 105
Otra de las ventajas que nos ofrecen los editores avanzados es que, ante
cualquier incidencia o error, provee de una seri de opciones para su fácil
identificación.
Entre los ejemplos más conocidos, destacamos: NotePad++ y Sublime text,

editores muy utilizados por la comunidad desarrolladore de código y con la
característica de ser herramientas de código libre.
Podemos descargarla a través de las páginas
https://www.sublimetext.com
https://www.notepad-plus-plus.org
10.3. Gestores de lenguajes HTML.
Una vez que ya tenemos diseñado todo el código de HTML con cualquier
editor de los mencionados en el apartado anterior, el último paso que nos
queda es la visualización de dicho código en cualquier navegador de internet.
Para crear cualquier página web. Solo nos hace falta un editor y navegador
web.
Existen distintos navagadores actualmente en el mercado, entre los que

destacamos: Internet Explorer, Mozilla FireFox y Google Chrome.
A medida que avanzamos en nuevas actualizaciones, estos navegadores

facilitan la visualización del código de la página y la identificación de algún
error que pueda existir en ella
11. Origen y evolución de los CSS.

CSS (Cascading Style Sheets), hojas de estilo en cascada, hace referencia a
un mecanismo que fue creado con la intención de poder ofrecer diferentes
estilos a aquellos elementos html.
Página 100 de 105

Es recomendable trabajar con las especificaciones que corresponden al

formato y estilo de una hoja html, concentrarlas todas en un archivo CSS,
para que, de esta forma, el archivo html sea lo más limpio y preciso posible,
conteniendo solo la información que visualizamos en la página web.
Las hojas de estilo aparecieron con el objetivo principal de separar el

contenido y la estructura de un documento html con formato y estilo en el
que lo vamos a visualizar. Está compuesta por reglas de estilos, cada una para
adoptar un formato de estilo independiente. De esta forma, el conjunto de
todas las reglas hace que se construya la hoja de estilo.
La versión más recomendada del nuevo estándar CSS es la CSS3 y, la W3C,

recomienda su uso.
Una regla se compone de dos partes, el selector y la declaración. El selector

es el nombre que identifica la regla mientras que la declaración, (entre llaves
{}), se compone de pares {propiedad: valor;}. De esta forma, asignamos que
un selector, puede estar compuesto por un grupo de propiedades con su
valor correspondiente.
Entre las principales ventajas que se dan cuando trabajamos con CSS,
podemos destacar:
1. Necesitamos menos código a la hora de escribir
2. Facilidad a la hora de generar código y mantenerlo
3. Documentos más legibles
Página 101 de 105

• Formas de aplicar estilos
o Incluir CSS en un documento
Existen tres formas diferentes de añadir hojas de estilo a los documentos

HTML.
1. Forma 1: CSS en línea
<body>
<p style=”font-family: Verdana; font-size:

médium;”>HOLA MUNDO</p>
</body>
Puede utilizarse para seleccionar el estilo particular de línea.
2. Forma 2: CSS interno
<html>
<head>
<style type=”text/css”>
body {font-family: Courier New;}
h1 {font-family: Arial; font-size: x-large;}
p {font-family: Verdana; font-size: medium;}
</style>
</head>
<body>
<h1>Tipo de Fuente Arial y tamaño grande</h1>
<p>Tipo de Fuente Verdana y tamaño mediano</p>
</body>
</html>
Página 102 de 105

Situado dentro de la etiqueta <style>. Podemos utilizarlo para indicar los

estilos propios de esta página que se corresponden con los estilos globales
propios del sitio web.
3. Forma 3: CSS externo
Primero, creremos el archivo.css en una carpeta como /css
body {margin: 0px;}

td {color: #000000;
font-size: 12px;}
a {color: #FF6600;
font-weigth: bold;}
a:hover {color: #3366CC;}
Y después, vamos a insertar el enlace <link> en cada documento.
<head>
<link rel=”stylesheet” type=”text/css” href=”/css/estilos.css”>
</head>
Página 103 de 105

Bibliografía
Zofío Jiménez, Javier. Aplicaciones Web. MACMILAN Profesional. 2000.
Página 104 de 105

Joya
Página 105 de 105

Libro Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

Libro Aplicaciones Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Libro Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

Módulo 8

UF1: OFIMÁTICA Y HERRAMIENTAS WEB .................................................... 5

1. Instalación de aplicaciones web. .................................................................................... 5

2. Realiza tareas de configuración de aplicaciones de ofimática web. ............................. 16

UF2: GESTORES DE ARCHIVOS WEB .......................................................... 26

1. Instalación de servicios de gestión de archivos web. ................................................... 27

UF3: GESTORES DE CONTENIDOS ............................................................. 38

1. Instalación de gestores de contenidos......................................................................... 38

UF4: PORTALES WEB DE APRENDIZAJE ..................................................... 53

1. Instalación de sistemas de gestión de aprendizaje a distancia. .................................... 53

1.2. Instalación en sistemas operativos libres y propietarios. ..................................... 57

UF5: FUNDAMENTOS DE HTML Y HOJAS DE ESTILO ................................ 71

1. Origen y evolución de HTML ....................................................................................... 71

2. Estructura de un documento HTML ............................................................................. 77

10. Editores y gestores de HTML ...................................................................................... 98

11. Origen y evolución de los CSS................................................................................... 100

UF1: Ofimática y herramientas web

1. Instalación de aplicaciones web.

1.1. Origen y evolución de las aplicaciones web.

En un equipo local, para poder trabajar y realizar tareas específicas con

Podemos extrapolar este concepto anterior a la red de ordenador. Por tanto,

A estas aplicaciones instaladas en el servidor y que por tanto podemos usar

Estas aplicaciones web, han ido evolucionando, de forma considerable la

Un año después, en 1996, los desarrolladores Sabeer Bhatia y Jack Smith,

(por primera vez), que el público en general, pueda acceder y realizar

Otros servicios importantes que han ido ocurriendo a lo largo de

Existen numerosas aplicaciones web, de diferentes tipos, como pueden ser

Según su tipo de acceso, las aplicaciones web pueden ser:

• Públicas. Algunas de las aplicaciones web públicas pueden ser: los

En cuanto a la popularidad de las aplicaciones web, destacamos las siguientes

• Fácil acceso ya que cuenta sólo con un navegador web.

World Wide Web (www) es un grupo de protocolos que permite consultar de

Algunos servicios y protocolos que podemos encontrar en Internet, son:

• Envío de correo electrónico (SMTP)

Las páginas web estáticas son aquellas que muestran información al

Desarrollos de aplicaciones web

Debido a la creación de Internet, aparecieron un gran número de

En un primer momento, se empezó a trabajar con la arquitectura cliente-

cliente realiza la petición a otro programa, y es el servidor, el que debe darle

Las aplicaciones web se encargan de denegar de forma dinámica una serie

Esta Web 2.0 se considera más, una forma de entender y de trabajar

Las principales características de esta Web 2.0 consisten:

• Hacia la Web 3.0.

También conocida como la web semántica. Se encuentra en pleno

Es una web más “inteligente” ya que permite la posibilidad de realizar

En este caso, la información va a disponer de contenido semántico

Las tecnologías principales que permiten el desarrollo de la WEB 3.0

o RDF (Resource Description Framework): Su función principal se

o XML (Extensible Markup Language): Es un lenguaje estándar que

1.2. Instalación de aplicaciones web. Características y entorno de

Para llevar a cabo la gestión de las diferentes aplicaciones y servicios web

Cuando llevamos a cabo un proceso de instalación, debemos llevar a cabo

1. Ejecutar el fichero que hemos descargado previamente. Debe iniciar a

2. Seleccionamos Siguiente. Y, si el caso lo requiere, podemos

3. A continuación, Install para continuar. Seguidamente, seleccionamos

• Permiten una comunicación más fluida y dinámica en cuanto a la

1.3. Correo electrónico web. Gestión de cuentas de usuario.

El correo electrónico es uno de los acontecimientos más importantes que,

Mediante el correo electrónico podemos comunicarnos con amigos,

Entre sus ventajas principales podemos encontrar que es: