Tema 1 - Lenguajes de Marcas y Sistemas de Gestión de Información

Un lenguaje de marcas es una forma de codificar un documento, incorporando etiquetas o marcas que contienen
información acerca de la estructura del texto o su presentación.
Un lenguaje de marcas no es un lenguaje de programación, ya que el lenguaje de marcado no tiene funciones
aritméticas o variables.

- Clasificación
De presentación es aquel que indica el formato del texto.. Ej: RTF
De procedimiento que se emplea para la presentación del texto, instrucciones tales como centrar, aumentar el
tamaño de la fuente, o cambiar a negrita. Ej: LaTeX.
Descriptivo utiliza etiquetas para describir los fragmentos de texto, pero sin especificar cómo deben ser
representados, o en qué orden. Ej: lenguajes HTML, XHTML y XML

- XML: estructura y sintaxis.

La estructura y la sintaxis de XML (eXtensible Markup Language) se basan en el uso de "etiquetas" para definir
elementos y sus relaciones jerárquicas.
Elementos clave de la estructura y la sintaxis de XML:

1. Elementos y Etiquetas:
Etiqueta de Apertura (<nombre>): Marca el inicio de un elemento y define su nombre.
Etiqueta de Cierre (</nombre>): Marca el final de un elemento. El nombre debe coincidir con la etiqueta
de apertura.
Contenido del Elemento: Puede contener texto y/o subelementos.
<persona>
<nombre>John Doe</nombre>
<edad>30</edad>
</persona>

2. Atributos:
Los elementos pueden tener atributos que proporcionan información adicional.
Se especifican dentro de la etiqueta de apertura y tienen la forma nombre="valor". <coche color="rojo"
modelo="sedán">Toyota Corolla</coche>

3. Jerarquía de Elementos:
Los elementos pueden anidarse para formar una jerarquía.
<biblioteca>
<libro>
<titulo>La Sombra del Viento</titulo>
<autor>Carlos Ruiz Zafón</autor>
</libro>
</biblioteca>

4. Documento XML Completo:

Un documento XML completo incluye una declaración XML al principio.
<?xml version="1.0" encoding="UTF-8"?>
<personas>
<persona>
<nombre>John Doe</nombre>
<edad>30</edad>
</persona>
</personas>
5. Comentarios:

Los comentarios se insertan entre <!-- y --> y son ignorados durante el procesamiento.

<!-- Este es un comentario en XML -->

<ejemplo>
<dato>123</dato>
</ejemplo>

6. CDATA (Character Data):

Permite incluir contenido de texto sin que sea interpretado como elementos XML.
<descripcion>
<![CDATA[Esto es un ejemplo de contenido que incluye <caracteres> especiales y no debe
ser analizado por el parser XML.]]>
</descripcion>
7. Espacios de Nombres (Namespaces):

Permiten evitar conflictos de nombres al definir prefijos para los elementos.

http://www.example.com/banco1.xml”

<?xml version="1.0" encoding="UTF-8"?>

<banco>
<color>rojo</color>
<asientos>3</asientos>
</banco>
</xml>

http://www.example.com/banco2.xml”

<?xml version="1.0" encoding="UTF-8"?>

<banco>
<nombre>Banco Santander</nombre>
<director>Juan Lahoz</director>
<direccion>Avenida Perez Galdos 25</direccion>
</banco>
</xml>

<?xml version="1.0" encoding="UTF-8"?>

<root xmlns:b1=”http://www.example.com/banco1.xml”
xmlns:b2="http://www.example.com/banco2.xml">
<b1:banco>
<b1:color>rojo</b1:color>
<b1:asientos>3</b1:asientos>
</b1:banco>
<b2:banco>
<b2:nombre>Banco Santander</b2:nombre>
<b2:director>Juan Lahoz</b2:director>
<b2:direccion>Avenida Perez Galdos 25</b2:direccion> </banco>
</root>

- Elaboración de documentos XML bien formados.

Se dice que un documento XML está bien formado (well-formed document) cuando no tiene errores de
sintaxis. Esto incluye los siguientes aspectos:
 ∙ Los nombres de los elementos y sus atributos deben estar escritos correctamente. ∙ Los valores de los atributos
deben estar escritos entre comillas dobles o simples. ∙ Los atributos de un elemento deben separarse con
espacios en blanco.
∙ Se tienen que utilizar referencias a entidades donde sea necesario.
∙ Tiene que existir un único elemento raíz.
∙ Todo elemento debe tener un elemento padre, excepto el elemento raíz.
∙ Todos los elementos deben tener una etiqueta de apertura y otra de cierre.
∙ Las etiquetas deben estar correctamente anidadas.
∙ Las instrucciones de proceso deben estar escritas de forma correcta.
∙ La declaración XML debe estar en la primera línea escrita correctamente.
∙ Las secciones CDATA y los comentarios deben estar correctamente escritos.

Por otro lado, se dice que un documento XML es válido cuando, además de no tener errores de sintaxis, no
incumple ninguna de las normas establecidas en su estructura. Dicha estructura se puede definir utilizando
distintos métodos, tales como:

∙ DTD (Document Type Definition, Definición de Tipo de Documento).

∙ XML Schema.
∙ RELAX NG (REgular LAnguage for XML Next Generation).

Tema 2 -Utilización de lenguajes de marcas en entornos web - HTML,

etiquetas y atributos.
HTML es un lenguaje de marcado utilizado en la creación de páginas web. Este estándar que sirve de referencia
del software que interactúa con la elaboración de páginas web en sus diferentes versiones. Define una estructura
básica y un código (denominado código HTML) para la presentación de contenido de una página web, que
incluye texto, imágenes, videos, juegos, entre otros elementos.

Este estándar es gestionado por el World Wide Web Consortium (W3C) o Consorcio WWW, una organización
dedicada a la estandarización de la mayoría de las tecnologías asociadas a la web, especialmente en lo relacionado
con su escritura e interpretación.

Un documento HTML típico consta de dos partes principales: el encabezado (<head>) y el cuerpo (<body>).

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Título de la
Página</title>
</head>
<body>
<!-- Contenido de la Página -->
</body>
</html>
<!DOCTYPE html>: Declara que el documento sigue la especificación de HTML5.
<html lang="es">: Define el elemento raíz del documento y especifica el idioma (en este caso, español).
<head>: Contiene metadatos y enlaces a recursos externos, como hojas de estilo (CSS) y scripts (JavaScript).
<meta charset="UTF-8">: Especifica el conjunto de caracteres (UTF-8) para la codificación de caracteres.
<title>: Establece el título de la página, que se muestra en la barra de título del navegador. <body>: Contiene el
contenido principal de la página.
Elementos Básicos de HTML:

∙ Encabezados:

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<!-- ... hasta <h6> para diferentes niveles de encabezados -->

∙ Párrafos:

∙ <p>Este es un párrafo.</p>
∙ Enlaces:

<a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>

∙ Listas:

<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
</ul>

<ol>
<li>Elemento numerado 1</li>
<li>Elemento numerado 2</li>
</ol>

∙ Imágenes:
<img src="imagen.jpg" alt="Descripción de la imagen">

∙ Formularios:
<form>: Formulario.
Atributo action: Especifica la URL a la que se enviarán los datos del formulario. Atributo method: Especifica el
método HTTP para enviar los datos (por ejemplo, "post"). <label>: Etiqueta para escribir campos de entrada.
<input>: Campo de entrada.
<textarea>: Área de texto para entrada extensa.
<select>: Lista desplegable.
<option>: Opción dentro de un menú desplegable.

<form action="/procesar" method="post">

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<input type="submit" value="Enviar">
</form>

∙ Tablas:

∙ <table>: Tabla.
∙ <tr>: Fila de la tabla.
∙ <th>: Celda de encabezado.
∙ <td>: Celda de datos.

- Herramientas de diseño web.

Para diseñar páginas web con HTML, es útil utilizar herramientas que faciliten el proceso de desarrollo y diseño.
Aquí hay algunas herramientas que podrían serte útiles:

1. Editor de texto:
o Un editor de texto es esencial para escribir y editar código HTML. Puedes usar editores simples
como Notepad o TextEdit, pero también hay opciones más avanzadas específicas para desarrollo
web:
▪ Visual Studio Code
▪ Atom
▪ Sublime Text
2. Navegadores web y herramientas de desarrollo:
o Los navegadores modernos, como Google Chrome, Mozilla Firefox, Safari y Microsoft Edge,
ofrecen herramientas de desarrollo integradas. Puedes acceder a ellas haciendo clic derecho en tu
página web y seleccionando "Inspeccionar" o "Inspeccionar elemento". Estas herramientas te
permiten visualizar y modificar el HTML, CSS y JavaScript en tiempo real.
3. Frameworks y bibliotecas CSS:
o Utilizar frameworks y bibliotecas CSS puede acelerar el proceso de diseño y hacer que tu sitio web
sea más fácil de mantener. Ejemplos incluyen:
▪ Bootstrap
▪ Foundation
▪ Bulma

4. Generadores de código:
o Hay generadores de código en línea que pueden ayudarte a crear código HTML y CSS básico sin
tener que escribirlo manualmente. Esto puede ser útil para componentes específicos o diseños
simples. Algunos ejemplos son:
▪ HTML5 Boilerplate

5. Validadores de HTML:
o Utiliza validadores HTML para asegurarte de que tu código cumple con las normas y está libre de
errores. Puedes utilizar servicios en línea como el validador de W3C (World Wide Web
Consortium).

6. Editores visuales de HTML:

o Herramientas como Adobe Dreamweaver ofrecen interfaces visuales para diseñar páginas web.
Aunque no son tan populares como antes, algunas personas encuentran útil su enfoque visual.

7. Plataformas de gestión de contenido (CMS):

o Si estás creando un sitio web más grande y dinámico, considera el uso de un CMS como WordPress,
Joomla o Drupal. Estos sistemas proporcionan interfaces administrativas y facilitan la gestión del
contenido sin necesidad de codificar desde cero.

- Hojas de estilo.
CSS es un lenguaje de estilo utilizado para describir el aspecto y el formato de un documento HTML.
Permite separar la estructura del contenido (HTML) de su presentación (CSS).

Selección de elementos:

Para aplicar estilos a elementos HTML, primero debes seleccionarlos. Puedes seleccionar por etiqueta,
clase o ID.

Por etiqueta:
p {
/* estilos para párrafos */
}

Por clase:
.mi-clase {
/* estilos para elementos con la clase "mi-clase" */
}
∙ Por ID:
#mi-id {
/* estilos para el elemento con el ID "mi-id" */
}

∙ Propiedades y valores:

Las propiedades son características que puedes cambiar, y los valores son cómo se cambian esas
características. Por ejemplo:

p {
color: blue;
font-size: 16px;
margin-top: 10px;
}

∙ Colores:
Puedes especificar colores utilizando nombres, códigos hexadecimales o valores RGB.

p {
color: red;
background-color: #f0f0f0;
}

∙ Márgenes y relleno:

Controla el espacio alrededor y dentro de los elementos.

p {
margin: 10px; /* margen externo */
padding: 5px; /* relleno interno */
}

∙ Tipografía:
Cambia la apariencia del texto.

body {
font-family: "Arial", sans-serif;
}
∙ Enlaces:
Personaliza la apariencia de los enlaces.

a {
text-decoration: none;
color: #0066cc;
}

∙ Diseño flexible (Flexbox):

∙ Flexbox es un modelo de diseño que facilita el diseño de elementos en una fila o columna.

.contenedor-flex {
display: flex;
justify-content: space-between;
}

∙ Diseño de cuadrícula (Grid):

Grid permite crear diseños más complejos y estructurados.

.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

∙ Comentarios:
∙ Usa comentarios para documentar tu código.

/* Esto es un comentario en CSS */

Aplicación de los lenguajes de marcas a la sindicación de contenidos:
- Ámbitos de aplicación.
- Estructura de los canales de contenidos.
- Tecnologías de creación de canales de contenidos.
- Validación.
- Directorios de canales de contenidos.
- Agregación.

UF0373_23. Validación y transformación. Duración: 36 horas horas

Definición de esquemas y vocabularios en XML:
- Utilización de métodos de definición de documentos XML.
- Creación de descripciones.
- Asociación con documentos XML.
- Validación.
- Herramientas de creación y validación.

Conversión y adaptación de documentos XML:

- Técnicas de transformación de documentos XML.
- Descripción de la estructura y de la sintaxis.
- Utilización de plantillas.
- Utilización de herramientas de procesamiento.
- Elaboración de documentación.

UF0373_33. Tratamiento de información. Duración: 30 horas

Almacenamiento de información:
- Sistemas de almacenamiento de información.
- Inserción y extracción de información en XML.
- Técnicas de búsqueda de información en documentos XML.
- Lenguajes de consulta y manipulación.
- Almacenamiento XML nativo.
- Herramientas de tratamiento y almacenamiento de información en formato XML.
Sistemas de gestión empresarial:
- Instalación.
- Adaptación y configuración.
- Integración de módulos.
- Elaboración de informes.
- Integración con aplicaciones ofimáticas.
- Exportación de información.