Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Aplicaciones Web
Aplicaciones Web
WEB
Sistemas microinformáticos y redes
Ilerna
ILERNA, centro autorizado con código 25002775 (Lleida), 28077294 (Madrid) y 41023090 (Sevilla) www.ilerna.es
© Ilerna Online S.L., 2021
© Imágenes: Shutterstock
Reservados todos los derechos. No se permite la reproducción total o parcial de esta obra, ni su incorporación a un
sistema informático, ni su transmisión en cualquier forma o por cualquier medio (electrónico, mecánico, fotoco-
pia, grabación u otros) sin autorización previa y por escrito de los titulares del copyright. La infracción de dichos
derechos puede constituir un delito contra la propiedad intelectual.
Ilerna Online S.L. ha puesto todos los recursos necesarios para reconocer los derechos de terceros en esta obra
y se excusa con antelación por posibles errores u omisiones y queda a disposición de corregirlos en posteriores
ediciones.
3
4. Instalación de un gestor de contenidos...............................................32
4.1. Instalación de sistemas operativos libres y propietarios.................... 34
4.2. Creación de usuarios y grupos de usuarios.......................................... 34
4.3. Utilización de la interfaz gráfica........................................................... 37
4.4. Funcionalidades proporcionadas por el gestor de contenidos........... 38
4.5. Gestión de contenidos. Extensiones..................................................... 39
4.6. Configuración de módulos y menús. Sindicación................................ 43
4.7. Copias de seguridad.............................................................................. 43
4.8. Búsqueda e interpretación de documentación técnica...................... 44
5. Instalación de sistemas de gestión de aprendizaje a distancia...........46
5.1. Elementos lógicos: comunicación, materiales y actividades.............. 50
5.2. Instalación en sistemas operativos libres y propietarios.................... 50
5.3. Creación y configuración de perfiles de usuario.................................. 53
5.4. Activación y uso de funcionalidades. Foros......................................... 55
5.5. Creación de cursos siguiendo especificaciones................................... 59
5.6. Copias de seguridad. Mecanismos de restauración
de cursos y datos............................................................................................ 62
5.7. Búsqueda e interpretación de documentación técnica...................... 63
6. Origen y evolución de HTML................................................................66
6.1. Definiciones y estándares SGML.......................................................... 69
6.2. Versiones HTML..................................................................................... 71
7. Estructura de un documento HTML......................................................72
7.1. Identificación SGML.............................................................................. 73
7.2. Cabecera................................................................................................. 75
7.3. Cuerpo del documento.......................................................................... 76
8. Texto......................................................................................................78
8.1. Bloques de texto.................................................................................... 79
8.2. Formatos y elementos........................................................................... 79
9. Hipervínculos........................................................................................82
9.1. Relativos y absolutos............................................................................. 83
10. Imágenes............................................................................................84
10.1. Incorporación de imágenes................................................................ 85
10.2. Uso de mapas sensibles...................................................................... 86
11. Tablas..................................................................................................90
11.1. Filas, columnas y celdas...................................................................... 91
11.2. Combinación de celdas....................................................................... 91
12. Listas...................................................................................................92
12.1. Listas numeradas................................................................................. 93
12.2. Listas no numeradas........................................................................... 93
12.3. Listas de definición o glosario............................................................ 94
13. Formularios.........................................................................................96
13.1. Propiedades de los formularios.......................................................... 97
13.2. Elementos de los formularios............................................................. 97
14. Etiqueta <DIV>.................................................................................100
15. Ejemplos de HTML............................................................................102
16. Editores y gestores de HTML...........................................................106
16.1. Editores simples................................................................................ 107
16.2. Editores avanzados........................................................................... 107
16.3. Gestores de lenguajes HTML............................................................ 108
17. Origen y evolución de los CSS..........................................................110
Bibliografía / webgrafía.........................................................................113
1 INSTALACIÓNDE
INSTALACIÓN DEAPLICACIONES
APLICACIONESWEB
WEB
Aplicaciones web
me
Chro
l gle h)
cia o atc
fi Go iW
ao itt
er or s(
orm Tw eg
ad ble
ef ar av rea
be
d
ion ne ln we
Tu nc ho de os
ou fu l iP nto del
aY aa ce
e ie ión
lan
z iez are zam ric
Se Emp Ap Lan Ap
a
7
Tema 1. Instalación de aplicaciones web
Protocolos web
8
Aplicaciones web
Estáticas vs dinámicas
CONCEPTO
La web 2.0 o web social representa el desarrollo que han tenido las aplicaciones
tradicionales hacia las aplicaciones web que están más enfocadas al usuario.
9
Las principales características de esta web 2.0 son:
– Se considera la web como una plataforma.
– L os diferentes efectos ocasionados en la red los trasla-
da la arquitectura de participación de usuarios.
ste proceso de innovación surge a través de una se-
– E
rie de características distribuidas por desarrolladores
independientes.
l principal fin de esta cadena es adaptar distintos
– E
softwares.
• La web 3.0
10
1.2. Instalación de aplicaciones
web. Características y en-
torno de uso
Las aplicaciones y servicios web ofrecen la posibilidad de
publicar diferentes tipos de contenidos (blogs, wikis, foros,
etc.). Para llevar a cabo la gestión de estos contenidos, los
servidores web necesitan establecer una conexión con los
servidores de base de datos, donde se encuentra alma-
cenada toda la información. Esta conexión se establece
mediante un interprete de lenguaje de programación como
Python, PHP, Perl.
Características
• Permiten una comunicación más fluida y dinámica en
cuanto a la estructura cliente-servidor.
• Ofrecen la 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, soportado por los nave-
gadores web más comunes.
• Utilizan lenguajes interpretados como JavaScript para aña-
dir diferentes elementos dinámicos a la interfaz de usuario.
11
Tema 1. Instalación de aplicaciones web
Una vez que tenemos asignada una cuenta de correo, ya podemos comunicarnos online, sin
necesidad de desplazarnos.
¡RECUERDA!
nombre_elegido@compañía.com
Vamos a realizar los pasos correspondientes para crear una cuenta de correo electrónico. En
este caso, vamos a utilizar como compañía Gmail.
12
Aplicaciones web
• Cita: es una función en la que la única persona que participa es el usuario, por lo que no es
necesario que se reserve ningún tipo de recurso.
• Reunión: es necesario que participen diferentes personas y una de ellas tiene que ser la
encargada de poner en marcha la reunión. Es conveniente que haya asignado un día y una
hora determinada para hacerla.
• 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 solo el usuario. En este caso, no
hace falta programar ninguna hora.
Veamos la configuración para una semana laboral con sus días no laborables en España junto
con su zona horaria.
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 seleccio-
namos la correspondiente.
6. En las listas desplegables que se ajustan a las horas de inicio y fin de la jornada laboral,
seleccionamos también las que se correspondan con el horario.
13
Tema 1. Instalación de aplicaciones web
14
Aplicaciones web
15
2 REALIZACIÓN DE TAREAS DE CONFIGURACIÓN
REALIZACIÓN
DE DE TAREAS
APLICACIONES DE CONFIGURACIÓN
DE OFIMÁTICA
DE APLICACIONES DE OFIMÁTICA WEB
WEB
Aplicaciones web
Para realizar tareas cotidianas en la oficina, utilizamos un paquete que consta de varios
programas informáticos y que facilita las operaciones habituales de 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 para acceder a ellas desde cualquier lugar conectados a internet.
El origen de estas aplicaciones ofimáticas está en la necesidad de realizar las tareas de proce-
samiento 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.
Dentro de este paquete ofimático, contamos con documentos, hojas de cálculo, presenta-
ciones, correos, entre otros.
Para configurar este tipo de aplicaciones solo hay que crear una cuenta, cumplimentando
una solicitud con los datos personales, un usuario y una contraseña que nos permita el acceso
de una forma individual e intransferible.
17
Tema 2. Realización de tareas de configuración de aplicaciones de ofimática web
EJEMPLO
18
Aplicaciones web
1. Editar
2. Visualizar
3. Comentar
19
Tema 2. Realización de tareas de configuración de aplicaciones de ofimática web
BUSCA EN LA WEB
Para más información (tanto de soporte como de
descarga) sobre los productos de Google, incluidos
los que mencionamos en este manual, podemos
dirigirnos a:
https://bit.ly/3aw1ltw
20
2.5.1. Documentos
Además de disponer de las herramientas necesarias de
un procesador de texto, su ventaja es la facilidad con la
que un grupo de usuarios pueden trabajar sobre el mismo
documento. Ya que, en todo momento, con los permisos
oportunos, uno puede ir modificando una imagen, mien-
tras que otro escribe. Las modificaciones se pueden ver en
tiempo real, así como el identificador del usuario que las
está haciendo.
21
Tema 2. Realización de tareas de configuración de aplicaciones de ofimática web
2.5.3. Presentaciones
Este programa es uno de los que no varía con respecto a los
programas ofimáticos locales, como Microsoft u OpenOffice.
PARA + INFO
2.7. Documentación de la
configuración, de las
incidencias aparecidas y de
las soluciones aportadas
Llegados a este punto solo nos queda confeccionar un docu-
mento 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.
22
Aplicaciones web
Este documento debe ser donde hemos tenido que escribir en el momento, los pasos e inci-
dencias ocurridas. Esta guía debe servir como cuaderno de consulta para futuras amplia-
ciones o posibles incidencias ocasionadas.
Otros posibles administradores pueden utilizar este tutorial como posible 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 solucio-
naron algunos incidentes parecidos ocurridos anteriormente. En estos casos hay un apartado
de preguntas frecuentes para recabar todas las dudas surgidas con sus posibles soluciones.
Actualmente existe en la red una gran variedad de foros expertos, e incluso las propias distri-
buidoras poseen comunidades de ayuda al usuario.
23
3 INSTALACIÓN DE SERVICIOS DE GESTIÓN
INSTALACIÓN
DE DE SERVICIOS DE GESTIÓN DE
ARCHIVOS WEB
ARCHIVOS WEB
Aplicaciones web
A la hora de escuchar la música que tengamos almacenada en la web, contamos con una serie
de servicios para escucharla en streaming (en tiempo real). Por ejemplo:
• Google Play Music: servicio que ofrece todo tipo de
contenido, como música, películas, juegos, etc. Nos
permite almacenar y escuchar música offline.
• Amazon Music: en 2007 salió al mercado la platafor-
ma de música de la empresa Amazon. Tiene un catálo-
go disponible para distintas plataformas como MacOs, ¿SABÍAS QUE...?
iOS o Alexa.
ste reproductor (anteriormente llamado Could Player)
E Play surgió de la unión
está integrado con Prime y tiene servicios ilimitados. de varias tiendas, como
Google Music, eBooksto-
• iTunes: herramienta que gestiona todo tipo de docu- re y Andoid Market, con
mentos de audio y vídeo en el sistema operativo Mac
el fin de almacenar toda
IOS de la empresa Apple, que tiene una perfecta sin-
la información, tanto de
cronización entre todos sus productos: iPhone, iPad y
soporte como de descar-
los diferentes ordenadores de sobremesa y portátiles.
Se llega incluso a poder gestionar a través de una tele- ga, en un lugar común.
visión con adaptador web Apple TV.
corto plazo, esta herramienta se integrará en otras
A
tres apps: Apple Music, Apple Podcast y Apple TV.
PARA + INFO
25
Tema 3. Instalación de servicios de gestión de archivos web
Dropbox
26
Aplicaciones web
27
Tema 3. Instalación de servicios de gestión de archivos web
Para ver un ejemplo, 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.
DropBox es una herramienta software que gestiona y sincroniza todos los dispositivos infor-
máticos mediante una carpeta. Es uno de los gestores de archivos más utilizados, debido a su
sencilla utilización.
1. Nos creamos una cuenta en DropBox para reservar un espacio en nuestro disco virtual en:
https://www.dropbox.com/es_ES/
Solo nos faltaría subir los archivos o sincronizar el dispositivo mediante una aplicación cliente
de DropBox que nos facilitase la transmisión de dichos archivos entre el dispositivo real y el
disco virtual en la nube.
El único inconveniente, por tanto, de 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 gratui-
ta esta herramienta. Mediante un proceso de instalación rutinario, sincronizamos nuestro
equipo con el disco en la nube.
3. La gestión básica. Esta herramienta de gestión de DropBox permite sincronizar tanto la
inserción de nuevos archivos como la modificación de estos, ya que el proceso de instala-
ción se sincronizará de forma automática cada cierto periodo de tiempo. Estos rasgos se
pueden configurar en la misma página web. Mientras que el archivo se esté subiendo, va a
aparecer un icono azul que indica el estado. Una vez que finalice este proceso de sincroni-
zación y, por tanto, ya esté disponible en la nube, aparecerá un icono con la tilde en verde.
28
Aplicaciones web
29
3.5. Seguridad del gestor de
archivos
La seguridad en los programas de administración de
archivos en la nube se asemeja a la que hay que mantener
en un sistema informático, solo con la diferencia de no
tener ningún equipo servidor de almacenamiento, ya que
no sabemos la localización de los datos. No disponemos de
mantenimiento hardware.
BUSCA EN LA WEB
Para más información podemos ac-
ceder a la página web de la agencia:
https://www.agpd.es
30
3.6. Documentación e interpretación de la documen-
tación técnica
Para finalizar esta unidad formativa debemos confeccionar un documento que 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 microinformáticos y redes es la creación en todas
las funciones realizadas de un documento donde se recojan todos los pasos pertinentes 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.
Este documento debe ser donde hemos tenido que escribir en el momento, los pasos y la inci-
dencia 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. 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 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 distri-
buidoras 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 consul-
tado 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.
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, en este caso Google, es la primera interesada en que los usuarios
puedan ejecutar bien sus herramientas y le puedan sacar el mayor rendimiento posible.
31
4
INSTALACIÓN
INSTALACIÓNDE
DEUN
UNGESTOR
GESTORDE
DECONTENIDOS
CONTENIDOS
Aplicaciones web
Los sistemas de gestión de contenidos (CMS: content management system), son herra-
mientas de software a través de las cuales podemos crear una página web dinámica con
contenidos digitales y multimedia y realizar su mantenimiento. Para trabajar con un gestor
de contenido, no es necesario tener un gran conocimiento de los distintos lenguajes de
programación. Todo el desarrollo de los CMS se produce 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:
– N
ecesitan un servidor web en el que alojar las páginas, una base de datos en la que
almacenar la información y un lenguaje de programación determinado para interactuar
con el servidor.
– D
iferencian entre diseño y contenido. El diseño se puede llevar a cabo mediante plan-
tillas, sin necesidad de escribir código, y el contenido se obtiene de forma dinámica.
– Incorporan distintas funcionalidades a las páginas web.
– Ofrecen una colaboración sencilla con usuarios.
– Permiten publicar contenido.
– Cuentan con un control estadístico sobre los accesos realizados.
– Permiten realizar copias de seguridad además de operaciones de restauración.
– Ofrecen posicionamiento de las webs en los buscadores.
uentan con un entorno bastante intuitivo que facilita la creación, publicación y pre-
– C
sentació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 almacena toda la información.
◦ Publicación de los distintos contenidos que ya han sido creados con anterioridad.
◦ Presentación de aquellos contenidos creados según una serie de especificaciones.
33
Tema 4. Instalación de un gestor de contenidos
Al igual que cuando instalamos algún programa, al instalar un sistema de gestión de conte-
nidos debemos tener en cuenta los requisitos mínimos que necesitamos para su instalación.
En este caso, Joomla necesita:
Versiones Joomla
Si estás ejecutando una versión anterior a la actual (por ejemplo, si estás usando la 3.8.13 y la
actual es la 3.9.13), deberás actualizar a esta última. Cada versión menor soluciona una serie
errores o problemas de seguridad. Siempre es una buena práctica actualizar a la última versión
de mantenimiento como primer paso en la solución de cualquier problema de seguridad.
En un primer momento, cuando solo existe un usuario registrado, lo definimos como admi-
nistrador o superusuario, pues va a ser el encargado de gestionar el sistema mientras dure el
proceso de instalación de Joomla.
34
Aplicaciones web
¡RECUERDA!
• Grupos de usuarios
35
Tema 4. Instalación de un gestor de contenidos
• Usuarios Joomla
Podemos diferenciar entre los usuarios que son registrados y los que no lo son (invitados).
Los que se registran pueden tener acceso a todo el sistema y se dividen en front-end y back-end.
Sin embargo, los usuarios invitados solo pueden visitar el contenido web público, pero no
pertenecen al sistema.
A continuación, vamos a especificar entre los dos tipos de usuarios registrados que
podemos tener:
– Usuarios del front-end: tienen una serie de derechos como la creación y publica-
ción del contenido web; y, según el grupo de al que pertenezcan, pueden poseer
privilegios diferentes.
◦ L os distintos grupos de usuarios que existen son anónimo, registrado, autor, edi-
tor y publicador.
– Usuarios del back-end: se corresponden con los administradores del sitio. Tienen per-
mitido el acceso a la interfaz de administración y a la de front-end.
◦ D
ependiendo del grupo de usuarios al que pertenezcan, cuentan con una serie de
privilegios diferentes.
◦ Podemos diferenciar entre los grupos: gestor, administrador y superusuario.
36
• Registro de usuarios
A la hora de registrar a los distintos usuarios es conveniente
seguir un orden como:
37
Tema 4. Instalación de un gestor de contenidos
38
Aplicaciones web
PARA + INFO
En las nuevas versiones de los gestores de contenido, Joomla dispone de una gestión
de imágenes, vídeos y ficheros de audio para facilitar, de forma intuitiva, la disposi-
ción de dicha información.
39
Tema 4. Instalación de un gestor de contenidos
• Extensiones Joomla
S
on los diferentes softwares que podemos añadir para aumentar
la funcionalidad en un proceso de instalación estándar.
E
l CMS que hemos instalado, Joomla, cuenta con distintos tipos de
extensiones que podemos encontrar en el menú principal, como:
40
Aplicaciones web
• Gestor de extensiones
Podemos acceder a través del menú principal o desde
Panel de control/Interfaz de administración.
• Módulos
Extensiones estructuradas en forma de caja que nos ofrecen
la posibilidad de visualizar los contenidos correspondientes
a una página determinada.
41
Tema 4. Instalación de un gestor de contenidos
◦ E
nlaces 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.
◦ A
rtículos - Artículos relacionados: relacionado con
el que se está visualizando.
◦ Buscar: referente a la caja de búsqueda.
◦ E
stadí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 extensiones que tienen la misión de
realizar pequeñas funciones complementarias para poder
funcionar de forma independiente, como si fueran módulos
o componentes.
42
Aplicaciones web
43
Tema 4. Instalación de un gestor de contenidos
Los métodos de los que dispone Joomla para realizar copias de seguridad son los siguientes:
• Copiar la carpeta principal
Para respaldar la carpeta principal, deberemos crear una nueva donde almacenaremos la
copia de seguridad que realicemos.
xampp\htdocs\BackUp
Es un método que resulta bastante tedioso al tratarse de un servidor externo porque la copia
ocupa bastante espacio.
• Componente Akeeba Backup
Este último método consiste en instalar alguno de los componentes externos para llevar a
cabo la copia de seguridad.
Uno de los más utilizados es Akeeba 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.
https://www.akeebabackup.com/
products/akeeba-backup.html
https://www.akeebabackup.com/products/akeeba-kickstart.html
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.
44
Aplicaciones web
BUSCA EN LA WEB
En el siguiente enlace se puede con-
sultar un ejemplo de foro de exper-
tos de Joomla:
https://bit.ly/3tHOU5v
45
5 INSTALACIÓN DE SISTEMAS DE GESTIÓN
INSTALACIÓN DE SISTEMAS
DE APRENDIZAJE DE GESTIÓN DE
A DISTANCIA
APRENDIZAJE A DISTANCIA
Aplicaciones web
También existen otros tipos de sistemas de enseñanza derivados del aprendizaje electrónico,
como son:
• b-learning (blended learning): es una combinación de educación presencial y aprendizaje
electrónico.
◦ E
l aprendizaje presencial ayuda al profesor a estar en contacto con el alumno y facilita
la interacción entre estudiantes.
◦ E
l aprendizaje online da flexibilidad a los estudiantes para acceder a vídeos, diaposi-
tivas, archivos…
En esta unidad, nos vamos a centrar en el aprendizaje electrónico (e-learning) que, entre
otras posibilidades, permite 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 estén realizando un curso online junto con sus profesores responsables.
El aprendizaje electrónico va adquiriendo cada vez más importancia y ha llegado hasta el ámbito
empresarial, permitiendo a los trabajadores de una empresa actualizarse formativamente.
De tal manera que los trabajadores disponen de una gran flexibilidad para combinar su
jornada laboral con la formación.
47
En un primer momento, pretendían centrarse en el desa-
rrollo de los cursos a distancia. Sin embargo, hoy en día,
han conseguido servir de apoyo a los presenciales y ofrecen
el acceso a los distintos contenidos a través de internet.
– H
acen uso de un servidor web para ofrecer el conteni-
do de los diferentes cursos desarrollados a distancia
para que sean accesibles mediante el navegador.
– A
puestan por la colaboración de un conjunto de usua-
rios (profesores y alumnos).
– S
on capaces de gestionar los diferentes cursos de
formación.
– O
frecen una serie de plantillas para la creación del
contenido educativo.
– G
racias a la asignación de los diferentes permisos,
pueden controlar de forma más exhaustiva a usuarios
y grupos.
– Dan la posibilidad de realizar copias de seguridad.
– S
on capaces de añadir más funcionalidades como
exámenes, evaluaciones, actividades, etc.
48
Aplicaciones web
• ILIAS: basado en la tecnología Moodle. Facilita la navegación y apuesta por organizar los
contenidos de forma más eficiente. Trabaja en un servidor que soporta php y MySQL. So-
porta SCORM.
• Chamilo: plataforma e-learning de código abierto cuyo objetivo principal es conseguir
un mejor acceso a la educación. Tiene como objetivo el desarrollo del software para la
educación y el mantenimiento de un canal de comunicación.
• Blackboard: es un sistema comercial e-learning mediante el que se pueden crear diferen-
tes cursos y desarrollar la actividad docente.
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 normas que debemos cumplir y que se encuentran recogidas en un modelo de refe-
rencia denominado SCORM.
CONCEPTO
BUSCA EN LA WEB
En este enlace encontrarás más información del es-
tándar SCORM:
https://bit.ly/32Vekkj
49
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
• Comunicación
H
acen referencia a diferentes foros, chats, sistemas de
mensajes, etc., que ofrecen la posibilidad a los alumnos
de ponerse en contacto con los profesores y los demás
participantes a la hora de plantear cualquier duda sobre
los contenidos de algún curso determinado. También es
posible que los alumnos establezcan una comunicación
entre ellos formando, lo que denominamos, una comuni-
dad de aprendizaje.
• Materiales
D
ocumentos de texto, soluciones, apuntes, diapositi-
vas… son los distintos recursos que el profesor puede
ofrecer a los alumnos a través del gestor de aprendizaje.
• Actividades
O
frece la posibilidad a los diferentes participantes de un
curso, mediante la entrega de ejercicios, tareas, partici-
pación en los foros, resolviendo cuestionarios… de inte-
ractuar y colaborar en la plataforma.
BUSCA EN LA WEB
Para más información sobre Moodle, consulta el
siguiente enlace:
https://bit.ly/3sI0UlY
50
Aplicaciones web
M
oodle es una publicación gratuita de código abierto, por lo que permite a los educadores
trabajar mediante un sitio web dinámico capaz de gestionar el aprendizaje de los estudiantes.
P
uede ser utilizado por cientos de alumnos a la vez o incluso por una pequeña escuela.
Algunas universidades o instituciones lo emplean para complementar una formación pre-
sencial, mientras que otras lo utilizan para estudios a distancia.
C
uenta 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 la idea de que
puedan cumplimentarlos y volverlos a entregar: actividades, exámenes, cuestionarios…
A
demás, recordemos que tiene con una interfaz interactiva bastante cómoda para trabajar
y poder realizar la gestión de contenidos y cursos.
P
or último, hace posible el seguimiento de las actividades y del trabajo realizado por los es-
tudiantes, así como la elaboración de estadísticas sobre el uso, copias de seguridad, acceso
a manuales y ayuda, etc.
• Requisitos previos a la instalación y versiones
E
s necesario, antes de instalar Moodle, disponer de un servidor web que ya se encuentre
instalado y configurado, ya sea en un ordenador personal o de empresa. Debe soportar,
como mínimo, PHP 5.3.2 y MySQL 5.1.3.
S
iempre es recomendable utilizar las últimas versiones, dado que suelen ser las más actua-
les y estar mejoradas.
BUSCA EN LA WEB
En el siguiente enlace se puede des-
cargar la última versión de Moodle:
https://bit.ly/2QnB6yz
BUSCA EN LA WEB
Los pasos para instalar Moodle
en Windows se pueden ver en el
siguiente enlace:
https://bit.ly/3grxPJf
51
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
52
Aplicaciones web
Forma 1
53
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
Forma 2
54
Aplicaciones web
55
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
• Foro
Cuando creamos un curso en el que el formato del mismo
se corresponde con semanas o temas, aparece el primer
bloque: Novedades. Se trata de un foro en el que, en un primer
momento, añadimos a todos los participantes del curso.
56
Aplicaciones web
• Actividades
Son diferentes módulos de Moodle que solicitan a los alumnos
la realización de alguna actividad, trabajo o práctica.
– B
ase de datos: los participantes tienen opción de
crear, mantener y buscar la distinta información alma-
cenada en un banco de registros.
– Chat: ofrece la posibilidad de comunicación entre los
distintos participantes de la web en tiempo real.
– Consultas: permite que el profesor realice una serie
de preguntas.
– Cuestionarios: da la opción de que el profesor diseñe
una serie de preguntas, de tal forma que cada intento
quede guardado. Es libre para que, una vez terminado
el cuestionario, permita al alumno realizarlo de nuevo
o de mostrarlo con las opciones ya resueltas.
– Encuestas: en este módulo existen tres tipos de en-
cuestas distintas mediante las cuales el profesor pue-
de hacer un seguimiento al alumno y comprobar, de
esta forma, su evolución.
– E
xternal tool: conjunto de herramientas que permiten
a los alumnos interactuar con los distintos recursos
disponibles para el aprendizaje.
– Foro: ofrece la posibilidad a todos los participantes de
poder opinar sobre los temas abiertos en los foros.
– Glosario: permite que los participantes creen una lista
de definiciones.
◦ Lección: conjunto de páginas con explicaciones so-
bre los temas de los que consta el curso. A veces, in-
cluye una serie de preguntas que le sirve al alumno
para saber si ha entendido el tema en cuestión.
57
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
58
Aplicaciones web
Categorías
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.
59
Cuando damos de alta un curso, tenemos que rellenar
una serie de campos obligatorios como el nombre, tanto
el completo como el corto. A través del campo Formato
podemos seleccionar el más apropiado y atribuirle otras
propiedades:
– Semanal: podemos organizar un curso por semanas,
atendiendo al calendario.
– Temas: hace referencia a las distintas unidades de un
libro.
– Social: apartado sobre los distintos foros y temas para
debatir.
– SCORM: paquete SCORM con distintos materiales
para el aprendizaje.
Matriculación
Tras crear un curso, ya es posible que los usuarios se puedan
matricular en él. Mientras no lo hagan, estos no tienen
ningún permiso en la plataforma.
Podemos diferenciar entre dos procesos diferentes de
matriculación: manual y automática. Lo encontramos en la
opción Ajustes/Administración del curso/Usuarios/Métodos
de matriculación.
• Matriculación manual
Cuando se crea un nuevo curso, el sistema ofrece la posi-
bilidad de hacer una matriculación manual que convierte
a los distintos usuarios en Participantes del curso. Para tal
fin, seleccionamos la opción Matricular usuarios.
60
Aplicaciones web
Tanto el administrador como los profesores de un curso determinado pueden crear un grupo
y añadir a los diferentes alumnos matriculados.
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, este puede ver su
trabajo y el trabajo de otros grupos.
– F
orzar el modo de grupo. Si su valor es Sí, el modo seleccionado del grupo se puede
aplicar a las diferentes actividades de un curso.
• Cohortes
Grupo de usuarios, también denominados 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 acceder a través de Ajustes/
Administración del sitio/Usuarios/
Cuentas/Cohortes.
Todos los miembros pertenecientes
a una cohorte determinada pueden
llevar a cabo acciones “masivas”.
Por ejemplo, una cohorte de profe-
sores comparte la opción de poderse
matricular en un determinado curso
con solo un clic.
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
62
Aplicaciones web
63
Tema 5. Instalación de sistemas de gestión de aprendizaje a distancia
BUSCA EN LA WEB
Podemos acceder a dicha comuni-
dad a través de la web oficial
https://bit.ly/3em9XUP
64
6
OORIGEN
RIGEN YYEVOLUCIÓN
EVOLUCIÓNDE
DEHTML
HTML
Aplicaciones web
• En 1991 se presenta el primer documento con descripción HTML bajo el nombre de: HTML
Tags (Etiquetas HTML).
• En 1993 aparece la primera propuesta de carácter oficial para convertir HTML en un es-
tándar. Aunque se dieron avances muy significativos (se definieron las etiquetas de imáge-
nes, las tablas y los formularios), no se llegó a conseguir el estándar oficial.
• Ya en 1995, es el organismo IETF el que se encarga de poner en marcha un grupo para tra-
bajar con HTML y es cuando se consigue publicar, el 22 de septiembre de 1995, el estándar
HTML 3.0: primer estándar oficial de HTML.
• A partir del año 1996, los diferentes estándares de HTML los publica otro organismo dis-
tinto denominado W3C (World Wide Web Consortium). Aparece entonces la versión HTML
3.2, el 14 de enero de 1.997. Esta fue la primera recomendación de HTML que publicó W3C.
• Con la versión HTML 4.0, publicada el 24 de diciembre de 1999, se consiguieron nume-
rosos avances sobre las versiones anteriores, entre ellos la posibilidad de añadir pequeños
programas (scripts) en las páginas web. Este hecho mejoraba la accesibilidad a las páginas
que ya estaban diseñadas, facilitaba trabajar mediante la utilización de tablas más comple-
jas y perfeccionaba los formularios.
• La publicación de HTML 4.01, se centró sobre todo en revisar publicaciones anteriores,
pero no añadía novedades significativas. Detuvo un poco el desarrollo de HTML para cen-
trarse más en el estándar XHTML.
• Sobre el año 2004, y debido al parón anterior, algunas empresas como Apple, Mozilla y
Opera empiezan a mostrar su preocupación por la falta de interés del W3C hacia HTML y
es entonces cuando comienzan 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 sigue avanzando con la estandarización de XHTML (versión avan-
zada de HTML basada en XML), cuya primera versión había aparecido 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, aunque añade algunas nuevas.
• Las versiones XHTML 1.1 y XHTML 2.0 se publicaron en forma de borrador con la inten-
ción de modularizar XHTML.
• En 2010, se decidió no seguir evolucionando el lenguaje XHTML.
67
Tema 6. Origen y evolución de HTML
Agosto 2002
1980 Diciembre 1999 XHTML 2.0: Disuelto
Tim Bernés-Lee: HTML 4.0: W3C
Junio 1993 2010
hipertexto
Primer documento Aparición 2008
técnico de XML HTML5
1995
2006
HTML3
se plantea dejar A partir de abril
XHTML 2011
1991 Noviembre 1993 Enero 2000
HTML+ XHTML evoluciones
Primeros bocetos de HTML
1995 2008
https://www.w3.org/MarkUp/html3/ HTML5
Una vez conocido el origen y la evolución de este lenguaje de marcas, nos pararemos un poco
a conocerlo más a fondo.
HTML es un lenguaje de marcas que nos permite desarrollar diferentes páginas web.
Para ello, necesitamos:
• Un editor de textos ASCII, mediante el cual vamos a poder añadir el contenido que pre-
tendemos mostrar.
• Un navegador web con el que podemos visualizar el contenido de la página.
Todos aquellos ficheros que contengan documentos HTML van a tener como extensión .HTML
o .HTM.
68
Esta serie de editores utilizan diferentes menús e iconos en
los que podemos añadir:
¡RECUERDA!
69
Tema 6. Origen y evolución de HTML
70
Aplicaciones web
PARA + INFO
<!DOCTYPE html>
71
7
ESTRUCTURA DE UN DOCUMENTO HTML
ESTRUCTURA
Aplicaciones web
Por ejemplo:
<p>
– Etiquetas abiertas
Cuentan con una única palabra reservada para indicar el inicio y el fin a la vez.
Por ejemplo:
<hr>
En HTML5 no es necesario escribir las etiquetas de cierre gracias a los navegadores actuales.
• Atributos
Los atributos, al igual que las etiquetas, se pueden definir tanto en mayúsculas como en
minúsculas, a pesar de que los valores que les asignen sí guardarán diferenciación. Por ello,
es recomendable utilizar siempre minúsculas 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 "=".
PARA + INFO
Cada comando cuenta con una serie de atributos con sus correspondientes
valores; 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.
73
Tema 7. Estructura de un documento HTML
• Comentarios
Los comentarios son líneas que definen, de cara al usuario, lo que vamos realizando en cada
momento, aunque no son interpretadas por el navegador.
De esta forma, si alguien necesita trabajar con el código, es capaz de interpretarlo con un
simple vistazo, gracias a los comentarios que aparecen en él.
Por ejemplo:
• 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 comenzando con el símbolo “/”.
Todas las etiquetas afectan al código que se encuentre delimitado entre la apertura y el cierre
de la etiqueta.
Título
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.
74
– <header>: define un conjunto de ayudas introducto-
rias en una página.
Podemos encontrar elementos como:
◦ E
l menú de navegación principal con los enlaces a
las secciones de la web.
◦ La marca o logotipo de la web.
◦ Una pequeña descripción (en ocasiones).
◦ El buscador de la página (en ocasiones).
– <nav>: define los enlaces de navegación.
– <article>: crea algún artículo que se haya publicado.
– <section>: parte correspondiente a algún artículo.
– <aside>: define contenido lateral de la página.
– <footer>: define el pie de página.
– <dialog>: define distintos diálogos o comentarios.
7.2. Cabecera
La cabecera del programa se encuentra siempre entre:
<head>
</head>
75
Tema 7. Estructura de un documento HTML
PARA + INFO
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Titulo</h1>
<p>Párrafo</p>
</body>
</html>
<body>
</body>
Siempre está situado detrás de la cabecera <head>. Va a contener todo el cuerpo correspon-
diente a una determinada página web junto con los elementos propios de la página: gráficos,
textos, imágenes, etcétera.
76
Aplicaciones web
77
8
TTEXTO
EXTO
Aplicaciones web
79
Tema 8. Texto
• Semántica en textos
Es una serie de elementos HTML que ofrece un signifi-
cado a una parte del contenido de un texto, haciendo de
la negrita, el subrayado o la cursiva (<b> </b>, <u> </u> y
<i> </i>).
Existen algunas etiquetas, bastante parecidas entre sí, que
tienen como fin 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.
80
81
9
HHIPERVÍNCULOS
IPERVÍNCULOS
Aplicaciones web
Los hipervínculos son elementos del lenguaje HTML que permiten acceder a otro recurso; es
decir, enlaces que redirigen a otro sitio web, a un fichero, a una imagen, etc.
PARA + INFO
La sintaxis que debemos utilizar a la hora de incluir un hipervínculo es:
<a> </a>
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
la URL a la que queremos acceder al hacer clic en el hiperenlace. A continuación, si en el
elemento <a> no indicamos el atributo href, entonces representa un marcador de posi-
ción que va a ser a la que referencie otro hipervínculo en su atributo href.
Disponemos de otro atributo, target (opcional), que hace referencia al destino de la informa-
ción disponible en la 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. Si
queremos hacer uso de los vínculos internos, antes debemos establecer un ancla: el punto
fijo de posición al que accederemos tras un vínculo interno.
83
10
IMÁGENES
IMÁGENES
Aplicaciones web
Las imágenes pueden estar en diferentes formatos tales como los mapas de bits (archivos
PNG, GIF, JPEG), documentos vectoriales de una página (archivos PDF, XML), mapas y gráficos
de bits animados, etc.
No obstante, existen archivos de otros tipos que no se consideran imágenes, como los archivos
PDF de varias páginas, los interactivos, los documentos HTML y los que no tienen formato, los
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 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.
Por otro lado, las etiquetas <figure> y <figcaption> son novedosas para HTML5 y nos
ofrecen la posibilidad de agrupar una imagen junto con su información o leyenda.
85
Tema 10. Imágenes
Aparte de estos atributos src y alt, también contamos con algunos más que mostramos en la
siguiente tabla.
86
Aplicaciones web
87
Tema 10. Imágenes
88
89
11
TABLAS
TABLAS
Aplicaciones web
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 en una página web de la forma en la 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>
Hasta el momento, y para versiones anteriores a HTML5, se han podido utilizar distintos atri-
butos como: align, bgcolor, cellspacing, cellpadding, width, rules y summary. Sin embargo,
desde la aparición de HTML5, solo 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 el que aparece dentro
de la etiqueta:
<caption>
<td> …</td>
<th> …</th>
Cada dato de una fila y una columna determinada contiene un dato al que denominamos valor.
93
Tema 12. Listas
<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
94
95
13
FFORMULARIOS
ORMULARIOS
Aplicaciones web
<form>
…
</form>
Por tanto, dentro de este bloque, debemos implementar todos los elementos necesarios que
hemos enumerado. La marca form consta de varios atributos bastante importantes:
• 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, para el envío de los datos a una dirección web.
• target: se utiliza para indicar o especificar dónde vamos a mostrar la respuesta del formu-
lario. Los diferentes valores que puede tomar este atributo son:
– _blank: se muestra en una ventana nueva.
– _self: se muestra en la misma ventana del formulario.
– _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.
<fieldset> … </fieldset>
97
Tema 13. Formularios
<select>
<options>
</options>
</select>
98
99
14 ETIQUETA
ETIQUETA <DIV>
<DIV>
Aplicaciones web
<body>
</div>
<div id="pie">
<label>Ilerna Online</label>
</div>
</body>
101
15
EEJEMPLOS
JEMPLOS DE
DEHTML
HTML
Aplicaciones web
<!DOCTYPE html>
<html>
<head>
<!--Sentencia para detectar el idioma-->
<meta charset="utf-8">
<title>Primer ejemplo</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
<header>
<button onclick="nav_menu(1)">HOME</button>
<button onclick="nav_menu(2)">NOTICIAS</button>
</header>
<div id="pag_principal">
<aside>
<button>botón 1</button>
<button>botón 2</button>
</aside>
<div id="pag_noticias">
<h1>ESTA ES LA PÁGINA DE NOTICIAS</h1>
</div>
</div>
<footer>
<div class="texto_pie">
<ul>
<li>HTML</li>
<li>Proyecto</li>
<li>CSS</li>
</ul>
</div>
<div class="img_pie">
<img src="WEB/img/img_pie/facebook-icon.png" class="icon">
<img src="WEB/img/img_pie/instagram-icon.png" class="icon">
<img src="WEB/img/img_pie/pinterest-icon.png" class="icon">
<img src="WEB/img/img_pie/twitter-icon.png" class="icon">
</div>
</footer>
</body>
</html>
103
Tema 15. Ejemplos de HTML
104
105
16
EEDITORES
DITORES YYGESTORES
GESTORESDE
DEHTML
HTML
Aplicaciones web
Uno de los aspectos por los que el lenguaje de marcas es el que más se emplea para la crea-
ció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.
Este tipo de fichero es uno de los más básicos que podemos encontrar en un equipo infor-
má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, intui-
tiva y fácil.
El código de una página web conlleva numerosas líneas, 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.
108
109
17
OORIGEN
RIGEN YYEVOLUCIÓN
EVOLUCIÓNDE
DELOS
LOSCSS
CSS
Aplicaciones web
<body>
</body>
111
Tema 17. Origen y evolución de los CSS
2. Forma 2: CSS interno. Dentro de la etiqueta <head>, añadimos una etiqueta <style
type=”text/css”> y, en esta etiqueta, es donde debemos insertar el código CSS propio de
la página; el que se corresponde con los estilos globales del sitio web.
<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>
3. Forma 3: CSS externo. En esta forma (que es la más recomendable), crearemos un nuevo
archivo con extensión .css y, en el head de nuestra página, insertaremos un enlace que
incluya la ruta del archivo creado. Veremos un ejemplo a continuación:
Primero, crearemos el archivo .css en una carpeta, por ejemplo: /css.
<head>
</head>
112
BIBLIOGRAFÍA/ WEBGRAFÍA
” Lerma-Blasco, R. V.; Murcia Andrés, J. A.; Mifsud Talón, E. (2013). Aplicaciones web.
Madrid: McGraw Hill.
„ https://www.w3schools.com/
„ https://dev.w3.org/html5/html-author/
113