Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

XSLT - Sintaxis abreviada de atributos - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 9 de mayo de 2023 por Irene R.

38 visualizaciones

En este vídeo, se utiliza un fichero XML y a partir de él se genera un nuevo documento usando XSLT.

Más información Transcripción

Descargar la transcripción

En este ejercicio vamos a crear una plantilla para el documento lugares.xml 00:00:00
que tenéis disponible dentro de este archivo. Si lo abrís 00:00:05
encontraréis el xml y el xml a su vez lo abrimos en xml copyeditor y lo 00:00:11
analizamos. Fijaros, tenemos un único nodo lugares, un nodo raíz y a su vez 00:00:18
contiene elementos nodo pueblo. 00:00:25
Nodo pueblo está formado por el nodo datos y el nodo 00:00:30
descripción. El nodo datos está formado 00:00:33
por nombre, provincia y población. Población es un elemento 00:00:37
vacío que a su vez contiene atributos 00:00:42
como por ejemplo habitantes y año. Los demás elementos contienen 00:00:45
contenido. La idea es crear a partir de este 00:00:49
xml una tabla una tabla que se muestra una página 00:00:53
html y los datos evidentemente los vamos a extraer de aquí del xml 00:00:59
utilizaremos por tanto xsl creamos un nuevo archivo xsl y ya lo grabamos con 00:01:04
la extensión xsl por ejemplo plantilla muy importante 00:01:14
seleccionar la extensión. Si analizamos el documento XSL podemos comprobar que también 00:01:21
es un documento XML. Verificamos que está bien formado. Hay un único nodo raíz que contiene 00:01:28
un atributo XML NS que nos permite definir un espacio de nombres y en este caso el espacio 00:01:36
de nombres está asociado a un prefijo XSL de tal forma que para utilizar las etiquetas de 00:01:44
este espacio de nombres lo haremos siempre a través del prefijo 00:01:50
hay una instrucción la que se define una plantilla una plantilla que se aplica al 00:01:54
valor del atributo match cuando en el xml encontremos el nodo 00:02:00
raíz se sustituirá el nodo raíz por toda la 00:02:05
información que yo haya puesto en el contenido de la plantilla 00:02:11
como vamos a crear una página html ponemos la etiqueta de html dentro de 00:02:14
html ponemos la etiqueta por ejemplo de cabecera la cabecera encontramos 00:02:22
información del título de la página podemos llamarla por ejemplo pueblos 00:02:27
después podemos incluir información de los meta caracteres muy importante 00:02:31
cerrar esta etiqueta y ya lo vamos a dejar preparado aunque todavía ahora 00:02:38
mismo no lo vamos a definir un enlace a una hoja de estilos eso lo hacemos a través de la etiqueta 00:02:43
link style muy importante que esté correctamente escrito y a través del atributo h red el archivo 00:02:50
que ahora mismo no existe pero lo dejamos preparado vale ahora pasamos a rellenar lo 00:03:02
que es el cuerpo de la página con la etiqueta body. Dentro del body podemos poner un encabezado 00:03:11
de nivel h1, por ejemplo información y la etiqueta que nos va a permitir generar la 00:03:28
tabla. Dentro de la tabla vamos a crear una primera fila, lo haré con la etiqueta tr. 00:03:41
A su vez dentro de esta fila tenemos celdas. En este caso van a ser las celdas de tipo cabecera, por eso ponemos TH y en la página web se van a visualizar por efecto en negrita. 00:03:55
Por ejemplo, la primera celda que será el nombre, la siguiente celda que será la provincia, la siguiente el número de habitantes y la última celda tendrá información de la imagen del pueblo. 00:04:08
Tenemos la parte fija de nuestra plantilla, vamos a generar la parte que se va a crear a partir de la información del XML, tenemos que recorrer y extraer la información de los nodos pueblo y en este caso tenemos que llegar a datos y después obtener el nombre, 00:04:34
obtener el contenido del elemento provincia 00:04:59
y obtener el contenido del elemento 00:05:02
del atributo habitantes 00:05:05
para ello utilizamos una expresión de xsl 00:05:08
un bucle que nos va a permitir 00:05:14
recorrer los diferentes nodos 00:05:15
en el select pondré 00:05:18
los nodos que quiero recorrer, la expresión xpad 00:05:24
en este caso voy a recorrer 00:05:27
voy a pasar por todos los nodos datos de cada pueblo 00:05:29
Entonces la expresión sería lugares barra pueblo barra datos. 00:05:33
Lugares barra pueblo barra datos. 00:05:39
Podría haber utilizado otra expresión también de xpad válidas, en este caso hemos puesto la ruta completa. 00:05:44
Generamos una fila, es decir, para cada nodo datos se va a crear una nueva fila en la tabla. 00:05:51
Dentro de la fila generamos la celda de datos. 00:05:59
la primera guarda información del nombre y voy a extraer del nombre del xml por lo tanto tendré 00:06:01
que acceder al contenido del elemento nombre lo hago con la expresión de x es el que se 00:06:09
se le evalúe en este caso pongo la etiqueta de acuerdo que será un hombre muy importante 00:06:17
cerrar la instrucción xslValueOf. 00:06:34
La siguiente celda contiene información de la provincia. 00:06:38
Celda de datos y dentro 00:06:43
obtengo a través de xsl la información 00:06:46
del xml. 00:06:50
Atributos select, en este caso 00:06:54
el atributo select nos permite acceder al contenido del elemento provincia. 00:06:59
Tiene que estar correctamente bien escrito, coincide con mayúsculas y minúsculas, eso es muy importante. 00:07:06
La siguiente celda contiene información del número de habitantes. 00:07:18
Celda de datos y ahora obtenemos a través de XSL la información del número de habitantes. 00:07:23
vale, el nombre de habitantes es un atributo 00:07:37
con lo cual dentro del elemento población 00:07:41
a través del atributo habitantes obtengo la información 00:07:44
el valor, por eso ponemos población dentro del elemento 00:07:48
población y ahora para acceder a la información de habitantes tengo que poner 00:07:56
arroba porque es un atributo, habitantes que incide con el nombre del atributo 00:07:59
la última celda 00:08:03
celda que contiene una imagen, en este caso aquí fijaros es texto lo que estoy obteniendo 00:08:06
pero en el HTML voy a tener que generar una imagen, para generar una imagen lo hago a través de la etiqueta 00:08:11
img y el atributo src que contiene la ruta de la imagen, la ruta de la imagen si nos damos cuenta 00:08:18
está en el atributo imagen y dentro el valor al que yo quiero acceder, como estamos asociando 00:08:27
y estamos asignando un atributo a la información, vamos a utilizar una expresión abreviada. 00:08:37
Cuando obtenemos la información del XML y en este caso se la estamos asignando un atributo, 00:08:42
tenemos que poner las llaves dentro del elemento nombre barra arroba imagen 00:08:49
y así accedemos al contenido del atributo imagen. 00:08:57
Y eso se expresa así, nombre barra arroba imagen. 00:09:02
Si nos damos cuenta del pequeño detalle, las imágenes solo contienen el nombre del archivo, si la página web que creemos tiene que acceder a las imágenes que están en esta carpeta, debe entrar en la carpeta imagen, en la carpeta IMG, de tal forma que la plantilla la vamos a dejar preparada para que la página web esté aquí fuera y tenga que acceder al interior de la carpeta IMG. 00:09:05
Por eso, fijaros, las llaves indican que la información aquí la extraigo del XML, pero le voy a añadir antes la ruta de acceder a la carpeta IMG 00:09:35
y luego ya localizar el nombre del archivo, que es lo que extraigo del XML. 00:09:51
vez vamos a dejar también ya preparado que las imágenes tengan un tamaño 00:09:58
por ejemplo de 200 píxeles de ancho y un alto 00:10:05
también de 200 lo último que podemos también dejar 00:10:10
es que por ejemplo el nombre 00:10:19
tenga su vez un enlace a la página web la página web también está dentro de un 00:10:23
atributo y si recordamos la estructura de los enlaces en html sería la etiqueta 00:10:32
a de enlace con el atributo href que contiene la dirección de enlace dentro 00:10:40
del texto o bien también podría ser una imagen de acuerdo el texto para hacer 00:10:49
clic en el enlace y cerramos la etiqueta vamos a envolver por tanto este nombre 00:10:53
dentro de un enlace creamos la etiqueta de inicio y la etiqueta de cierre dentro de la etiqueta de 00:11:00
inicio el atributo href y aquí igual que antes estamos asignando información a un atributo le 00:11:11
estamos asignando información un atributo y la información la obtenemos del xml tengo que poner 00:11:19
las llaves y aquí acceder al elemento nombre barra web que nos permitirá hallar este valor 00:11:24
del atributo sería un hombre barra web una vez que tenemos la plantilla guardamos 00:11:36
podríamos haber probado antes de acuerdo recomiendo que ejecute paso por paso y por 00:11:49
ejemplo haber llegado aquí y haber probado la plantilla 00:11:55
voy a lugares y voy a xml xsl transformación o bien pulsando la tecla 00:11:58
f8 seleccionó la plantilla y se le aplicó 00:12:05
y ya veo que se me ha generado la página web con todos los datos de 00:12:12
acuerdo la estructura correcta de las imágenes 00:12:19
todo correcto fijaros si yo ahora mismo esto lo ejecutó en el navegador no se 00:12:22
ve las imágenes porque está buscándolas en otra localización, por ello hay que guardar 00:12:27
la página html. La guardamos en la localización deseada, resultado 1 por ejemplo, con extensión 00:12:32
html y ahora si la visualizo en el navegador se ven correctamente las imágenes. Con respecto 00:12:46
a la hoja de estilos que se nos ha quedado pendiente si vemos la plantilla este archivo 00:12:56
pues ahora mismo no existe para crearlo tenemos que utilizar notepad++ y por ejemplo si creo un 00:13:01
nuevo archivo lo guardo en la carpeta donde tengo la página web a ver si lo localizo vale y con el 00:13:11
mismo nombre que haya puesto en la 00:13:30
en la hoja de estilos de acuerdo que haya definido la plantilla parece que 00:13:36
era estilo 1 punto css lo guardamos y ahora que podríamos ir añadiendo un 00:13:40
color por ejemplo para de fondo para el cuerpo de página simplemente un ejemplo 00:13:45
de acuerdo para que veáis ya lo último que hay que hacer si quiero buscar un 00:13:50
color por ejemplo en html de colors a ver si puedo aquí por ejemplo podría 00:13:55
buscar un color de fondo bueno pues voy a coger este mismo vale 00:14:03
para no complicarnos muchos es un color en esa decimal para la 00:14:12
instrucción final de css guarda el archivo 00:14:17
y ahora una vez que ya lo tengo guardado si funciona todo correctamente lo único 00:14:22
que me queda es comprobar que se recarga en el navegador. Si pulso F5 se aplicaría el color de 00:14:27
fondo. Vale, eso es todo lo que os quería comentar y si tenéis alguna duda consultarme. Gracias. 00:14:35
Idioma/s:
es
Subido por:
Irene R.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
38
Fecha:
9 de mayo de 2023 - 11:54
Visibilidad:
Público
Centro:
IES VIRGEN DE LA PAZ
Duración:
14′ 44″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
21.44 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid