1 00:00:00,560 --> 00:00:05,960 En este ejercicio vamos a crear una plantilla para el documento lugares.xml 2 00:00:05,960 --> 00:00:11,960 que tenéis disponible dentro de este archivo. Si lo abrís 3 00:00:11,960 --> 00:00:18,699 encontraréis el xml y el xml a su vez lo abrimos en xml copyeditor y lo 4 00:00:18,699 --> 00:00:25,929 analizamos. Fijaros, tenemos un único nodo lugares, un nodo raíz y a su vez 5 00:00:25,929 --> 00:00:29,210 contiene elementos nodo pueblo. 6 00:00:30,589 --> 00:00:33,810 Nodo pueblo está formado por el nodo datos y el nodo 7 00:00:33,810 --> 00:00:37,509 descripción. El nodo datos está formado 8 00:00:37,509 --> 00:00:42,049 por nombre, provincia y población. Población es un elemento 9 00:00:42,049 --> 00:00:45,710 vacío que a su vez contiene atributos 10 00:00:45,710 --> 00:00:49,229 como por ejemplo habitantes y año. Los demás elementos contienen 11 00:00:49,229 --> 00:00:53,750 contenido. La idea es crear a partir de este 12 00:00:53,750 --> 00:00:59,530 xml una tabla una tabla que se muestra una página 13 00:00:59,530 --> 00:01:04,689 html y los datos evidentemente los vamos a extraer de aquí del xml 14 00:01:04,689 --> 00:01:14,290 utilizaremos por tanto xsl creamos un nuevo archivo xsl y ya lo grabamos con 15 00:01:14,290 --> 00:01:21,790 la extensión xsl por ejemplo plantilla muy importante 16 00:01:21,790 --> 00:01:28,900 seleccionar la extensión. Si analizamos el documento XSL podemos comprobar que también 17 00:01:28,900 --> 00:01:36,060 es un documento XML. Verificamos que está bien formado. Hay un único nodo raíz que contiene 18 00:01:36,060 --> 00:01:44,519 un atributo XML NS que nos permite definir un espacio de nombres y en este caso el espacio 19 00:01:44,519 --> 00:01:50,859 de nombres está asociado a un prefijo XSL de tal forma que para utilizar las etiquetas de 20 00:01:50,859 --> 00:01:54,620 este espacio de nombres lo haremos siempre a través del prefijo 21 00:01:54,620 --> 00:02:00,459 hay una instrucción la que se define una plantilla una plantilla que se aplica al 22 00:02:00,459 --> 00:02:05,959 valor del atributo match cuando en el xml encontremos el nodo 23 00:02:05,959 --> 00:02:11,000 raíz se sustituirá el nodo raíz por toda la 24 00:02:11,000 --> 00:02:14,759 información que yo haya puesto en el contenido de la plantilla 25 00:02:14,759 --> 00:02:22,020 como vamos a crear una página html ponemos la etiqueta de html dentro de 26 00:02:22,020 --> 00:02:27,120 html ponemos la etiqueta por ejemplo de cabecera la cabecera encontramos 27 00:02:27,120 --> 00:02:31,939 información del título de la página podemos llamarla por ejemplo pueblos 28 00:02:31,939 --> 00:02:38,830 después podemos incluir información de los meta caracteres muy importante 29 00:02:38,830 --> 00:02:43,930 cerrar esta etiqueta y ya lo vamos a dejar preparado aunque todavía ahora 30 00:02:43,930 --> 00:02:50,490 mismo no lo vamos a definir un enlace a una hoja de estilos eso lo hacemos a través de la etiqueta 31 00:02:50,490 --> 00:03:02,469 link style muy importante que esté correctamente escrito y a través del atributo h red el archivo 32 00:03:02,469 --> 00:03:11,939 que ahora mismo no existe pero lo dejamos preparado vale ahora pasamos a rellenar lo 33 00:03:11,939 --> 00:03:28,469 que es el cuerpo de la página con la etiqueta body. Dentro del body podemos poner un encabezado 34 00:03:28,469 --> 00:03:41,560 de nivel h1, por ejemplo información y la etiqueta que nos va a permitir generar la 35 00:03:41,560 --> 00:03:55,590 tabla. Dentro de la tabla vamos a crear una primera fila, lo haré con la etiqueta tr. 36 00:03:55,590 --> 00:04:08,710 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. 37 00:04:08,710 --> 00:04:34,029 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. 38 00:04:34,029 --> 00:04:59,399 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, 39 00:04:59,399 --> 00:05:02,360 obtener el contenido del elemento provincia 40 00:05:02,360 --> 00:05:05,120 y obtener el contenido del elemento 41 00:05:05,120 --> 00:05:08,220 del atributo habitantes 42 00:05:08,220 --> 00:05:14,100 para ello utilizamos una expresión de xsl 43 00:05:14,100 --> 00:05:15,959 un bucle que nos va a permitir 44 00:05:15,959 --> 00:05:18,519 recorrer los diferentes nodos 45 00:05:18,519 --> 00:05:24,220 en el select pondré 46 00:05:24,220 --> 00:05:27,600 los nodos que quiero recorrer, la expresión xpad 47 00:05:27,600 --> 00:05:29,480 en este caso voy a recorrer 48 00:05:29,480 --> 00:05:33,920 voy a pasar por todos los nodos datos de cada pueblo 49 00:05:33,920 --> 00:05:37,100 Entonces la expresión sería lugares barra pueblo barra datos. 50 00:05:39,240 --> 00:05:43,319 Lugares barra pueblo barra datos. 51 00:05:44,759 --> 00:05:50,079 Podría haber utilizado otra expresión también de xpad válidas, en este caso hemos puesto la ruta completa. 52 00:05:51,220 --> 00:05:58,959 Generamos una fila, es decir, para cada nodo datos se va a crear una nueva fila en la tabla. 53 00:05:59,500 --> 00:06:01,939 Dentro de la fila generamos la celda de datos. 54 00:06:01,939 --> 00:06:09,500 la primera guarda información del nombre y voy a extraer del nombre del xml por lo tanto tendré 55 00:06:09,500 --> 00:06:17,180 que acceder al contenido del elemento nombre lo hago con la expresión de x es el que se 56 00:06:17,180 --> 00:06:34,040 se le evalúe en este caso pongo la etiqueta de acuerdo que será un hombre muy importante 57 00:06:34,040 --> 00:06:37,720 cerrar la instrucción xslValueOf. 58 00:06:38,199 --> 00:06:41,819 La siguiente celda contiene información de la provincia. 59 00:06:43,720 --> 00:06:46,120 Celda de datos y dentro 60 00:06:46,120 --> 00:06:50,079 obtengo a través de xsl la información 61 00:06:50,079 --> 00:06:52,220 del xml. 62 00:06:54,339 --> 00:06:59,459 Atributos select, en este caso 63 00:06:59,459 --> 00:07:06,439 el atributo select nos permite acceder al contenido del elemento provincia. 64 00:07:06,439 --> 00:07:17,500 Tiene que estar correctamente bien escrito, coincide con mayúsculas y minúsculas, eso es muy importante. 65 00:07:18,339 --> 00:07:22,060 La siguiente celda contiene información del número de habitantes. 66 00:07:23,100 --> 00:07:37,610 Celda de datos y ahora obtenemos a través de XSL la información del número de habitantes. 67 00:07:37,610 --> 00:07:41,370 vale, el nombre de habitantes es un atributo 68 00:07:41,370 --> 00:07:44,050 con lo cual dentro del elemento población 69 00:07:44,050 --> 00:07:48,910 a través del atributo habitantes obtengo la información 70 00:07:48,910 --> 00:07:56,040 el valor, por eso ponemos población dentro del elemento 71 00:07:56,040 --> 00:07:59,139 población y ahora para acceder a la información de habitantes tengo que poner 72 00:07:59,139 --> 00:08:03,939 arroba porque es un atributo, habitantes que incide con el nombre del atributo 73 00:08:03,939 --> 00:08:06,079 la última celda 74 00:08:06,079 --> 00:08:11,920 celda que contiene una imagen, en este caso aquí fijaros es texto lo que estoy obteniendo 75 00:08:11,920 --> 00:08:18,019 pero en el HTML voy a tener que generar una imagen, para generar una imagen lo hago a través de la etiqueta 76 00:08:18,019 --> 00:08:27,279 img y el atributo src que contiene la ruta de la imagen, la ruta de la imagen si nos damos cuenta 77 00:08:27,279 --> 00:08:37,480 está en el atributo imagen y dentro el valor al que yo quiero acceder, como estamos asociando 78 00:08:37,480 --> 00:08:42,019 y estamos asignando un atributo a la información, vamos a utilizar una expresión abreviada. 79 00:08:42,639 --> 00:08:47,960 Cuando obtenemos la información del XML y en este caso se la estamos asignando un atributo, 80 00:08:49,460 --> 00:08:57,200 tenemos que poner las llaves dentro del elemento nombre barra arroba imagen 81 00:08:57,200 --> 00:08:59,860 y así accedemos al contenido del atributo imagen. 82 00:09:02,080 --> 00:09:05,539 Y eso se expresa así, nombre barra arroba imagen. 83 00:09:05,539 --> 00:09:35,110 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. 84 00:09:35,110 --> 00:09:51,559 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 85 00:09:51,559 --> 00:09:58,159 y luego ya localizar el nombre del archivo, que es lo que extraigo del XML. 86 00:09:58,159 --> 00:10:05,720 vez vamos a dejar también ya preparado que las imágenes tengan un tamaño 87 00:10:05,720 --> 00:10:10,440 por ejemplo de 200 píxeles de ancho y un alto 88 00:10:10,440 --> 00:10:19,450 también de 200 lo último que podemos también dejar 89 00:10:19,450 --> 00:10:23,570 es que por ejemplo el nombre 90 00:10:23,570 --> 00:10:32,559 tenga su vez un enlace a la página web la página web también está dentro de un 91 00:10:32,559 --> 00:10:40,840 atributo y si recordamos la estructura de los enlaces en html sería la etiqueta 92 00:10:40,840 --> 00:10:49,360 a de enlace con el atributo href que contiene la dirección de enlace dentro 93 00:10:49,360 --> 00:10:53,759 del texto o bien también podría ser una imagen de acuerdo el texto para hacer 94 00:10:53,759 --> 00:11:00,419 clic en el enlace y cerramos la etiqueta vamos a envolver por tanto este nombre 95 00:11:00,419 --> 00:11:11,159 dentro de un enlace creamos la etiqueta de inicio y la etiqueta de cierre dentro de la etiqueta de 96 00:11:11,159 --> 00:11:19,980 inicio el atributo href y aquí igual que antes estamos asignando información a un atributo le 97 00:11:19,980 --> 00:11:24,539 estamos asignando información un atributo y la información la obtenemos del xml tengo que poner 98 00:11:24,539 --> 00:11:36,769 las llaves y aquí acceder al elemento nombre barra web que nos permitirá hallar este valor 99 00:11:36,769 --> 00:11:47,009 del atributo sería un hombre barra web una vez que tenemos la plantilla guardamos 100 00:11:49,370 --> 00:11:55,330 podríamos haber probado antes de acuerdo recomiendo que ejecute paso por paso y por 101 00:11:55,330 --> 00:11:58,909 ejemplo haber llegado aquí y haber probado la plantilla 102 00:11:58,909 --> 00:12:05,350 voy a lugares y voy a xml xsl transformación o bien pulsando la tecla 103 00:12:05,350 --> 00:12:12,480 f8 seleccionó la plantilla y se le aplicó 104 00:12:12,480 --> 00:12:19,320 y ya veo que se me ha generado la página web con todos los datos de 105 00:12:19,320 --> 00:12:22,659 acuerdo la estructura correcta de las imágenes 106 00:12:22,659 --> 00:12:27,539 todo correcto fijaros si yo ahora mismo esto lo ejecutó en el navegador no se 107 00:12:27,539 --> 00:12:32,620 ve las imágenes porque está buscándolas en otra localización, por ello hay que guardar 108 00:12:32,620 --> 00:12:46,059 la página html. La guardamos en la localización deseada, resultado 1 por ejemplo, con extensión 109 00:12:46,059 --> 00:12:56,330 html y ahora si la visualizo en el navegador se ven correctamente las imágenes. Con respecto 110 00:12:56,330 --> 00:13:01,549 a la hoja de estilos que se nos ha quedado pendiente si vemos la plantilla este archivo 111 00:13:01,549 --> 00:13:11,210 pues ahora mismo no existe para crearlo tenemos que utilizar notepad++ y por ejemplo si creo un 112 00:13:11,210 --> 00:13:30,299 nuevo archivo lo guardo en la carpeta donde tengo la página web a ver si lo localizo vale y con el 113 00:13:30,299 --> 00:13:35,899 mismo nombre que haya puesto en la 114 00:13:36,019 --> 00:13:40,820 en la hoja de estilos de acuerdo que haya definido la plantilla parece que 115 00:13:40,820 --> 00:13:45,759 era estilo 1 punto css lo guardamos y ahora que podríamos ir añadiendo un 116 00:13:45,759 --> 00:13:50,139 color por ejemplo para de fondo para el cuerpo de página simplemente un ejemplo 117 00:13:50,139 --> 00:13:55,639 de acuerdo para que veáis ya lo último que hay que hacer si quiero buscar un 118 00:13:55,639 --> 00:14:03,700 color por ejemplo en html de colors a ver si puedo aquí por ejemplo podría 119 00:14:03,700 --> 00:14:12,539 buscar un color de fondo bueno pues voy a coger este mismo vale 120 00:14:12,539 --> 00:14:17,460 para no complicarnos muchos es un color en esa decimal para la 121 00:14:17,460 --> 00:14:22,500 instrucción final de css guarda el archivo 122 00:14:22,639 --> 00:14:27,600 y ahora una vez que ya lo tengo guardado si funciona todo correctamente lo único 123 00:14:27,600 --> 00:14:35,220 que me queda es comprobar que se recarga en el navegador. Si pulso F5 se aplicaría el color de 124 00:14:35,220 --> 00:14:41,860 fondo. Vale, eso es todo lo que os quería comentar y si tenéis alguna duda consultarme. Gracias.