Guion de Curso HTML CSS Inaki Martin CUR

1.
1 HTML - Conceptos iniciales
GUIONES DE CLASE
PROGRAMACIÓN HTML - CSS - JAVASCRIPT
© Iñaki Martín
CAPÍTULO 1.1
HTML INICIAL
Guión de curso – HTML- CSS- JS
© Iñaki Martín Este manual es parte del Curso de Marcas, que junto a
otros cursos están disponible en su totalidad en la web
www.javayotrascosas.wordpress.com
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.
1.1 HTML - Conceptos iniciales Elementos HTML: Resumen
© Iñaki Martín
1.1 HTML - Conceptos iniciales Elementos semánticos HTML5: Resumen
© Iñaki Martín
1.1 HTML - Conceptos iniciales Elementos HTML: Resumen
<div class="cabecera"> Lista de discos </div>

© Iñaki Martín
<div class="cabecera"> Lista de discos </div>

ATRIBUTO VALOR
PAR ATRIBUTO/VALOR
ETIQUETA DE APERTURA CONTENIDO DEL ELEMENTO ETIQUETA DE CIERRE
ELEMENTO HTML
1.1 HTML - Conceptos iniciales Contenedores
ELEMENTOS Y ETIQUETAS
• Un elemento HTML se define mediante una etiqueta inicial. Si el elemento contiene otro contenido, termina con una
etiqueta de cierre, donde el nombre del elemento está precedido por una barra diagonal:
© Iñaki Martín
Aquí <p> .... </p> es un elemento HTML, <h1> ... </h1> es otro elemento HTML.
<div> ... </div>
Mientras que <p> y </p> son las etiquetas con las que construyo el elemento
<h1> .. </h1>
Con otro ejemplo, <p> es la etiqueta de inicio de un párrafo y </p> es la etiqueta de
<p> .. </p>
cierre del mismo párrafo, pero <p> Este es el párrafo </p> es un elemento de párrafo.
• Hay algunos elementos HTML que no necesitan cerrarse, solo tienen etiqueta inicial, como <img>, <br>, <hr>,
etc. Estos se conocen como elementos vacíos (ver explicación detallada más adelante)
ATRIBUTOS
• Un elemento HTML puede tener uno o varios atributos, dentro de la etiqueta de inicio. Cada atributo se define
por un par de valores atributo/valor, asignando el segundo en el primero. El valor siempre es una cadena (entre
comillas simples o dobles)
<div id="inicio" class="cabecera" > ... </div>
ELEMENTOS ANIDADOS
<!DOCTYPE html>
<html lang="en-US">
• En HTML esta permitido (y abundantemente <head>
usado) tener elementos HTML anidados (unos <title>Titulo de mi pagina</title>
</head>
dentro de otros) <body>
<div>
• El único problema es siempre recordar cerrar <p>Esto es un <u>parrafo</u> </p>
</div>
los elementos (si hay que cerrarlos), y en el </body>
orden correcto </html>
ELEMENTOS CON CONTENIDO, ELEMENTOS VOID y OPCIONALES
Las etiquetas de HTML pueden tener varios formatos, según el elemento que se trate:
© Iñaki Martín
• Etiquetas de CON CONTENIDO

- Se inician en una etiqueta de apertura, luego llevan el contenido, y finalizan con una etiqueta de cierre:
- <p> aquí va el contenido </p>
- <h1> aquí va el contenido </h1>
• Etiquetas de SIN CONTENIDO, tambien llamadas VOID

- Se inician en una etiqueta de apertura, no llevan el contenido, y finalizan en la misma etiqueta, que
aunque puede ser "autocerrada", las reglas dicen que esta hasta prohibido cerrarlas:
- <br> (insistimos, aunque funcione <br/>, no esta bien según las reglas de w3.org)
- <input type="submit" value="Acceder">
- <img src=“unaimagen.png" width=“128" height=“128">

Las etiquetas indicadas como VOID; y que todas ellas tienen prohibido cerrarse, son :
- area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param
• Etiquetas OPCIONALES, esto es, que pueden ponerse o no, y aun siendo aconsejables, no es obligatorio
Los elementos que tienen etiqueta de inicio opcional (esto es, que pueden no existir) son:
- body, head, html, body
Los elementos que tienen etiqueta de cierre opcional son:
- body, colgroup, dd, dt, head, html, li, option, p, tbody, td, tfoot, th, thead, tr
Para una relación detallada de cada una de estas decisiones , visitar

https://www.w3.org/TR/html4/index/elements.html
CONTENEDORES
Varias etiquetas HTML sirven para “contener” dentro de ellas a otras etiquetas.
Se pueden clasificar en dos tipos:
© Iñaki Martín
• Contenedores de BLOQUE
- Se inician en una linea nueva
- Cogen todo el ancho que tengan disponible. Ejemplo:
- <div>
- <h1> .. <h6>
- <p>
- <form>
• Contenedores de LINEA
- NO inician una linea nueva

- Cogen solo el ancho que necesitan. Ejemplo:
- <span>
- <a>
- <image>
SPAN y DIV
• Es habitual confundir el uso de span y div. Con lo antedicho, los div (tambien se llaman vulgarmente
capas) son apropiados para agrupar elementos (incluso es recomendable su uso), y los span se suele
usar para aplicar estilos.
1.1 HTML - Conceptos iniciales Esquema inicial
ESQUEMA GENERAL
<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
© Iñaki Martín
<title>TODO supply a title</title> 

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body> <!— BODY lleva el contenido a mostrar de la pagina —>
</body>
</html>
ETIQUETAS BASICAS HTML

Etiqueta Atributo Acción
BR Realiza un salto de linea
H1 H6 Da al texto estilo de cabecera, de tamaños de 1 a 6 (1 tamaño mayor)
DIV Establece un bloque. Se usa como contenedor de otros elementos, a
menudo para unificar varios elementos con el mismo estilo. No tiene

atributos propios, aunque STYLE y CLASS si son habituales
P Establece un párrafo.
<br> Realiza un salto de linea. Si no, HTML no pone ninguno salvo elementos especiales.
Aqui detras va un salto de linea <br> Asi tambien vale <br/>
<h1>Un valor tamaño cabecera 1 (tamaño maximo)</h1>

<h2>Un valor tamaño cabecera 2</h2>
<h6>Un valor tamaño cabecera 6 (tamaño minimo)</h6>
<div>PRIMER DIV</div>
<p>Esto es un paragraph.</p>
<p id="p1">
Esto es un paragraph con etiquetas indentadas
</p>
1.1 HTML - Conceptos iniciales Atributos más habituales
ATRIBUTOS MAS HABITUALES (PARA CASI TODA ETIQUETA)
Estos atributos son comunes a casi todos los elementos HTML
© Iñaki Martín
TITLE Su valor se muestra al pasar el raton por encima (un tooltip)

ID Indica el identificador de un elemento.
No debe haber mas de un elemento con el mismo identificador
CLASS Indica un identificador de clase. Se usa para agrupar varios
elementos con un identificador comun, generalmente, para aplicarles
conjuntamente estilos CSS
STYLE Permite añadir un estilo específico al elemento, con notacion CSS
WIDTH Ancho del contenido. Tipico de etiquetas contenedoras
HEIGHT Alto del contenido. Tipico de etiquetas contenedoras
<p title="Title se muestra como un tooltip">

Texto con tooltip.
</p>
<p id="identificador1">Esto es un parrao con identificador</p><br>
<h1 style="color:blue;">Esto es un titulo azul</h1>
<img src=“unaimagen.png" width=“128" height=“128">

1.1 HTML - Conceptos iniciales Etiqueta PRE y de formato de fuente
PRE (ETIQUETA)
PRE muestra su contenido preservando espacios y saltos de linea originales.
<pre>
© Iñaki Martín
Una linea nueva

Otra linea
Salen todas con saltos de linea
</pre>
ETIQUETAS FORMATO DE FUENTE

Con estas etiquetas se puede cambiar el formato del texto: negritra, cursiva, subrayado…
B negrita
STRONG formato “importante” (muy similar a negrita)
I cursiva
EM texto enfatizado
MARK texto marcado
SMALL mas pequeño
DEL texto borrado
INS texto insertado
SUB texto subíndice
SUP texto superíndice
Q añade comillas
<b>Este texto saldrá en negrita</b>

<i>Este texto saldrá en itálica (cursiva)</i>
<sub>Este texto saldrá como subíndice</sub>
1.1 HTML - Conceptos iniciales Etiqueta A
A (ETIQUETA)
Con la etiqueta A se puede realizar un enlace a otra pagina, u otro elemento de la propia pagina, o un fichero.
HREF Su valor indica el destino del enlace
© Iñaki Martín
A
A TARGET Indica en donde se va a abrir el nuevo enlace. Valores posibles:
“_blank" Enlace se abre en nueva pagina
"_self" Enlace se abre en la misma pagina o tab
"_parent" Enlace se abre en la ventana padre
"_top" Enlace se abre a pagina completa
"nombref" Enlace se abre en el frame nombref
A DOWNLOAD Se usa sin valor, e indica que el elemento debe descargarse
<a href="https://www.google.com">Enlace a Google</a>

<a href="https://www.bla.com" target="_blank" >Enlace se abre en nueva pagina o tab </a>
<a href="https://www.as.com" target="_self" >Enlace se abre en la misma pagina o tab </a>
<a href="https://www.google.com" target="_parent" >Enlace se abre en la ventana padre </a>
<a href="https://www.google.com" target="_top" >Enlace se abre a pagina completa </a>

<a href="https://www.google.com" target="nombref">Enlace se abre en el frame nombref</a>
Enlaces de descarga
Opcionalmente una etiqueta "a" tambien puedo DESCARGAR un contenido (imagen, url, etc)
<a href="/images/imagen2.jpg" download>Descarga aqui esta imagen</a>
Enlaces dentro de la misma página (anclas)

Para marcar enlaces a otro contenido dentro de la misma página (la antiguas "anclaS"), usar:
<a name="capitulo1"></a> donde se deba llegar desde los enlaces internos (las anclas)
(tambien puede ir con texto dentro de las etiquetas)
<a href="#capitulo1">Subir a Capitulo 1</a> para colocar donde se desee poner el enlace (ancla)
1.1 HTML - Conceptos iniciales Etiqueta IMG
IMG (ETIQUETA)
IMG inserta un imagen en la página.
© Iñaki Martín
IMG SRC Identifica el nombre de la imagen. Puede ser una URI o tener path
IMG ALT Texto que se muestra si no se puede cargar la imagen
IMG STYLE Estilo css aplicable a la imagen. Puede contener multiples atributos
IMG WIDTH y HEIGHT Alto y ancho. Preferible usar style
IMG USEMAP Identifica el mapa de areas que se aplica a esta imagen (ver MAP)
<img src="unaimagen.png"
alt="Imagen no se ha podido cargar"
style="width:128px;height:128px;"
width="128"
height="128">
Imagen que es un enlace
Asi se usa una imagen como un link:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
<p><img src="smiley.gif" alt="Carita" style="float:right;width:42px;height:42px;">

Esta imagen se ubica flotando a la derecha de este texto</p>
1.1 HTML - Conceptos iniciales Etiqueta MAP
MAP (ETIQUETA)
Un mapa de imagen permite identificar selectivamente areas de una imagen
© Iñaki Martín
MAP NAME Identifica el nombre del mapa de areas. Debe ser el mismo que se usa
en el atributo USEMAP de la imagen sobre la que se aplica este mapa
AREA SHAPE INdica que tipo de imagen tiene un area: “rect”, “circle”, "poly"
AREA COORDS Coordenadas que identifican el area. Cada forma que tenga el area
necesitia mas o menso coordenadas, y con diferente significado.
<img src="planetas.png"
usemap="#planetamap"
style=“width:145px;height:126px;">
<map name="planetamap">
<area shape="rect"
coords="0,0,82,126"
alt="Sol"
href=“sol.htm">
<area shape="circle"
coords="90,58,3"
alt="Mercurio"
href=“mercurio.htm">
<area shape="poly"
coords="124,58,8,3,11,12"
alt="Venus"
href="venus.htm">
</map>
1.1 HTML - Conceptos iniciales Etiqueta TABLE
TABLE (ETIQUETA)
Crea un tabla, y define sus filas y columnas
© Iñaki Martín
TABLE Inicia y acaba una TABLA

TR Inicia y acaba una FILA
TH Inicia y acaba la CABECERA de columna, debe usarse dentro de una fila
TD Inicia y acaba una COLUMNA, debe usarse dentro de una fila
Actua como contenedor de datos de la tabla, y puede contener
otros elementos HTML: text, images, lists, tables, etc.
TD COLSPAN Indica el numero de cedas que han de fundirse en la fila actual
<table style="width:100%">
<caption>Titulo de la tabla</caption>
<tr>
<th>NOMBRE</th>
<th>EDAD</th>
</tr>
<tr>
<td>Ana</td>
<td>50</td>
</tr>
<tr>
<td>Petra</td>
<td>94</td>
</tr>
<tr>
<td colspan="2">dos celdas unidas</td>
</tr>
</table>
1.1 HTML - Conceptos iniciales Etiquetas UL y OL
UL (ETIQUETA)
Crea un lista, con viñetas no ordenadas (que el identificador no pone orden, son puntos, guiones, etc)
© Iñaki Martín
UL Inicia y acaba una LISTA NO ORDENADA.

En CSS existe una propiedad llamada list-style-type que define que
elemento se usa como viñeta de la lista.
LI Identifica cada uno de los elementos de la lista
<ul style="list-style-type:circle">
<li>Pera</li>
<li>Uva</li>
<li>Manzana</li>
</ul>
OL (ETIQUETA)
Crea un lista, con viñetas ordenadas (que el identificador pone orden, son numeros, letras, etc)

OL Inicia y acaba una LISTA ORDENADA
OL TYPE Indica que tipo de viñeta se va a usar. Valores:
1 - ordinal numerico
A - ordinal alfabetico mayusculas
a - ordinal alfabetico minusculas
I - ordinal numeros romanos mayusculas
i - ordinal numeros romanos mayusculas
<ol type="1">
<li>Pera</li>
<li>Uva</li>
<li>Manzana</li>
</ol>
1.1 HTML - Conceptos iniciales Etiqueta IFRAME
IFRAME (ETIQUETA)
Permite mostrar una parte de una web dentro de la web actual
© Iñaki Martín
IFRAME SRC Origen de la web a mostrar

<iframe src="nuevaURL"></iframe>
<iframe src="demo_iframe.htm"
height="200"
width="300"
style="border:2px solid grey;">
</iframe>
Se puede usar un iFrame como el destino de un link:

<iframe src="nuevapagina.html" name="iframe_1"></iframe>
<p><a href="https://es.wikipedia.org/" target="iframe_1">Aqui se abre wikipedia</

a></p>
1.1 HTML - Conceptos iniciales Entidades HTML
ENTIDADES HTML
Una entity es un caracter que no se puede representar directamente en HTML,

bien por que son caracteres reservados de HTML o que no se pueden representar
© Iñaki Martín
Se pueden representar de dos formas:

- un & seguido de un acronimo
- un &# seguido de un numero (realmente, el codigo ASCII de cada caracter)
Algunos de los mas usados son:
ENTITY Acción
Se refiere a NonBreakingSpace.
vale para indicar al navegador que no puede hacer salto de linea
entre dos elementos, p.e. para escribir 12 PM
A veces se usa para añadir simplemente un espacio en blanco, pero
no es aconsejable
< < simbolo menor que ( < )

> > simbolo mayor que ( > )
& & simbolo ampersand ( & )
" " simbolo comillas ( “ )
€ € simbolo euro ( € )
< < simbolo menor que ( < )
á simbolo a acentuada ( á )
é simbolo e acentuada ( é )
í simbolo i acentuada ( í )
ó simbolo o acentuada ( ó )
ú simbolo u acentuada ( ú )
ñ simbolo ñ ( ñ )
Ã simbolo A acentuada ( Á ) (igual para otras vocales y Ñ)
1.1 HTML - Conceptos iniciales Nuevos elementos semanticos
ELEMENTOS SEMANTICOS NUEVOS EN HTML5
๏ HTML5 incluye nuevos elementos semánticos, que valen para definir zonas o partes de una pagina web.
© Iñaki Martín
Ejemplo de web Identificación del tipo Correspondencia con los

de contenido de la elementos semánticos de
web de ejemplo HTML5
LA PAGINA MARAVILLOSA CABECERA <header> </header>
Inicio | Opciones | Descargas Menu de navegacion <nav> </nav>

Lunes 2 de marzo de 2016 INFORMACION
Historial
NOTICIAS DEL DIA > 2017 (2) PRINCIPAL <section>
> enero(2)
Lorem Ipsum Alfa Lorem ip

Lorem ip <article> <aside>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent Contenido 1
pellentesque maximus elit, vel ✦ Enlace 1 Barra
interdum velit efficitur vitae. In sit ✦ Enlace 2
amet cursus justo. Nulla eros lorem, ✦ Enlace 3 lateral </article>
(acesos,
Lorem Ipsum Beta banners, <article>
Lorem ipsum dolor sit amet, publi,...)
consectetur adipiscing elit. Praesent Contenido 2
pellentesque maximus elit, vel
interdum velit efficitur vitae. In sit
amet cursus justo. Nulla eros lorem </article> </aside>
</section>
© 2017 Contacto: 910080007 Información institucional y © <footer> </footer>

1.1 HTML - Conceptos iniciales Nuevos elementos semanticos
๏ Un elemento semántico es el que por si mismo describe su significado: div, span no son semánticos; footer,
details, si son semánticos
๏ No tienen atributos propios, ni dan efectos especiales, ni se colocan automáticamente en áreas de la web
© Iñaki Martín
(han de colocarse mediante div o como cualquier otro elemento)

๏ Se usan para que los motores de los buscadores identifiquen correctamente la naturaleza del contenido, y
para permitir la mas fácil reutilización de información.
๏ A continuación viene un lista de los elementos semánticos más importantes :
<header> Define la cabecera de un documento o de una sección.

No confundir con la etiqueta <head>
<nav> Define enlaces para navegación entre paginas o secciones
<article> Define un artículo, un área de expresión de información, normalmente escrita
<section> Define un sección del documento

<aside> Define un contenido “lateral”, adicional, al contenido principal,
<details> Definen detalle adicionales que el usuario puede ocultar o mostrar
<figcaption> Define el caption de un elemento <figure>
<figure> Define contenido auto-contenido, como imágenes, diagramas, fotos, listas, …
<footer> Define el pie de página de la web
<main> Define el contenido principal del documento
<mark> Define texto remarcado
<summary> Define una cabecera para un elemento <detail>
<time> Define un información de tipo fecha u hora
Guión de curso – HTML-CSS-JS © Iñaki Martín
10. CSS - Inicio

Elementos CSS: Resumen
1.2 HTML - Formularios 1
GUIONES DE CLASE
Iñaki Martín
CAPÍTULO 1.2
FORMULARIOS HTML
©
Temario de curso HTML - CSS - JS
Temario de curso HTML - CSS - JS © Iñaki Martín
1.2 HTML - Formularios

GUÍA RÁPIDA HTML5
2
1.2 HTML - Formularios Etiqueta FORM (Ejemplo) 3
Ejemplo global de un formulario (sin estilo)

<!DOCTYPE html>
<html>
<head>
<title>EJEMPLO DE FORMS EN HTML</title>
Iñaki Martín
</head>
<body>
<form action="http://www.otrapagina.es" method="get">
Nombre: <input type = "text" name = "campo_nombre" value="(escriba aqui su nombre)" size="60"/> <br>
Contraseña: <input type = "password" name = "campo_contrasena" /><br>
Descripcion larga: <br><textarea rows="6" cols="50" name = "campo_descripcion"></textarea><br>

©
Seleccione:<br>
<input type = "radio" name = "opcionesradio" > Mayor de edad<br>
<input type = "radio" name = "opcionesradio" checked> Menor de edad<br>
Seleccione:<br>
<input type = "checkbox" name = "op1" > Estudiante<br>

<input type = "checkbox" name = "op2" checked> Ni aqui ni allá<br>
<input type = "checkbox" name = "op3" > Jubilado<br>
Seleccione:<br>
<select name = "listadesplegable" multiple>
<option value = "campo_Empadronado" selected>Empadronado</option><br>
<option value = "campo_Visitante habitual">Visitante habitual</option><br>
<option value = "campo_Turista">Turista</option><br>
<option value = "campo_Desplazado">Desplazado</option><br>
</select><br>
Elige un color personal<input type = "color" name = "selectorDeColor" /><br>
Sube una foto de tu ordenador<input type = "file" name = "fileupload" accept = "image/*" /><br>
<input type="submit" name="boton_final" value="PULSA AQUI Y VERAS QUE SORPRESA"><br><br>
</form>
</body>
</html>
1.2 HTML - Formularios Etiqueta FORM (Formularios) 4
FORM (ETIQUETA)
• Con la etiqueta FORM se define un formulario.
• Un formulario es una colección de elementos que sirven para preguntar al usuario por información. Esta información se
recopila, se agrupa y se pueden “enviar” a un servidor web, o a otro programa, o en general, a alguna entidad diferente.
Iñaki Martín
• El envío se realiza mediante una acción especifica (p.e., pinchar en un botón)

• Los datos se envían en conjunto, tanto los elementos inicialmente cargados como las modificaciones incluidas por el usuario
en vivo.
• Una etiqueta FORM contiene otras etiquetas, normalmente únicamente usadas en formularios. Las mas importantes son:
Etiqueta INPUT, y su atributo type con diferentes valores: “text” “time”

©
Parte 1
de este
tema Etiqueta SELECT “password” “date”
Etiqueta TEXTAREA “radio” “datetime-local”
Etiqueta BUTTON “submit” “email”
Etiqueta DATALIST “reset” “url”

Etiqueta FIELDSET y LEGEND “checkbox” “month”
“button” “week”
• Todas estas etiquetas pueden a su vez tener unos atributos propios, “image” “number”
pero tambien unos cuantos comunes a (casi) todos ellos: “hidden” “range”
Parte 2 “color” “search”
de este id size multiple form
tema
name maxlength pattern formaction
value placeholder required formmethod
readonly min step formvalidate selected
disabled max autofocus formtarget checked
• Una etiqueta FORM , además, tiene atributos propios solo de ella:
action novalidate
Parte 3
de este
method enctype
tema autocomplete accept-charset
1.2 HTML - Formularios Etiqueta INPUT 5
INPUT (ETIQUETA)
Con la etiqueta INPUT se pueden crear elementos que solicitan informacion al usuario
El tipo de informacion depende de su atributo type y el valor que tenga
Etiqueta Atributo Valor Acción
Iñaki Martín
INPUT TYPE Su valor indica el tipo de la informacion solicitada

INPUT TYPE TEXT Pide un texto normal en una caja normal
<input type=“text”><br>
<!— atributo "value" pone un valor que inicialmente aparece en la caja -->
<input type="text" value="valorinicial" ><br>
©
<!— atributo "name" pone un nombre a la caja o elemento -->

<input type="text" name=“nNombre"><br>
PASSWORD Pide un texto normal en una caja normal, pero al escribirse no

se muestra
<input type="password" value="valorinicial" name="nNombre"><br>
RADIO Ponen varios RADIO BUTTON

Para que sean exclusivos entre si han de llevar el mismo "name"
El texto de cada radio se pone tras la etiqueta "radio"
Si un radio lleva el atributo "checked" (sin valor) es el que
sale marcado por defecto
El "value" se usa posteriormente para devolver un valor al
analizar que opcion esta marcada
<input type="radio" name="sexo" value="hombre" checked> Hombre<br>
<input type="radio" name="sexo" value="mujer"> Mujer<br>
<input type="radio" name="sexo" value="otro"> Otros
RESET Eso muestra un boton RESET, que lo que hace es borrar todos los
datos del form
El "value" aqui es el texto que aparece en el boton
<input type="reset" value="borrar todo">
1.2 HTML - Formularios Etiqueta INPUT 6

INPUT TYPE CHECKBOX Muestra un CHECK BOX. El texto se pone tras la etiqueta
"checkbox"
Si un checkbox lleva el atributo "checked" (sin valor) sale
marcado por defecto
El "value" se usa posteriormente para devolver un valor al
Iñaki Martín
analizar que opcion esta marcada

<input type="checkbox" name="nAceptar" value="1"> Acepto las condiciones<br>
SUBMIT Muestra un BOTON DE ENVIO, que envia el formulario a un destino.

(p.e., una pagina nueva que con un script procesa los datos)
Esta nueva pagina a la que se traspasa la navegacion esta en
el atributo ACTION de la etiqueta FORM (ver mas adelante)
©

<input type="submit" value="Submit">
BUTTON Asi se muestra otro tipo de BOTON

La diferencia con SUBMIT es que la accion hay que hacer al
pulsarlo se indica en esta misma etiqueta BUTTON, no en el FORM
Este boton esta pensado para acciones que no "concluyan" el
formulario.
La accion se ha de incluir como un evento de accion (onCLick o
similar, ver mas adelante)
<input type="button" onclick="alert('Hola!')" value="Pulsa y te saludo">
IMAGE Casi igual que un type BUTTON, pero con aspecto de imagen
El atributo "src" indica de donde se extrae la imagen
<input type="image" src="caja.png" onclick="alert('Hola!')" >
HIDDEN Control que sirve al programador para enviar algún dato al

servidor de forma invisible al usuario
<input type="hidden" value="texto oculto al usuario">
1.2 HTML - Formularios Etiqueta INPUT (atributos de HTML5 sólo) 7

INPUT TYPE COLOR Muestra un boton para elegir color, que dependiento del
navegador, puede mostrar
un cuadro de dialogo para elegir color.
<input type="color" name="favcolor" value="#ff0000">
Iñaki Martín
TIME Muestra un boton para elegir una hora y minutos, que dependiento
del navegador, puede mostrar
un cuadro de dialogo para elegirlos.
<input type="time" name="hora" >
DATE Muestra un cuadro para elegir una fecha, permitiendo solo

valores correctos
©
Opcionalmente, dependiento del navegador, puede mostrar un boton

que abre un cuadro de dialogo para elegir fecha.
<input type="date" name="unafecha">
Los atributos max y min pueden hacder restricciones al valor a

introducir:
Fecha anterior a 01-01-1980-:
<input type="date" name="fecha1" max="1979-12-31"><br>
Fecha posterior a 01-01-2000:
<input type="date" name="fecha2" min=“2000-01-02"><br>
DATETIME Parecido a DATE, solo que ademas de fecha pide la hora

-LOCAL <input type="datetime-local" name=“unafecha">br>
EMAIL Muestra un campo para escribir un email. La mayoria de los

navegadores valida el formato del texto como email
<input type="email" name="dircorreo">
URL Muestra un campo para escribir una direccion URL. La mayoria de

los navegadores valida el formato del texto como URL
<input type="url" name=“pagina">
1.2 HTML - Formularios Etiqueta INPUT (atributos de HTML5 sólo) 8

INPUT TYPE MONTH Muestra un boton para elegir un mes y un año.
Dependiento del navegador, puede mostrar un cuadro de dialogo
para elegir fecha.
<input type="month" name="mes">br>
Iñaki Martín
WEEK Parecido a MONTH, solo que aqui pide una semana y un año
<input type="week" name=“unafecha">br>
NUMBER Muestra un control para elegir un valor, en la mayoria de

navegadores, con un control
que aumenta o disminuye el valor usando botones<br>
Puede indicarse el maximo y el minimo, y el valor inicial, y el
©
salto entre valores:

<input type="number" name="cantidad" min="1" max="16" step=“3">
RANGE Muestra un control para elegir un valor, como un control

deslizante
El valor en si no es importante, pues no se ve.
El minimo y maxio por defecto son 0 y 100, aunque se puede
modificar,
asi como el "salto" del desplazamiento,
Puede indicarse tambien el valor inicial
<input type="range" name="cantidad" min="1" max="1" step="2" value="8">
SEARCH Muestra una caja para escribir un valor de busqueda

Se comporta como un texto normal, y algunos navegadores añaden
boton de borrar o retroceder
<input type="search" name="buscar">
1.2 HTML - Formularios Etiqueta SELECT Y TEXTAREA 9
SELECT (ETIQUETA)
SELECT Usado para crear listas desplegables
El texto de cada opcion va dentro de un par de etiquetas <option>
Iñaki Martín
OPTION SELECTED Contiene cada una de las opciones de una lista desplegable
Si una lleva el atributo "selected" (sin valor) sale seleccinado
por defecto
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
©
<option value="audi">Audi</option>
</select>
TEXTAREA (ETIQUETA)
TEXTAREA Caja de texto multilinea que permite texto amplios. Si no caben los
textos en la caja inicilamente mostrada, se permite escribir
mostrando barras de desplazamiento.
<textarea name="mensaje">
Escriba aqui en el mensaje que desee.
</textarea>
TEXTAREA ROWS, COLS ROWS Indica el numero de filas que muestra inicialmente la caja
COLS Indica el ancho (en numero de caracteres) que muestra la caja
<textarea name="mansaje" rows="10" cols="30">
Escriba aqui en el mensaje que desee.
</textarea>
1.2 HTML - Formularios Etiquetas BUTTON y DATALIST 10
BUTTON (ETIQUETA)
BUTTON Practicamente identico a un input con type="button", solo que el
texto a mostrar está entre etiquetas "button" (mas facil para darle
estilo)
Iñaki Martín
<button type="button" onclick="alert('Hola!')" >Pulsa y te saludo</button>

©
DATALIST (ETIQUETA)
DATALIST Crea una lista en la que el usuario puede escribir para ir

filtrando los resultados
Esta lista creada ha de ser invocada por una etiqueta INPUT con
atributo LIST. Este valor de input-list ha de coincidir con el id
del DATALIST (“paises” en el ejemplo)
<input list="paises" name="dlPaises">
<datalist id="paises">
<option value="Francia">
<option value="Alemania">
<option value="Italia">
<option value="Belgica">
<option value="Portugal">
</datalist>
INPUT LIST Valor que indica que DATALIST ha de usarse para filtrarse cuando el
usuario busque un valor
1.2 HTML - Formularios Etiqueta FIELDSET y LABEL 11
FIELDSET (ETIQUETA)
FIELDSET Actua como contenedor. Muestra su contenido enmarcado en un cuadro
<fieldset>
Iñaki Martín
Nombre:<br> <input type="text" name="nNombre" value=""><br>

Edad:<br> <input type="text" name="nEdad" value=""><br><br>
</fieldset>
LEGEND Añade un titulo al cuadro

<fieldset>
<legend>Datos de identificacion:</legend>
©
Nombre:<br> <input type="text" name="nNombre" value=""><br>

Edad:<br> <input type="text" name="nEdad" value=""><br><br>
</fieldset>
LABEL (ETIQUETA)
LABEL FOR Aplica un texto a un componente, de modo que si se pincha en la
etiqueta es como si se hubiera pinchado en el componente (por
ejemplo, para option button)
Para asociarse al componente, ha de tener un atributo "for" que ha
de ser igual al atributo “id" del elemento con el que se enlaza
<label for="idDia">Dia</label>
<input type="radio" name="fase" id="idDia" value="dedia"><br>
(se puede usar tambien sin formulario)

1.2 HTML - Formularios ATRIBUTOS COMUNES 12
ATRIBUTOS COMUNES A CASI TODOS LAS ETIQUETAS (I)

ID Identifica el elemento. Se puede usar para sin tener que enviar el
formulario, en un javascript p.e.
<input type="text" name="nombre" id="idNombre">
Iñaki Martín
NAME Identifica el elemento sobre todo cuando se envia el formulario. Lo

necesita GET y POST.
Un elemento sin NAME no se envia por GET o POST
Ademas, vale para agrupar varios elementos RADIO, que pueden tener luego ID
diferente
©
<input type="text" name="nombre" id="idNombre2">
VALUE Especifica el valor inicial para un campo de entrada, o si la entrada ya

esta definida, se puede usar posteriormente para devolver un valor que no

es la entrada en si
<input type="text" name="nombre" value="Luis">
<input type="checkbox" name="nAceptar" value="1"> Acepto las condiciones<br>
READONLY Hace que el campo de entrada sea de solo lectura

<input type="text" name="nombre" value="Luis" readonly>
DISABLED Un campo editable en modo disabled se ve (en gris) pero no se puede

interactuar con el y no es enviado al destino
<input type="text" name="nombre" value="Luis" disabled >
SIZE Indica el tamaño (en chars) del campo a editar (aunque se puedan escribir
mas chars en el)
<input type="text" name="nombre" value="Luis" size="30">
MAXLENGTH Indica el tamaño máximo (en chars) que admite el campo a editar
<input type="text" name="nombre" value=“Luis" maxlength="20">
ATRIBUTOS COMUNES A CASI TODOS LAS ETIQUETAS (II)

MAX - MIN Indica los valores maximo y minimo para cualquier campo a editar
Funciona con estos input-types: number, range, date, datetime-local,
month, time y week.
Iñaki Martín
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
MULTIPLE El usuario puede introducir mas de una valor para el elemento pedido
Funciona con estos input-types: email y file
©
REQUIRED Indica que el campo es obligatorio. Si se intenta enviar el formulario,

se avisa si no se han completado.
<input type="text" name=“nombre"required>
PLACEHOLDER Muestra una "pista" sobre lo que debe llevar el campo. El texto indicado
en PLACEHOLDER se muestra en el campo del formulario, hasta que el
usuario escribe en el campo, momento en el que se borra.
Funciona con estos input-types: text, search, url, tel, email, y
password.
<input type="text" name="nombre" placeholder="(escriba aqui su nombre)”>
PATTERN Especifica una expresion regular que se usa como patron para validar el
valor del elemento.
Funciona con estos input-types: text, search, url, tel, email, y
password.
Consejo: Usar el atributo TITLE para ayudar al usuario con las reglas
que ha de cumplir
Cod.Provincia: <input type="text"
name="prefijoprovincia"
pattern="[A-Za-z]{3}"
title="Escriba solo tres letras">
ATRIBUTOS COMUNES A CASI TODOS LAS ETIQUETAS (III)

STEP Identifica los "saltos" que dan los valores que se solictan en algunos
campos presentados.
Funciona con estos input-types: number, range, date, datetime-local,
Iñaki Martín
month, time y week.

<input type="number" name="valores" step="3">
AUTOFOCUS Indica que este elemento sera el que obtenga el foco al cargar la
pagina
<input type="text" name="nombre" value="Luis" maxlength="20" autofocus>
©
FORM Permite que un elemento se incluya en un FORM aunque no este dentro de

sus etiquetas, o que un elemento dentro de las etiquetas de un form
pertenezca realmente a otro
Se puede hacer referencia a varios forms, separando los id por espacios

<form action="otra.html" id="form1">
Nombre: <input type="text" name="nNombre"><br>
<input type="submit" value="Enviar">
</form>
Apellidos: <input type="text" name="nApellidos" form="form1">
FORMACTION Ofrece la posibilidad de tener dos botones en un form con dos acciones
distintas. FORMACTION indica una URL o un fichero al que se envia el
formulario, sin hacer caso al ACTION del FORM
FORMACTION se usa con type="submit" y type="image".
<form action="/recibir.php">
Nombre: <input type="text" name="nNombre"><br>
Apellidos: <input type="text" name="nApellidos">
<input type="submit" value="Envio"><br>
<input type="submit" formaction="/recibircopia.php" value="Reenviar">
</form>
FORMMETHOD Para usar junto a casos como el de FORMACTION, donde hay difeerntes botones con diferentes
FORMNOVALIDATE destino de envio, existen otros atributos como :
FORMTARGET FORMMETHOD permite aplicar diferentes metodos de envio para cada medio de envio
FORMNOVALIDATE permite que alguno de los modos de envijo no valide los datos al enviarlos
FORMTARGET permite definir ubicaciones para el nuevo destino (_blank, _self, etc)
1.2 HTML - Formularios ATRIBUTOS DE FORM 15
ATRIBUTOS EXCLUSIVOS DE FORM

ACTION El atributo ACTION define que accion se realiza cuando el formulario es
enviado. Normalmente, el formulario se envia a otra pagina html o a un
servidor
Iñaki Martín
<form action="otrapagina.html">...</form>
<form action="/action_page.php">...</form>
Si no se indica ningun atributo ACTION, el formulario se envia a la

propia pagina
METHOD METHOD indica qué metodo http (GET o POST) se usa en al enviar el form.
©
Si no se indice METHOD se toma GET por defecto

Usar GET hace que la informacion enviada se vea en la propia URL de
envio. No se debe usar si la informacion es sensible o si es mucha
(tiene mucha limitacion de espacio)

Usar POST hace que no se vea la informacion enviada y no tiene limite
de espacio
<form action="/action_page.php" method="get">...</form>
<form action="/action_page.php" method="post">...</form>
AUTOCOMPLETE Especifica si un formulario o un elemento tiene la propiedad

autocomplete activada. Si lo está, el navegador intenta completar la
informacio en base a valores introducidos anteriormente por el usuario.
Funciona con estos input-types: text, search, url, tel, email,
password, datepickers, range, y color.
<form action="/action_page.php" autocomplete="on">

Nombre:<input type=^"text" name="nNombre"><br>
Edad: <input type="text" name="nEdad"><br>
E-mail: <input type="email" name="nEmail" autocomplete="off"><br>
<input type="submit">
</form>
Truco: Se puede tener autocomplete "on" para el form, y "off" para algun campo, o al reves
Aviso: Algunos navegadores activan o desactivan el autocompletado de modo global
1.2 HTML - Formularios ATRIBUTOS DE FORM 16
ATRIBUTOS EXCLUSIVOS DE FORM

NOVALIDATE Indica que los datos del formulario no deben validarwe al enviarse
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
Iñaki Martín
</form>
ENCTYPE Formato en el que se enviarán los datos al servidor (válido para

method=“post”).
Valores : application/x-www-form- urlencoded, multipart/form-data o
text/plain
©
<form action="/action_page.php" enctype="text/plain">

</form>
ACCEPT- Especifica el juego de caracteres con el que son enviados los datos del
CHARSET formulario.
Valores normales: UTF-8 - Codificacio Unicodem, ISO-8859-1 -
Codificación de alfabetao latino
<form action="/action_page.php" accept-charset=“UTF-8”>
</form>
¿Por que elegir POST o GET?

• Get es mucho más inseguro, pero es más rápido y además permite guardar una URL en los
marcadores del navegador, con parámetros para mejor acceso.
• POST es mas seguro, y ademas permite un contenido mayor en la petición (no como GET
que solo admite unos 2000 caracteres)
1.2 HTML - Formularios

GUÍA RÁPIDA HTML5 (I)
17
1.2 HTML - Formularios GUÍA RÁPIDA HTML5 (II) 18
Iñaki Martín
©
1.3 Ejemplos Hmtl-Css 1
GUIONES DE CLASE
Iñaki Martín
CAPÍTULO 1.3
EJEMPLOS HTML-CSS
©
1.3 Ejemplos Hmtl-Css

GUÍA RÁPIDA HTML5
2
1.3 Ejemplos Hmtl-Css Ejercicios: Un menu superior encima de la cabecera (imagen o color) 3
<body>
<header>
<nav>
<h2>Un menu encima de una imagen</h2>
<div class="contenedor_menu">
<a href="inicio.html">Ayuda</a>
<a href="inicio.html">Alumnos</a>
<a href="inicio.html">Cursos</a>
<a href="inicio.html">Información</a>
Iñaki Martín
<a href="inicio.html">Inicio</a>
</div>
</nav>
</header>
...
nav {
/* SI USAMOS UNA IMAGEN */
background-image: url("cabecera.jpg");
/* SI USAMOS UN FONDO LISO DE COLOR */
/* background-color: #3eade8; */
©
/* el alto minimo que ha de tener la cabecera (sea imagen o sea color)*/

min-height: 200px;
/* dimension del nav (alto), en relacion a la pagina */
height: 100px;
/* dimension del nav (ancho), en relacion a la pagina */

width: 99%;
/* Asi ponemos la imagen DE FONDO, cubre todo el header y su contenido, no es un elemento más dentro del header*/
background-size: cover;
/* relacion de tamaño de imagen sobre el fondo. Con un 50% de ancho, mete DOS VECES la imagen, salvo poner luego no-repeat */
background-repeat: no-repeat;
/* si la relacion de tamaño es menor que el tamaño del header, que no repita la imagen*/
background-position: center center;
/* Separamos el texto de la cabecera de los bordes de la misma */

padding: 5px 5px 5px 5px;
/* Es necesario si queremos que el menu este encima de este nav */

position: relative;
}
.contenedor_menu {
/* position:absolute significa que un elemento se coloca con referencia absoluta en relación con el antepasado más cercano
que tiene position:absolute o bien position:relative." */
/* Asi pues con position:absolute se permite "el uso top, right, bottom, left" de modo absoluto sobre su contenedor */
/* En este caso, este contenedor contiene el menu, y se posiciona de modo absoluto sobre si padre, el nav, con lo que siempre
podemos asignarlo a cualquier esquina del nav (segun los extremos con valor 0 que usemos) */
position: absolute;
/* Este margen desplaza algo el menu de la esquina en la que lo estemos poniendo */
margin: 20px;
/* Esto indica que se coloque pegado a la parte de abajo de su contenedor */
bottom: 0;
/* Esto indica que se coloque pegado a la parte derecha de su contenedor */
right: 0;
}
(continua) ➡
1.3 Ejemplos Hmtl-Css Ejercicios: Un menu superior encima de la cabecera (imagen o color) 4
/* ******************** MENU */
(continuación)
nav div a {
/* Para ir colocando cada elemento del menu encadenados a la derecha */
Iñaki Martín
float: right;
/* Para separar un elemento del menu del otro */
margin-left: 6px;
/* Establece el ancho y alto de la caja del menu, esto es, en este caso, del elemento a */
padding: 5px 10px 5px 10px;
/* Color de fondo */
background-color: rgb(1, 1, 1);
/* Color de texto */
color: rgb(170, 219, 238);
/* Para hacer que los enlaces del menu no esten subrayados */
text-decoration: none;
©
/* Tamaño del texto */

font-size: 17px;
/* Texto en negrita */
font-weight: bold;
/* para hacer que el fondo de cada elemento del menu camie de color al pasar el raton por encima */
nav div a:hover {
/* Color de texto */
color: rgb(12, 12, 11);
/* Texto en negrita */
font-weight: bold;
/* Color de fondo */
background-color: rgb(170, 192, 245);
}
1.3 Ejemplos Hmtl-Css Ejercicios: Un div con bordes parciales..... 5
๏ No existe en CSS una propiedad que permita definir el largo de

un borde, pero podemos usar un truco, consistente en agregar
un pseudo elemento : after, asígnámndole un borde inferior y
estableciendo un ancho. Eso si, ha yque repetir la faena para
cada uno de los lados del "marco", con dos divs uno dentro de .divconbordeparcial {
Iñaki Martín
width: 200px;
otro.... Hecho. height: 200px;
border-top: 20px solid red;
position: relative;
border-radius: 10%;
}
©
.divconbordeparcial:after {
content: "";
background: red;
<div class="divconbordeparcial"> position: absolute;

<div class="divconbordeparcialderecho"> bottom: 60%;
<img class="imageninterior" src="apps.png" /> left: 0;
</div> height: 40%;
</div> width: 20px;
.divconbordeparcialderecho:after {
content: "";
background: red;
position: absolute;
bottom: 60%;
left: 90%;
height: 40%;
width: 20px;
}
.imageninterior{
width: 80%;
higth:80%;
padding: 20px;
}
1.3 Ejemplos Hmtl-Css Ejercicios: Un div compuesto por diversas columnas 6
Iñaki Martín
<div class="cuerpocentral">
<div class="articulo">
<img src="apps.png" hspace="5" vspace="5" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt ut labore et
</p>
</div>
©
<img class="add.ico" hspace="5" vspace="5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
</p>
</div>
<img class="abaco.png" hspace="5" vspace="5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
</p>
</div>
<div class="div_vacio_con_clear"></div>
</div>
.articulo {
width: 28%; Mucho cuidado con este valor: el ancho total de
float: left; todos los articulos, más los padding y margins
background-color: darkslategray; Este es el elemento que hace que cada uno se no puede superar el 99% del tamaño de div
margin:5px;
border-radius: 5%;
alinee a la izquierda del anterior, pues nada uno va contenedor, o hay un salto de línea. Aquí hay 3
padding: 5px; "flotando" (subiendo y colocándose) a la izquierda de articulos, y aunque cada uno podría ocupar un
} su contenedor, y uno al lado del anterior 33% el realidad ha de ser menos.
.articulo img{
float: left;
} Al igual que los articulos, aquí indicamos que la imagen se coloque a la izquierda y flotando , de modo
que lo siguiente se coloque pegado a su derecha, y de este modo, el texto rodea la imagen
.div_vacio_con_clear{
clear: both;
} Muy importante. Si no existe, el contenedor "cuerpocentral" se colapsa y no toma la altura necesaria (pues contiene únicamente
elementos float). Si queremos que el borde rojo abarque todos los artículos, necesitamos esta div vacío con un clear
1.3 Ejemplos Hmtl-Css Ejercicios: Como tener dos botones en un mismo formulario 7
๏ Dado que una etiqueta form no puede tener dentro otra etiqueta form... ¿cómo poner dos botones en un mismo form?
1 Solución 1 ( llamando al mismo destino)
<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />
๏ Usar dos submit que tengan distinto value
Iñaki Martín
y luego evaluar (en PHP por ejemplo) que if ($_POST['action'] == 'Update') {

//action for update here
value se ha seleccionado } else if ($_POST['action'] == 'Delete') {
//action for delete
} else {
//invalid action!
}
©
2 Solución 2 ( llamando también al mismo destino) <input type="submit" name="Update" />

<input type="submit" name="Delete" />

๏ Dos submit que tengan distinto name
if (isset($_POST['update'])) {
y luego evaluar (en PHP por ejemplo) que value //update action
} else if (isset($_POST['delete'])) {
se ha seleccionado //delete action
} else {
//no button pressed
}
3 Solución 3 ( llamando además a distintos destinos)
๏ Usando button con el nuevo atributo HTM5 llamado formaction, indicando un action distinto a cada botón :
<button type="submit" name="camper" formaction="formindb_hoh_1.php">Camper</button>
<button type="submit" name="camper" formaction="formindb_hoh_2.php">Medical</button>
1.3 Ejemplos Hmtl-Css Ejercicios: UNA WEB RESPONSIBE BASICA 8
<?xml version="1.0" encoding="UTF-8"?>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>ejemplos</title>
Iñaki Martín
<link rel="stylesheet" type="text/css" href="css/grid.css" />

<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div class="fila" id="cabecera">
<nav>
<img src="imagenes/logo.png" alt="imagen" id="imglogo">
<div class="contenedor_menu">
<div class="cajamenu1">
©
<img src="imagenes/contact.png" alt="imagen">

<p>CONTACT</p>
</div>
<img src="imagenes/blog.png" alt="imagen">
<p>BLOG</p>
</div>
<img src="imagenes/about.png" alt="imagen">
<p>ABOUT US</p>
</div>
<img src="imagenes/home.png" alt="imagen">
<p>HOME</p>
</div>
</div>
</nav>
</div>
<div class="fila" id="subcabecera">

<div class="col-1 col-m-0">
</div>
<div class="col-6 col-m-6" id="subcabecera_imagen">
<img src="imagenes/banner.jpg" alt="imagen">
</div>
<div class="col-5 col-m-6" id="caja_superior">

<p id="subcabecera_titulo">WELCOME</p>
<p id="texto_subcabecera">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed eiusmod temporaa incidunt ut labore et
id est</p>
<p id="readmore">
Read more
</p>
</div>
</div>
1.3 Ejemplos Hmtl-Css Ejercicios: UNA WEB RESPONSIBE BASICA 9
<div class="fila" id="cuerpo">
<div class="col-4 col-m-6" id="menu">

<div class="caja_centro" id="caja_centro1">
<img src="imagenes/grid.png" alt="imagen">
<p id="titulo_centro_1">Nam di justo</p>
<p class="texto_articulo">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod
Iñaki Martín
tempor incidunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod
tempor incidunt ut labore etLorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod
tempor incidunt ut labore et
id est</p>
<img src="imagenes/more.png" alt="imagen" class="imagen_articulo_inferior">
</div>
</div>
<div class="col-4 col-m-6" id="contenido">

©
<img src="imagenes/world.png" alt="imagen">

<p id="titulo_centro_2">Donec pretium</p>
<p class="texto_articulo">Consectetur adipiscing elit, sed eiusmod tempor
incidunt ut labore et Lorem ipsum dolor sit amet, Consectetur adipiscing elit, sed eiusmod tempor
incidunt ut labore et Lorem,Consectetur adipiscing elit, sed eiusmod tempor
incidunt ut labore et Lorem

id est</p>
</div>
</div>
<div class="col-4 col-m-12">

<img src="imagenes/child.png" alt="imagen">
<p id="titulo_centro_3">Fusce Tristique</p>
<p class="texto_articulo">Sed eiusmod
tempor incidunt ut labore et Lorem ipsum dolor sit amet, Consectetur adipiscing elit, sed eiusmod
tempor
incidunt ut labore et Lorem,Consectetur adipiscing elit, sed eiusmod tempor
incidunt ut labore et Lorem Consectetur adipiscing elit, sed eiusmod tempor
id est</p>
</div>
</div>
</div>
<div id="pie">
<span> HOME </span>
<span> ABOUT US </span>
<span> BLOG </span>
<span> CONTACT </span>
</div>
</body>
</html>

GUÍA RÁPIDA HTML5 (I)
10

GUÍA RÁPIDA HTML5 (II)
11
2.1 CSS - Inicio 1
GUIONES DE CLASE
Iñaki Martín
CAPÍTULO 2.1 - CSS

©
CONCEPTOS INICIALES
Temario de curso Lenguajes de Marcas
Temario de curso Lenguajes de Marcas © Iñaki Martín
2.1 CSS - Inicio

RESUMEN: ELEMENTOS CSS
2
Temario de curso Lenguajes de Marcas © Iñaki Martín
2.1 CSS - Inicio

RESUMEN: ELEMENTOS HTML
3
2.1 CSS - Inicio RESUMEN: SELECTORES BÁSICOS 4
selector ejemplo descripción
.class .intro Selecciona los elementos que tengan class="intro"

.class1 .class2 .name1 .name2 Selecciona los elementos que tengan class=name2 que sean hijos de un class=name2
#id #firstname Selecciona los elementos que tengan id="intro"
Iñaki Martín
* * Selecciona todos los elementos

element p Selecciona todos los elementos del tipo indicado ( tipo p en el ejemplo)
element.class p.intro Selecciona todos los elementos del tipo y clase indicados ( todos los <p> con
class="intro")
element,element div, p Selection todos los elementos de ambos tipos (todo los <div> y los <p> en el ejemplo)
©
element element div p Selection todos los elementos de un tipo dentro de otro tipo (todo los <p> dentro de un
<div> )
element>element div > p Selection todos los elementos de un tipo hijos directos de otro tipo (todo los <p> hijos
directos de un <div> , aquí no aplica a <p> nietos de un <div>)

element+element div + p Selection todos los elementos de un tipo situados inmediatamente detrás (no dentro,
detrás) de otro tipo div + p (todo los <p> justo detrás de un <div>)
element1~element2 p ~ ul Selection todos los elementos de un tipo situados detrás (aun que no sea
inmediatamente) de otro tipo div ~ p (todo los <p> en algún sitio detrás de un <div>)
[attribute] [target] Selecciona todos los elementos con cierto atributo (atributo target en el ejemplo)
[attribute=value] [target=_blank] Selecciona todos los elementos atributo "_blank"
[attribute~=value] [title~=ropa] Selecciona todos los elementos con un atributo que contenga cierta palabra (valor de
atributo target que tenga la palabra ropa)
[attribute|=value] [lang|=es] Selecciona todos los elementos con un atributo que cuyo valor empiece por cierta
palabra (valor del atributo lang que empieza por es en el ejemplo)
[attribute^=value] a[href^="https"] Selecciona todos los elementos con un atributo que empiece cierto texto (valor de
atributo href que tenga el texto https)
[attribute$=value] a[href$=".pdf"] Selecciona todos los elementos con un atributo que cuyo valor termine por cierto texto
(valor del atributo href que termine por .pdf en el ejemplo)
[attribute*=value] a[href*="europa"] Selecciona todos los elementos con un atributo que contenga cierto texto (valor del
atributo href que contenga el texto europa)
2.1 CSS - Inicio RESUMEN: SELECTORES DE PSEUDO-CLASES 5

:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
Iñaki Martín
:empty p:empty Selects every <p> element that has no children

:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
©
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links
2.1 CSS - Inicio RESUMEN: SELECTORES DE PSEUDO-ELEMENTOS 6

::first-line p::first-line aplica un estilo a la primera línea del elemento especificado
::first-letter p::first-letter aplica un estilo a la primera letra del elemento especificado
Iñaki Martín
::placeholder .nombre::placeholder aplica un estilo al atributo placeholder del elemento indicado

::after .cosa::after inserta algún contenido después del contenido del elemento indicado
::before #cosa::before inserta algún contenido antes del contenido del elemento indicado
::selection #algo::selection aplica un estilo al contenido seleccionado del elemento indicado
©
2.1 CSS - Inicio ESTRUCTURA BÁSICA 7
ESTRUCTURA BASICA
• Los estilos se crean para aplicarse a algun elemento HTML (a un <P>, a un <DIV>, a todos los <TABLE>, etc…)
• Al crearse un estilo, se le da un nombre, que se llama SELECTOR. Su contenido se escribe entre llaves ({ }) y todo el se
llama DECLARACION.
Iñaki Martín
• En la declaración se incluyen una lista de parejas “propiedad:valor” llamadas REGLA

• Cada regla se compone de:
©
• SELECTOR: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo
concreto. Por ejemplo, un elemento como <p>. El selector hace la selección de a qué elementos
vamos a aplicar las reglas
• PROPIEDAD: La propiedad es una de las características que se puede aplicar a un elemento (color, borde, …)
• VALOR: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro
comportamiento. El valor puede ser un valor especifico o un IDENTIFICADOR (una palabra que
tiene ya un valor predefinido)
• Si se aplican varias reglas a un mismo selector, han de ir separadas por ;

• Ejemplo:
div { /* div es el SELECTOR e indica conde aplicar los estilos */
color:red; /* color es un atributo, y red un identificador */
color:#223322; /* y aqui #223322 es un valor */
text-align:center;
}
2.1 CSS - Inicio CODIFICACIÓN Y COMENTARIOS 8
CODIFICACION
• Para asegurar el uso de caracteres no estandar ascii, se puede definir qué codificacion de caracteres usar añadiendo al
principio del fichero css la instruccion:
Iñaki Martín
@CHARSET "UTF-8";
©
COMENTARIOS
• Para añadir un comentario se incluye entre los caracteres /* y */

/* Esta linea es un comentario */
/* Estas dos lineas
tambien son comentarios */
2.1 CSS - Inicio UNIR CSS Y HTML 9
COMO AÑADIR ESTILOS CSS A UN HTML FICHERO

EJEMPLO.HTML
• CREAR UN FICHERO EXTERNO .CSS Y AÑADIRLO AL FICHERO HMTL FICHERO
<head> MYSTYLE.CSS
<link rel="stylesheet" type="text/css" href="mystyle.css">
Iñaki Martín
</head>
<body> .selector1 {
<div class="selector1"> esto sale en rojo</div> color: red;
</body> }
• ESCRIBIR EL CONTENIDO DEL CSS DENTRO DEL PROPIO HTML

©
El contenido del css se escribe dentro del HEAD entre etiquetas STYLE
EL ANTIGUO
<head>
FICHERO MYSTYLE.CSS
<style> SE ESCRIBE DENTRO DEL
.selector1 { HTML
color: red;
}
</style>
SELECTOR DE ID
</head>
<body>
<div class="selector1"> esto sale en rojo</div>
</body>
• CSS EN LINEA, SE ESCRIBE UN ESTILO PARA UN ELEMENTO HTML ,DENTRO DE LA ETIQUETA HTML
El estilo se aplica dentro de un atributo STYLE en la etiqueta deseada
<head>
</head>
<body>
<div style="color: red;"> esto sale en rojo</div>
</body>
2.1 CSS - Inicio PRIORIDAD CSS 10
PRIORIDAD en CSS
• En lo que respecta a donde se han declarado los elementos, la prioridad es:
1. Primero se aplican los estilos de los ficheros externos.
Iñaki Martín
2. Segundo se aplican los estilo de la cabecera de la página, machacando los anteriores si hay conflicto
3. Tercero se aplica el estilo que se pueda haber aplicado a un elemento concreto
• En lo que respecta a que hoja de estilo usar, hay que tener en cuenta que, además de la hoja de estilos que
©
aplica el diseñador de la página, existen otras dos hojas de estilo iniciales:

✦ la hoja de estilos del navegador, o dispositivo en el que se muestra la página. Los navegadores aplican por
defecto unos estilos básicos al cargar la página (tipo de letra, alineación, etc.). No son los mismos en todos
los navegadores, y a veces son la causa de que una página no se vea igual en todos los navegadores.
✦ En segundo lugar está el estilo del usuario. Cada usuario puede crear una hoja de estilos para aplicarla a
todas las páginas que visite con su navegador. Esta opción suele ser útil para personas discapacitadas.
Éstas paginas se aplican automáticamente al cargarse la página, y quedan por defecto en caso de que el
diseñador no haya aplicado ningún estilo.
La prioridad en estos casos es:
1. Primero se aplica la hoja del navegador,
2. Segundo la hoja del usuario, machacando los estilos aplicados antes si hay conflicto
3. Tercero, la hoja del diseñador.
2.1 CSS - Inicio SELECTORES BASICOS (I) 11
TIPOS DE SELECTORES BASICOS

• X : Selector de TIPOS
Selecciona: todos los elementos de tipo X. (Afecta a TODOS los elementos html iguales al seleccionado)
p { /* asi se ven afectadas todas las etiquetas <p> */
Iñaki Martín
color: red;
}
• #X : Selector de ID
Selecciona: Todo elemento con id=“X” (Afecta al elemento HTML con un atributo ID igual al selector.)
©
#miid1 { /* asi se ve afectado aquel elemento con id ="miid1" */

color: red;
}
Recordar que según la especificación HTML de W3C, el atributo id asigna un valor único a un elemento de la página, esto
es, no debería haber dos elementos con el mismo id en la pagina, y en este caso, este selector solo devolvería un valor
• .X : Selector de atributo CLASS

Selecciona: Todos los elementos con class=“X” A(Afecta al elemento HTML con un atributo CLASS igual al selector )
.class121 { /* asi se ve afectado aquel elemento con class = "class121" */
color: red;
}
Un elemento puede tener asignado varias clases. Para asignar varias clases a un elemento, hay que escribir en el
atributo class del html los nombres de todas las clases que se quieren aplicar, separados por espacios.
• X , Z : Selector VARIOS ELEMENTOS

• Selecciona: Todos los elementos de tipo X , y ademas, todos los elemento de tipo Z
ul , p { /* cambia el fondo de todas las etiqueta <ul> y tambien de todas las etiquetas <p> */
background-color: black;
}
2.1 CSS - Inicio SELECTORES BASICOS (II)
• X Y : Selector DESCENDIENTE
Selecciona: Todos los elementos de tipo Y dentro de un elemento de tipo X (Afecta, de un tipo de elemento (p, div,etc)), solo
a aquellos otros elementos que se indiquen)
li a { /* asi se aplica todos los elementos <a> que estén dentro de un li */
Iñaki Martín
color: red;
}
Por supuesto, todos los selectores se pueden componer de elementos simples…. o compuestos
#area1 a { /* todos los elementos <a> que esten dentro de un DIV=“area1” */
©
color: red;
}
• X.Y : Selector DESCENDIENTE DE UN CLASS

Selecciona: Todos los elementos de tipo X que tengan CLASS=“Y”
p.izda { /* asi se aplica a elementos <p> con atributo class="izda" */
color: red;
}
div.frutas { /* asi se aplica a elementos <div> con atributo ="frutas" */
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
• X#Y : Selector DESCENDIENTE DE UN ID

Selecciona: Todos los elementos de tipo X que tengan ID=“Y”
p#area1 { /* asi se aplica a elementos <p> con atributo id="area1" */
color: red;
}
2.1 CSS - Inicio UNIDADES DE MEDIDA 13
UNIDADES DE MEDIDA PARA ATRIBUTOS DE VALORES MENSURABLES
• Cuando el valor de un atributo es un valor que pueda medirse, tamaño normalmente, pueden usarse diferentes medidas.
• Evidentemente, siempre es preferible usar medidas relativas a absolutas. El mas usado es px
Iñaki Martín
UNIDADES ABSOLUTAS
• in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
• cm, centímetros.
• mm, milímetros.
• pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
• pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
©
UNIDADES RELATIVAS
• em, (no confundir con la etiqueta <em> de HTML), es un valor relativo respecto
del tamaño de letra del contenedor.

• ex, relativa respecto de la altura de la letra x ("equis minúscula") al tamaño de
letra del contenedor
• px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en
el que se visualiza la página HTML.
• %, un porcentaje, a veces referido al tamaño de la letra base, otras al tamaño de
letra del contenedor
width: 200px; /* 200 pixeles */

width: 50%; /* 50% del ancho total del contenedor */
height: 50ex; /* 50% del alto de la letra x del contenedor */
height: 50em; /* 50% del alto estandar de la letra del contenedor */
height: 30cm; /* 30 centimetros de alto */

height: 100pt; /* 100 puntos de alto (35 milimetros) */
width: auto; /* ancho calculado por al navegador */

2.1 CSS - Inicio BOX MODEL 14
EL BOX MODEL
• Todos los elementos que se “pintan” en HTML se consideran que son como cajas
• En CSS, se llama BOX MODEL para definir las capas que tiene cada caja (en consecusncia, las capas de cada elemento)
Iñaki Martín
• Estas capas son: margins, borders, padding, y el contenido en si mismo
<!DOCTYPE html>
<html>
<head>
<style>
div {
©
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 23px;
}
</style>
</head>
<body>
<div>EJEMPLO DE CONTENIDO (EN ESTE CASO UN TEXTO) CON SUS DIVERSAS “CAPAS”</div>
</body>
</html>
Margen top (abajo se llama bottom)
Border top (abajo se llama bottom)
Padding top (abajo se llama bottom)
Contenido
Padding left (al otro lado se llama right)

Border left (al otro lado se llama right)
Margen left (respecto al elemento contenedor) (al otro lado se llama right)
2.1 CSS - Inicio ATRIBUTOS: TEXTO 15
ATRIBUTOS DE TEXTO (parte I)
p {
color: green; /* Color de texto, formato valor */
Iñaki Martín
color: #ff0000; /* Color de texto, formato hexadecimal */

color: rgb(255,0,0); /* Color de texto, formato RGB */
text-align: center; /* Alinea horizontalmente el texto center|left|right */

text-align: justify; /* Alinea horizontalmente el texto justificandolo */
©
text-decoration: none; /* Elimina cualquier decoracion aplicada antes */

text-decoration: underline; /* texto subrayado */
text-decoration: overline; /* texto subrayado con la linea por encima */
text-decoration: line-through; /* texto tachado */

text-decoration: blink; /* texto parpadeante */
text-transform: uppercase; /* convierte el texto en mayusculas*/

text-transform: lowercase; /* convierte el texto en minusculas*/
text-transform: capitalize; /* convierte el texto con cada palabra en mayusculas*/
text-indent: 50px; /* indenta el texto el tamaño indicado */
letter-spacing: 3px; /* aumenta el espaciado entre letras */

letter-spacing: -3px; /* decrece el espaciado entre letras */
line-height: normal; /* Interlineado como el normal */

line-height: 4px; /* Interlineado de 4 pixeles */
line-height: 125%; /* Interlineado como porcentaje (tamaño normal de una letra) */
line-height: 0.8; /* Interlineado como factor del tamaño normal de una letra */
}
2.1 CSS - Inicio ATRIBUTOS: TEXTO 16
ATRIBUTOS DE TEXTO (parte II)
p {
direction: ltr; /* Escribe el texto "Left To Right" */
Iñaki Martín
direction: rtl; /* Escribe el texto "Right To Left" */
word-spacing: normal; /* Espaciado entre palabras como el normal */

word-spacing: 4px; /* Aumenta el espaciado entre palabras */
word-spacing: -2px; /* Disminuye el espaciado entre palabras */
©
text-shadow: 3px 2px red; /* Da sombra al texto, indicando sombra horizontal,

sombra vertical, y color
vertical-align: text-top; /* Texto se coloca a la misma altura que la parte

superior de elemento anterior (imagen, etc) */
vertical-align: top; /* Texto se coloca a la misma altura que la parte
superior de elemento anterior (imagen, etc) */
vertical-align: text-bottom; /* Texto se coloca a la misma altura que la parte
inferior de elemento anterior(imagen, etc) */
vertical-align: bottom; /* Texto se coloca a la misma altura que la parte
inferior de elemento anterior (imagen, etc) */
vertical-align: middle; /* Texto se coloca a la misma altura que el centro
de otro elemento (imagen, etc) */
vertical-align: initial; /* igual que middle */
vertical-align: sub; /* Texto se coloca como un subindice */
vertical-align: super; /* Texto se coloca como un superindice */
vertical-align: suo; /* Texto se coloca alineado verticalmente con el
elemento padre (valor por defecto)) */
}
2.1 CSS - Inicio ATRIBUTOS: TAMAÑO, MARGIN Y PADDING 17
ATRIBUTOS DE TAMAÑO
• height y width se usan para dar tamaño a un elemento.
NOTA : Recordar que al definir alto y ancho de un elemento, realmente es el ancho y alto del CONTINENTE del elemento.
Iñaki Martín
Para calcular el tamaño completo de un elemento hay que añadir el PADDING, BORDER Y MARGINS
p {
height: 200px; /* Ancho del contenido */
width: 50%; /* Alto del contenido */
width: auto; /* Ancho calculado por al navegador */
max-width: 500px; /* Ancho máximo de un elemento, prevalece sobre width */
©
max-heigth: 20%;
min-width: 500px; /* Ancho mínimo de un elemento, prevalece sobre width */
min-heigth: 20%;
ATRIBUTOS DE MARGIN Y PADDING

p{
margin-top: 100px;
margin-bottom: 0px; /* esto es sin guardar margen alguno */
margin-left: 0px; /* existe tambien margin-right, claro */
margin-top: auto; /* calculado por el navegador */
margin-top: 10%; /* % sobre el ancho del contenedor */
margin-top: inherit; /* el mismo que el contenedor */
margin: 100px 150px 100px 80px; /* todos a la vez, como shorthand, T,R,B,L*/
margin: auto; /* centra horizontalmente EN SU CONTENEDOR */
padding-top: 50px;
padding-right: 30px;
padding-left: 0; /* esto es sin guardar separacion alguna */
padding: 100px 150px 100px 80px; /* todos a la vez, como shorthand, T,R,B,L*/
}
2.1 CSS - Inicio ATRIBUTOS: COLOR Y FONDO 18
ATRIBUTOS DE COLOR Y FONDO
p {
color: green; /* Color de texto, formato valor */
Iñaki Martín
color: #ff0000; /* Color de texto, formato hexadecimal */

color: rgb(255,0,0); /* Color de texto, formato RGB */
background-color: green; /* Color de fondo, formato valor */

background-color: #ff0000; /* Color de fondo, formato hexadecimal */
background-color: rgb(255,0,0); /* Color de fondo, formato RGB */
©
background-image: url("paper.gif"); /* Imagen de fondo del elemento */

background-repeat: repeat-x; /* repite la imagen horizontalmente */

background-repeat: repeat-y; /*repite la imagen verticalmente */
background-repeat: no-repeat;
background-position: right top;
Se pueden aplicar varios valores a la vez a una misma propiedad, lo que se llama SHORTHAND
background: #ff0000 url("paper.gif") no-repeat right top;
}
2.1 CSS - Inicio ATRIBUTOS: BORDER 19
ATRIBUTOS DE BORDE
• Muchas de las propiedades peden tener cuatro valores diferentes para top border, right border, bottom border y left border
p {
border-style: dotted; /* borde de puntos */
Iñaki Martín
border-style: dashed; /* borde de rayas pequeñas */

border-style: solid; /* borde de linea */
border-style: double; /* borde de linea doble */
border-style: groove; /* borde de ranura (depende del border-color) */
border-style: ridge; /* borde puntiagudo (depende del border-color) */
border-style: inset; /* borde de sombra hacia dentro (depende del border-color) */
©
border-style: outset; /* borde de sombra hacia dentro (depende del border-color) */

border-style: none; /* sin borde */
border-style: hidden; /* borde oculto */
border-bottom-style: solid; /* borde solido, solo el de abajo. Idem right, left, top*/
border-width: 5px ; /* ancho del borde (no existe alto de borde) */

border-width: medium; /* ancho con identificadores: (thin | medium | thick) */
border-width: 2px 10px 4px 20px; /* todos a la vez, como shorthand, T,R,B,L*/
border-left-width: 5px ; /* ancho de borde izquierdo, idem right, bottom, top */
border-color: red;
border-color: red green blue yellow; /* todos a la vez, como shorthand, T,R,B,L*/
border-left: 6px solid red; /* varios valore de atributos a la vez */

border-radius: 5px; /* bordes redondeados con arco de 5px */
OUTLINE no es lo mismo que BORDER. OUTLINE es la linea que esta fuera de BORDER
outline-style: dotted;
outline-color: red;
outline-width: thick;
outline-offset: 15px; /* Distancia entre border y outline*/
}
2.1 CSS - Inicio ATRIBUTOS: POSITION 20
ATRIBUTOS DE FUENTE DE LETRA

๏ font define la fuente usada (tamaño, familia, aspecto, etc)
p {
Iñaki Martín
font-family: "Times New Roman", Times, serif; /* Si no se puede usar la primera se

usa la segunda, o siguientes */
font-style: normal; /* fuente no italica */

font-style: italic; /* fuente italica */
font-weight: normal; /* fuente no negrita */

©
font-weight: bold; /* fuente negrita */
font-size: 40px; /* fuente con tamaño especifico */

Se permite cambiar todas las propiedades de font de golpe. Se ha de seguir este estricto orden:
font: font-style font-variant font-weight font-size/line-height font-family;
}
๏ El selector @font-face permite especificar fuentes online, que no necesariamente esten instalads en el ordenador que
ejecuta el navegador
@font-face {
font-family: <un-nombre-que-damos-a-la-fuente-remota>;
src:<origen-de-donde-cargar-la-fuente-remota> ;
font-weight:<peso>;
font-style: <estilo>;
}
ATRIBUTOS DE POSICIÓN
๏ Con position referencia a como, y donde, se colocan globalmente los elementos
p{
Iñaki Martín
position: static; /* No se coloca de manera alguna, sigue el flujo de la pagina

Es el valor por defecto
Asi NO tienen efecto las propiedades top, bottom, left y right */
position: relative; /* Se ubican segun su propia posicion. Aqui "left:20px" añade

20 pixels a la actual left-position del elemento */
©
position: fixed; /* El elemento se posiciona de modo relativo al navegador, es casi

igual que relative, pero no se mueven aunque se haga scroll */
position: absolute; /* Se ubican segun la posicion (el top, right, bottom, y left) que
tenga su elemento contenedor */
position: initial; /* Pone la propieda a su valor por defecto (static)
position: inherit; /* Hereda esta propiedad de su “elemento-padre”
z-index: -1; /* Si los elementos se acaban apilando (unos encima de otros),

indica el orden de capa. A mayor valor, mas “encima” se ubica
Solo funciona con position = (absolute |relative| fixed) */
}
ATRIBUTOS DE OVERFLOW
• Hacen referencia a como se muestra un contenido dentro de su contenedor

p{
Iñaki Martín
overflow: visible; /* No se encierra en su contenedor.

Se sale si es mas grande
Opción por defecto */
overflow: scroll; /* El contenido se encierra en el contenedor,

no se sale i se muestran ambas scroll bars */
©
overflow: hidden; /* El contenido se encierra en el contenedor,

no se sale y no muestra ningún scroll bar
(el texto que sobra desaparece) */
overflow: auto; /* El contenido se encierra en el contenedor,

no se sale y se muestra la scroll bar vertical
solo si hace falta */Ω
}
2.1 CSS - Inicio ATRIBUTOS: LINK 23
ATRIBUTOS DE LINK
• Como los enlaces pueden tener diferentes “estados”, se pueden usar diversos estilos para cada estado:
a:link { /* link aun sin visitar (no se ha pinchado en el) */
Iñaki Martín
color: red;
}
a:visited { /* link ya visitado */

color: green;
}
©
a:hover { /* Raton pasando por encima del link */

color: hotpink;
a:active { /* Raton pinchando en el link (esta “selected”) */

color: blue;
}
2.1 CSS - Inicio ATRIBUTOS: TABLAS 24
ATRIBUTOS DE TABLAS
table, th, td { /* Asi se aplica todo a la tabla y a sus celdas */

border: 1px solid black;
Iñaki Martín
border-collapse: collapse; /* Borde simple, por defecto es doble

(collapse | separate) */
padding: 15px; /* espacio interior del contenido de cada celda */
border-spacing: 5px; /* espaciado entre celdas */
text-align: center; /* centra el contenido de la celda */
}
©
Podemos aplicar un estilo especifico a filas o columnas de una tabla, pero entonces la tabla necesita tener un ID
table#iddelatabla { /* El id de la tabla debe ser iddelatabla */

width: 100%;
background-color: #f1f1c1;
}
/* Un estilo especial para las tr (filas) pares (tabla debe tener id t01) */
table#t01 tr:nth-child(even) {
background-color: #eee;
}
/* Un estilo especial para las tr (filas) impares (tabla debe tener id t01) */
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
/* Un estilo especial para las th (cabeceras) (tabla debe tener id t01) */

table#t01 th {
color: white;
}
2.1 CSS - Inicio SELECTORES AVANZADOS 25
SELECTORES AVANZADOS
• : Selector de TODO ELEMENTO
Selecciona: Todos los elementos (Afecta a TODOS los elementos html) A veces se usa (no correctamente) para poner a
cero el margin y padding. .
Iñaki Martín
* { /* asi se ven afectado todo, todo sera de color rojo */

color: red;
}
El * puede ser usado también como selectores de hijos.
#caja1 * { /* Se aplica a todos los hijos de quien tenga div=“caja1” */
©
border: 1px solid black;

}
• X + Z : Selector ADYACENTE
Selecciona: Todos los elementos de tipo Z que esten inmediatamente seguidos de un elemento de tipo X
ul + p { /* cambia el fondo de la primera etiqueta <p> que se encuentre tras un ul, solo de la
primera que encuentre, no de las demas */
}
• X > Z : Selector DESCENDIENTE DE HIJOS DIRECTOS

Selecciona: Todos los elementos de tipo Z cuyo padre sea un elemento de tipo X, pero han de ser hijos de X, no nietos ni otra
descendencia
ul > p { /* cambia el fondo de toda etiqueta <p> que se encuentre dentro de un <ul>, pero solo
si <p> esta colocada directamente debajo de <ul> */
}
• X [ Z ] : Selector DE ATRIBUTOS por EXISTENCIA

Selecciona: Todos los elementos de tipo X que tengan expresamente definido (que exista) el atributo Z
p [title] { /* cambia el fondo de toda etiqueta <p> que tenga un atributo title */
Iñaki Martín
}
©
• X [ Z = “V” ] : Selector DE ATRIBUTOS CON VALOR

Selecciona: Todos los elementos de tipo X que tengan expresamente definido el atributo Z, y este tenga el valor V
a[href="http://www.jyoc.com"] { /* cambia el fondo de todo enlace <a> cuyo href sea
"http://www.jyoc.com" */
color: #1f6b23;
}
• X [ Z * =“V” ] : Selector DE ATRIBUTOS CON VALOR POR EXPRESION REGULAR (varios casos diferentes)
Selecciona caso X [ Z * =“V” ] : Todos los elementos de tipo X que tengan expresamente definido el atributo Z, y este
contenga en alguna parte de su valor la cadena V
a[href *=“jyoc”] { /* cambia el fondo de todo enlace <a> cuyo href contenga el texto “joyc” */
/* usar a[href ^=“jyoc”] para buscar lo que “empiece por” */
color: #1f6b23; /* usar a[href $=“.com”] para buscar lo que “acabe por” */
}
• X [data-miatributo=Z] : Selector ATRIBUTO PERSONALIZADO

Selecciona: Todos los elementos de tipo X que tengan el atributo data-miatributo con valor Z. El atributo data-miatributo no
es un atributo estandar html, sino uno que creamos a nuestra conveniencia para agrupar varios elementos que no son
faciles de agrupar por otros conceptos
Iñaki Martín
p[data-parrafoespecial=“tipo1”] { /* cambia el fondo de toda etiqueta <p> que se tenga el

atributo data-parrafoespecial con valor “tipo1” */
} <p data-parrafoespecial="tipo1"> un parrafo </p>
<p data-parrafoespecial="tipo1"> otro parrafo </p>
©
• X[ Z~=“algo”] : Selector ATRIBUTOS CON VALOR EN LISTA

Selecciona: Todos los elementos de tipo X que tengan ,en el atributo Z, un valor igual a “algo”, pero “algo” ha de ser un valor
dentro de una lista de valores.

p[data-mia=“cinco”] { /* cambia el fondo de toda etiqueta <p> que se tenga el atributo data-mia
con valor “cinco” dentro de una lista de valores. */
background-color: red;
} <p data-mia=“uno cinco siete"> un parrafo </p> un parrafo
<p data-mia=“uno veinticinco"> otro parrafo </p>
otro parrafo
2.1 CSS - Inicio Selectores con PSEUDO-CLASES 28
SELECTORES con PSEUDO-CLASES
Una pseudoclase se usa para definir un estado especial de un elemento. Por ejemplo, actuar
cuando un usuario pasa el mouse sobre un elemento o actuar sobre un enlace visitado o
Iñaki Martín
cuando un elemento toma el foco. Su formato es:

elemento:pseudoclase { estilos }
p:hover { /* aplica un estilo cuando se pasa el cursor encima del elemento */

color: red;
}
©
p:checked { /* aplica un estilo a los elementos input que este checked */

color: red;
.cosa:first-child { /* aplica un estilo al primer hijo del elemento especificado */

color: red;
}
a:link { /* aplica un estilo a un enlace aun no visitado */

color: red;
}
a:visited { /* aplica un estilo a un enlace ya visitado */

color: red;
}
a:empty { /* aplica un estilo a un elemento que no tiene contenido */

margin: 40px;
} (ver en las páginas iniciales de resúmenes la lista completa de las Pseudo Clases)
2.1 CSS - Inicio Selectores con PSEUDO-ELEMENTOS 29
SELECTORES con PSEUDO-ELEMENTOS
Un pseudoelemento CSS se utiliza para diseñar partes específicas de un elemento,

normalmente internas al propio elemento. Su formato es:
Iñaki Martín
elemento::pseudoelemento { estilos }
p::first-line { /* aplica un estilo a la primera línea del elemento especificado */

color: red;
}
©
p::first-letter { /* aplica un estilo a la primera letra del elemento especificado */

color: red;
}
.cosa::placeholder { /* aplica un estilo al atributo placeholder del elemento indicado */

color: red;
}
.cosa::after { /* inserta algún contenido después del contenido del elemento indicado */
content: url(cajon.png);
}
p::before { /* inserta algún contenido antes del contenido del elemento indicado */
content: url(cajon.png);
}
p::selection { /* aplica un estilo al contenido seleccionado del elemento indicado */

color: red;
}
2.1 CSS - Inicio HERENCIA CSS 30
HERENCIA EN CSS
• Las etiquetas HTML pueden “anidarse”, unas dentro de otras, dejando unas etiquetas padres de
otras hijas (o abuelos y nietas … y así…):
Iñaki Martín
• Herencia CSS es la característica de que muchas de las propiedades de estilo de los elementos
padre son heredadas por los elementos hijo, pero no al revés.
• La tipografía base se establece en el elemento <body>.
• No todas las características son heredables: por ejemplo border, para evitar que se fuera
©
duplicando los bordes en cada hijo, o el tamaño de una tipografía si se fija como porcentaje,
para evitar que cada hijo fuera reduciéndose o aumentando el tamaño.
Si no se aplica estilo alguno, este ejemplo se muestra asi:

<p>
león
<strong>jirafa <em>elefante</em></strong> león jirafa elefante perro
<em>perro</em>
</p>
• Todo tendrá la misma fuente, jirafa se mostrará en negrita, elefante se mostrará en itálica pero
también en negrita porque em está dentro de strong.
• Decimos entonces que em desciende de strong que es su etiqueta padre (parent) y a su vez,
todas descienden de p que sería el abuelo.
• Si se aplica un estilo como este a las etiquetas p, saldrá todo de color rojo:
<p>
león p {color: red;}
<strong>jirafa <em>elefante</em></strong>
Iñaki Martín
<em>perro</em> león jirafa elefante perro

</p>
• Si se añade una nueva regla al estilo, quedará asi:

p {color: red;}
©
strong {color: green;}

león jirafa elefante perro
• Y si finalmente añadimos otra regla …

p {color: red;}
strong {color: green;}
strong em {color: black;}
león jirafa elefante perro
vemos que cambia elefante, pero perro no cambia, pues la regla dice que sólo será negro el
contenido de una etiqueta em que esté dentro de strong. Todos los selectores que estén
anidados dentro de otros heredarán los valores de propiedades asignados al selector exterior,
salvo que se modifiquen de otra manera.
• Recordar que el selector “strong em” es un selector descendente, que implica a todos los em
dentro de un strong
• Otro ejemplo, analizar este código:

<style>
<p class="azul" id="rojo">un texto</p> #rojo {color: red;}
.azul {color: blue;}
</style>
Iñaki Martín
un texto
• A la etiqueta se le asignan dos atributos, id y class, en uno para que el párrafo sea azul y en el
otro que sea rojo ¿De que color se verá el texto?…. Rojo
©
¿Importa el orden en que está escrito? No, sea como sea que lo escribamos, siempre será rojo
porque un atributo id es más importante que un atributo class. Los selectores tienen un orden
de prioridades, que se calcula con un complejo cálculo aritmético, pero que casi siempre este
(de la mayor a la menor prioridad):
1. lo que está definido en la etiqueta en el atributo style
2. lo que está definido con un atributo id
3. lo que está definido con un atributo class
4. lo que está definido con un selector genérico (una etiqueta)
<style>
<p>esto se verá rojo porque TODOS los parrafos son rojos</p> p {color: red;}
<p class="verde">pero esto se verá verde</p> p.verde {color: green;}
<p style="color: blue;”>este texto se verá de color azul</ </style>
p>
esto se verá rojo porque TODOS los párrafos son rojos

pero esto se verá verde
este texto se verá de color amarillo
• Otro ejemplo ocurre con definiciones más complejas como las listas; por ejemplo, si queremos
resaltar un ítem:
<ul id="milista">
<li class="resaltado">primer item de una lista</li>
Iñaki Martín
<li>segundo item de una lista</li>

<li>tercer item de una lista</li> ul#milista li {color: blue;}
<li>cuarto item de una lista</li>
.resaltado {color: red;}
</ul>
• la definición antedicha no funciona, porque lo que dice ul#demo li es más poderoso que lo que
©
dice la clase .resaltado (un id prevalece sobre un class). Para solucionarlo podríamos hacer
esto:
ul#demo li {color: blue;}

ul#demo li.resaltado {color: red;}
MODIFICADOR !IMPORTANT
• La herencia y la jerarquía tiene una excepción. El uso del modificador !important en una
determinada regla hace que ésta se salte la cadena de prioridades y que se aplique de forma
prioritaria. Se emplea al final de una propiedad CSS, así:
<p class="claseColorVerde claseColorRojo”>
… contenido ... <style>
</p> .claseColorVerde {color: green !important;}
.claseColorRojo {color: red;}
</style>
Sin añadir !important, la segunda definición de color sobrescribe a la primera.

2.2.- CSS AVANZADO 1
GUIONES DE CLASE
© Iñaki Martín
CAPÍTULO 2.2 -
CSS AVANZADO
Guión de curso – HTML-CSS-JS
2.2.- CSS AVANZADO

Elementos CSS: Resumen
2
2.2.- CSS AVANZADO Dibujando gráficos básicos 3
Gráficos Básicos
• CREAR UN CUADRADO • CREAR UN MARCO • CREAR UN CUADRADO CON MARCO

© Iñaki Martín
.cuadrado { .marco { .cuadrado-marco {

width: 100px; width: 100px; width: 100px;
height: 100px; height: 100px; height: 100px;
background: #428bca; border: 3px solid #555; border: 3px solid #555;
} } background: #428bca;
}
• CREAR UN RECTANGULO • CREAR UN ROMBO

.rectangulo { .rombo {
width: 140px; width: 100px;
height: 70px; height: 100px;
background: #428bca; border: 3px solid #555;
} background: #428bca;
-webkit-transform: rotate(45deg) skew(15deg, 15deg);
-moz-transform: rotate(45deg) skew(15deg, 15deg);
-ms-transform: rotate(45deg) skew(15deg, 15deg);
-o-transform: rotate(45deg) skew(15deg, 15deg);
transform: rotate(45deg) skew(15deg, 15deg);
}
Estas figuras y más en https://css-tricks.com/the-shapes-of-css/

• CREAR UN PARALELOGRAMO • CREAR UN TRAPECIO • CREAR UN TRAPECIO INVERTIDO

© Iñaki Martín
.paralelogramo { .trapecio { .trapecio-invertido {

border: 3px solid #555; border-right: 60px solid transparent; border-right: 60px solid transparent;
background: #428bca; border-left: 60px solid transparent; border-left: 60px solid transparent;
-webkit-transform: skew(20deg); border-bottom: 100px solid #428bca; border-top: 100px solid #428bca;
-moz-transform: skew(20deg); } }
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
• CREAR UN TRIANGULO • CREAR UN TRIANGULO • CREAR UN TRIANGULO
.triangulo-derecha { .triangulo-abajo { .triangulo-arriba {

width: 0; width: 0; width: 0;
height: 0; height: 0; height: 0;
border-left: 100px solid #f0ad4e; border-left: 100px solid #f0ad4e; border-right: 100px solid transparent;
border-top: 50px solid transparent; border-top: 50px solid transparent; border-top: 100px solid transparent;
border-bottom: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid transparent;
} } border-bottom: 100px solid #f0ad4e;
}
• CREAR UN CIRCULO • CREAR UN OVALO • CREAR UN HUEVO

© Iñaki Martín
.circulo { .ovalo { .huevo {

-moz-border-radius: 50%; -moz-border-radius: 50%; background-color: #5cb85c;
-webkit-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border-radius: 50%; border-radius: 50%; -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: #5cb85c; background: #5cb85c; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
} } }
• CREAR UN PAC-MAN • CREAR UN SECTOR • CREAR UNA LUNA
.pac-man { .sector { .luna {

width: 0; width: 0px; width: 100px;
height: 0; height: 0px; height: 100px;
border-right: 50px solid transparent; border-right: 70px solid transparent; -moz-border-radius: 50%;
border-top: 50px solid #5cb85c; border-left: 70px solid transparent; -webkit-border-radius: 50%;
border-left: 50px solid #5cb85c; border-top: 100px solid #5cb85c; border-radius: 50%;
border-bottom: 50px solid #5cb85c; -moz-border-radius: 50%; -moz-box-shadow: 30px 10px 0 #d9534f;
-moz-border-radius: 100%; -webkit-border-radius: 50%; -webkit-box-shadow: 30px 10px 0 #d9534f;
-webkit-border-radius: 100%; border-radius: 50%; box-shadow: 30px 10px 0 #d9534f;
border-radius: 100%; } }
}
2.2.- CSS AVANZADO

Elementos HTML: Resumen
6
3.1 JavaScript - Inicio
GUIONES DE CLASE
© Iñaki Martín
CAPÍTULO 3.1 - JAVASCRIPT

( GUIA RAPIDA)
1
3.1 JavaScript - Inicio Introduccion
INTRODUCCION
• Javascript es un lenguaje de programación orientado a definir el comportamiento de los elementos de una pagina web
• El codigo Javascript normalmente se escribe en la propia pagina HTML, encerrado entre estas etiquetas
© Iñaki Martín
<script type=“text/javascript">
……
</script>
aunque desde HTML5 se puede escribir directamente

<script>
……
</script>
• Las intrucciones Javascript acaban en ;

• Los comentarios en linea en javascript se escriben predecidos de //

// un comentario Javascript empieza con //
• Los comentarios multilieas se escriben encerradas las lineas entre /* y */

/*
Comentario de
varias lineas
*/
2
3.1 JavaScript - Inicio Tipos de datos
Tipos de datos
function tiposdedatos(){
// tipos de datos principales
© Iñaki Martín
// tipos primitivos:
var num = 16; // Numero
var cad = "hola"; // Cadenas (String)
var bo = false ; // boolean
var y; // undefined (no tiene tipo definido)
var w = null; // null (para objetos sin referencia)
// tipos complejos
var ob = {dni:"23224232", letra:"e"}; // Objecto
var fu = function unafuncion(){} // Function
// typeof nos dice que tipo de dato contiene una variable

typeof num // resultado: "number"
typeof cad // resultado: "string"

typeof bo // resultado: "boolean"
typeof y // resultado: "undefined"
typeof w // resultado: "object" (los null son object)
typeof ob // resultado: "object"
typeof fu // resultado: "function"
bo = undefined; // la variable no tiene ahora ni valor ni tipo
3
3.1 JavaScript - Inicio Operadores
Operadores matemáticos, lógicos y de comparación
<script>
function operadores() {
© Iñaki Martín
var a = 2; // operador de asignación

aunquevar
desde HTML5 se puede escribir directamente
b = 3, d=3; // varias asignaciones en una línea
var c = 2+3; // operador suma, o tambien -,*,/,%
c += 6; // operador de asignación y suma, o tambien -=, *=, ect
t = "hola"+5 // operador suma con cadenas, concatena: hola5
h = "pi"+3+14 // convierte todo a cadena tras un string, y concatena: pi314
h = 3+14+”pi" // convierte todo a cadena tras un string, y concatena: 17pi
• Las intrucciones Javascript acaban en ;
// COMPARACIONES
// Si se compara un numero y un string, JavaScript convierte el string en NUMERO.
// Una cadena vacia se convirte en 0
• Los comentarios en linea en javascript se escriben predecidos de //
// Una cadena no numerica se convierte en NaN (que al comparar da siempre false)
// un comentario Javascript empieza con //
a=3;
re = (a==3)
• Los comentarios multilieas se// comparacion de valor, resultado TRUE
escriben encerradas las lineas entre /* y */
re = (a=="3") // comparacion de valor, resultado TRUE
re /*
= (a===3) // comparacion de valor y tipo, resultado TRUE
re = (a==="3") //decomparacion de valor y tipo, resultado FALSE
Comentario
varias lineas
*/
re = (a!=2) // comparacion de valor, resultado TRUE
re = (a!==3) // comparacion de valor y tipo, resultado FALSE
re = (a==="3") // comparacion de valor y tipo, resultado TRUE
re = (a > 23) // comparacion por mayor, o tambien <, <=, >=,
re = (a=="3" && a<2) // operador logico AND, resultado: FALSE

re = (a=="3" || a<5) // operador logico OR, resultado: TRUE
re = ! (a=="3") // operador logico NOT, resultado: FALSE
}
</script> 4
3.1 JavaScript - Inicio Funciones (I)
FUNCIONES
• Las instrucciones Javascript se agrupan en funciones, bloques de código con un nombre, que se usa para llamar a la
función, generalmente cuando ocurra un evento.
© Iñaki Martín
• Para declarar una funcion, se escribe el nombre, seguido de paréntesis con o sin parámetros, y el resto del código entre
llaves.
• Pueden tener o no parametros. Si los tienen, solo definir el identificador (variable) que recibe el valor
• Puede devolver o no un valor, si lo devuelve, es con la instruccion RETURN seguido del valor a devolver
<script>
function unaFuncion( par1 , par2 ) {
var res = sumar(par1, par2)
document.getElementById("demo").innerHTML = “Nuevo valor:"+res;
}
function sumar(1,b){
return a+b;
}
</script>
<body>
<p id=“demo">ESte texto cambia al pulsar el boton </p>
<button type="button" onclick=“unaFuncion(3,5)" >Pulsame y cambiaré</button>
</body>
5
3.1 JavaScript - Inicio Funciones (II)
• En Javascript se puede acceder tanto a la ejecucion de una funcion, como a la definición de la funcion
• Si quiero acceder a la fucion (a ejecutar la función) la invoco con parentesis (y sus parametros si los hubiera)
• Si quiero obtener la definición de la funcion, la invoco SIN parentesis
© Iñaki Martín
<script>
function otraFuncion() {
document.getElementById("demo1").innerHTML = sumar(2,6);
document.getElementById("demo2").innerHTML = sumar;
}
function sumar(a,b){
return a+b;
}
</script>
<body>
Resultado del primer párrafo:
<p id=“demo1">Este texto cambia al pulsar el boton </p>

Resultado del segundo párrafo:
<p id=“demo2">Este tambien cambia pero por la defiicion de la funcion </p>
<button type="button" onclick=“otraFuncion()" >Pulsame y cambiaré</button>
</body>
Resultado del primer párrafo:

8
Resultado del segundo párrafo:
function sumar(a,b){ return a+b; }
6
3.1 JavaScript - Inicio Variables en JS
Ambito de variables
<script>
// Esta es una variable GLOBAL pues esta fuera de una funcion:
var varglobal1 = 123;
© Iñaki Martín
function leer() {
// Esta es una variable LOCAL pues esta declarada dentro de una funcion:
var varlocal1 = 942;
// Sin embargo esta es GLOBAL, pues no se llegó a declarar y se crea

// simplemente dandole valor:
varglobalnueva = 342;
// Aunque se si indica esta linea, se pasa a "modo estricto", y con el,

// no se pueden usar variables sin declarar
"use strict”;
// El ambido de una variable global es la ventana actual completa.

// Se puede crer una variable local que “sobrescriba” la global (shadowing)
var varglobal1 = 752;
// El ambido de una variable global es la ventana actual completa
// Como el ámbito de una variable global es la ventana actual completa, se
// puede seguir invocando a una variable “shadowed” con window.nomvar
var nueva = window.varglobal1;
// HOISTING a un comportamiento JS que mueve todas las declaraciones de

variables al inicio de su bloque (script o function)
Por lo tanto, se permite DECLARAR una variable DESPUES de su uso.
variablefinal = 8;
var variablefinal; // Ahora variablefinal ya no es global, es local
// HOISTING funciona con DECLARACIONES, no con ASIGNACIONES:
}
7
3.1 JavaScript - Inicio Incluir JS en HTML
COMO INCLUIR JAVASCRIPT EN UN HTML
1.- Escribir el código Javascript en un fichero externo, y añadir la referencia al fichero en el HTML:
© Iñaki Martín
<script src=“miScript1.js”></script>
2.- Escribir el código Javascript dentro del HTML, en un script interno (normalmente dentro del HEAD)
<script type="text/javascript">
// Aqui pueden ir las funciones y codigo js a usar en esta pagina
</script>
Se pueden escribir tantos scripts como se desee
3.- Escribir el código Javascript en un script, pero en cualquier parte del HTML
Se puede colocar en mitad de un HTML y se ejecuta directamente al procesarse

<p id="parrafo1"> texto que va a cambiar</p><br>
<script>
document.getElementById("parrafo1").innerHTML = "nuevo texto al pasar por aqui";
</script>
4.- Escribir el código Javascript dentro de un elemento especifico del HTML ( en un evento p.e.)
<button type="button"
id="boton1"
onclick="document.getElementById('boton1').innerHTML = Date()">
Haz click en mi y veras la hora
8
3.1 JavaScript - Inicio Acciones primarias JS
Identificar un elemento HTML (getElementByID , getElementByName)
Podemos identificar un elemento HTML por su atributo ID
document.getElementById("demo");
© Iñaki Martín
y tambien por su atributo NAME

document.getElementByName("demo");
Extraer el contenido de un elemento HTML (innerHTML )

contenido = document.getElementById("texto1").innerHTML ;
Cambiar el contenido de un elemento HTML (innerHTML )

<p id="texto1">Texto va a cambiar.</p>
<button type="button"
onclick='document.getElementById("texto1").innerHTML = "Nuevo texto !!”'>
Cambiar texto
</button>
Cambiar un atributo de un elemento HTML

document.getElementById("cabecera").id = "qwerty";
document.getElementById('myImage').src='imagen1.gif
Cambiar el estilo de un elemento HTML

document.getElementById("cabecera").style.fontSize = "25px";
Ocultar o mostrar elementos

document.getElementById("cabecera").style.display = "none"; // ocultar
document.getElementById("cabecera").style.display = "block"; // mostrar
9
3.1 JavaScript - Inicio Escribiendo en JS
Escribir en algun elemento html
Podemos escribir usando INNERHTML
document.getElementById("texto1").innerHTML = "Nuevo texto !!;
© Iñaki Martín
o usando DOCUMENT.WRITE, que escribe un texo en la parte del html donde se ejecute
<script>
document.write(5 + 6);
// CUIDADO: Si se ejecuta un document.write() cuando TODA la pagina html ya se ha
// cargado, se BORRA TODA ELLA antes de escribir el contenido del document.write()
</script>
Crear una ventana ALERT

// Podemos escribir en una ventana de alerta con window.alert() (o solo alert()

window.alert(“valor de a”+a);
alert(“valor de a”+a);
10
3.1 JavaScript - Inicio Strings (I)
Strings
function stringsatope() {
var a = "hola";
© Iñaki Martín
var b = 'hola';
var c = "Me llamo 'Pepe'";
var d = "Me llamo \”Pepe\"";
var f = "Buenos dias para todos";
var x = a.length; // LENGHT da el tamaño de una cadena

// (x vale 4)
x = f.indexOf("e"); // INDEXOF da la posicion de la primera ocurrencia
// del parametro en la cadena (x vale 2, indice empieza por 0)
x = f.indexOf("e", 6); // idem INDEXOF solo que empexzando a buscar desde la posicion
// del segundo parámetro (x vale -1. no encontro ocurrencia)
x = f.lastIndexOf(“a"); // LASTINDEXOF da la posicion de la ultima ocurrencia
// del parametro en la cadena (x vale 10)
x = f.search("[oa]"); // Idem INDEXOF solo que admite tambien buscar por una
// expresion regular (x es 4, busca una "o" o una "a")
x = f.substring(1,4); // SUBSTRING devuelve la subcadena desde la posicion del 1er param
// (inclusive) hasta el segungo param (exclusive) (x vale "uen")
x = f.substring(10); // Si solo hay un paramtro SUBSTRING devuelve desde ahi al final
// (x vale "s para todos")
x = f.slice(-10); // SLICE es igual que SUBSTRING, solo que acepta que el primer
// parametro sea negativo, y para la posicion inicial se cuenta
// el comienzo desde el fin de la cadena (x vale "para todos")
x = f.substr(4,5); // SUBSTR es igual que SUBSTRING con dos parametros, siendo el
// segundo el tamaño de la subcadena (x vale "os di")
}
11
3.1 JavaScript - Inicio Strings (II)
function stringsatope() {
var a = "hola";
var f = "Buenos dias para todos";
x = f.replace("a","xx"); // REPLACE sustituye la primera aparicion del 1er parámetro
// por el 2do parámetro (x es "Buenos dixxs para todos")
© Iñaki Martín
x = f.replace(/a/g,”xx"); // para sustituir todas las apariciones y no solo la ultima,

// usar una expresion regular acabada en g (global)
// (x es "Buenos dixxs pxxrxx todos")
x = f.replace(/A/gi,”x"); // REPLACE es "case sensitive", si se quiere buscar tanto
// mayusculas como minusculas usar i en la expresion regular
// (x es "Buenos dixs pxrx todos")
x = a.toUpperCase(); // TOUPPERCASE (sin parametros) convierte la cadena objeto
// a mayusculas (x es "HOLA")
x = a.toLowerCase(); // TOLOWERCASE (sin parametros) convierte la cadena objeto
// a minusculas (x es "hola")
x = a.concat(b); // CONCAT concatena la cadena base con su parametro, es igual
// usar el operador + (x vale "HolaHola")
x = a.charAt(1); // CHARTAT devuelve un caracter, el de la posicion indicaa
// como parametro (x vale "o")

x = a.charCodeAt(3); // CHARCODEAT devuelve el codigo Unicode (ascii) del caracter
// de la posicion indica como parametro (x vale 97)
x = a.concat(b); // CONCAT contedena la cadena base con su parametro, es igual
// usar el operador + (x vale "HolaHola")
x = f.split(" "); // SPLIT devuelve un array, el resultante de trocear la cadena
// base usando el parametro como separador
// (x es un array de 4 elementos, "Buenos" "dias" "para" “todos")
x = f.includes("nos"); // INCLUDES devuelve true si la cadena parametro esta en la
// cadena base (x es true)
x = f.startsWith("Po"); // STARTSWITH devuelve true si la cadena base comienza por la
// cadena parametro (x es false)
// (x es un array de 4 elementos, "Buenos" "dias" "para" "todos")
x = " jaja ".trim(); // TRIM elimina los espacios por delante y detra de la
// cadena base (x es "jaja")
} 12
3.1 JavaScript - Inicio Numeros
function numerosATope() {
var a = 15;
var b = 3.89;
var c = "42";
© Iñaki Martín
var x = a.toString(); // TOSTRING convierte un numero en una cadena

// (x vale "15")
x = Number(c); // NUMBER convierte una cadena en un numero
// (x vale 42)
x = Number(true); // (x vale 1)
x = Number(false); // (x vale 0)
x = Number(new Date()); // (x vale 1404568046472)
x = Number("10 20"); // (x vale NaN)
x = parseInt(c); // PARSEINT convierte una cadena en un numero entero
// (x vale 42) (usar parseFloat, parseDouble)
x = Math.abs(123.77); // ABS devuelve el valor absoluto del parametro
// (x vale 123)
x = Math.round(123.77); // ROUND devuelve el parametro redondeado

// (x vale 123)
x = Math.floor(77.84); // FLOOR devuelve el valor entero mas cercaro (hacia
// abajo) del parametro (x vale 77)
x = Math.ceil(123.27); // devuelve el valor entero mas cercaro (hacia
// arriba) del parametro (x vale 124)
x = Math.pow(3, 4); // POW eleva el primer parametro a la potencia del
// segundo (x vale 81)
x = Math.random(); // RANDOM devuelve un numero aleatorio entre 0 y 1

// Asi se devuelve un numero aleatorio entre min y max:
x = Math.floor(Math.random() * (max - min)) + min;
13
3.1 JavaScript - Inicio Fechas
function fechasATope() {
x = new Date() ; // x tiene la fecha actual

© Iñaki Martín
// Para construir una fecha específica, hay varias opciones (meses van de 0 a 11):
x = new Date(year, month, day, hours, minutes, seconds, milliseconds);
x = new Date(year, month, day);
x = new Date("2017-07-25");
x = new Date(milliseconds); // Milisegundos desde 1-1-70
alert(x); // Muestra: Thu Jul 27 2017 20:37:07 GMT+0200 (CEST)

alert(x.toUTCString(); // Muestra: Thu, 27 Jul 2017 18:37:34 GMT
z = x.getDate(); // da el numero de dia del mes de x ( de 1-31)

z = x.getDay(); // da el numero de dia de la semana de x ( de 0-6)
z = x.getFullYear(); // da el numero de año en 4 digitos de x
z = x.getHours(); // da el numero de hora de x ( de 0-23)
z = x.getMonth(); // da el numero del mes de x ( de 0-11)

z = x.getMinutes(); // da el numero de minutos de x ( de 0-59)
z = x.getSeconds(); // da el numero de segundos de x ( de 0-59)
z = x.getMilliseconds(); // da el numero milisegundos de x ( de 1-31)
z = x.getSeconds(); // da el numero de dia del mes de x ( de 0-999)
z = x.getTime(); // Da el total de milisegundos desde 1-1-70
x.setDate(22); // Cambia el numero del dia del mes de x

// existen los correspondientes setXXX a casi todos los getXXX indicados
x = getUTCDate(); // Igual que getDate(), pero devuelve la fecha UTC

// existen los correspondientes getUTCXXX a casi todos los getXXX indicados
14
3.1 JavaScript - Inicio Arrays
function arraysATope() {
// Nota: en todos los ejemplos se supone que el array aCoches no se esta cambiando
// —————————————— CREAR ARRAY

© Iñaki Martín
var aCoches = ["Opel", "Volvo", "BMW"]; // crear un array

var aCoches = new Array("Opel", "Volvo", "BMW"); // crear el mismo array
// no es recomendable aunque un array es un object.
// —————————————— LEER, CAMBIAR, MOSTRAR ELEMENTOS DEL ARRAY

var h = aCoches[1]; // leemos el valor de un elemento del array
aCoches[2] = "Fiat"; // cambiamos el valor de un elemento del array
delete aCoches[1]; // deja el elemento indicado como undefined (no desaparece)
document.write( aCoches[2] ); // mostrar un elemento del array
document.wriet( aCoches ); // mostrar array entero
aCoches.push("Lada"); // Añade un elemento al array
aCoches[8] = "Seat"; // Añade un elemento en la posicion 8 del array

// Los elementos entre medias del ultimo que habia y
// el 8 quedan como undefined
15
3.1 JavaScript - Inicio Arrays (Métodos I)
// Este array se supone inalterable para todos los ejemplos siguientes
var aCoches = ["Opel", "Volvo", "BMW"];
Metodo Descripción
© Iñaki Martín
LENGTH Devuelve el numero de elementos del array

var t = aCoches.length // (t vale 3)
TOSTRING Devuelve el array como string
var t = aCoches.toString() // (t vale "Opel,Volvo,BMW")
JOIN Es igual que TOSTRING pero indicando un separador de los elementos
var t = aCoches.join("-") // (t vale "Opel-Volvo-BMW")
POP Devuelve y elimina el ultimo elemento de un array
var t = aCoches.pop()
PUSH Añade (al final) un elemento al array y devuelve el nuevo tamaño del array
aCoches.puch("Rover")
SHIFT Elimina el primer elemento del array (moviendo el resto). Devuevlve el valor
eliminado
var t = aCoches.shift() // (t vale "Opel" y el array queda ["Volvo", "BMW"]
UNSHIFT Añade un nuevo primer elemento al array (moviendo el resto hacia adelante)
Devuelve el valor nuevo tamaño del array
var t = aCoches.unshift("Seat") // (t es 4 y el array queda ["Seat", "Opel",
Volvo", "BMW"]
SPLICE Añade elementos al array.
El 1er parametro es la posicion de insercion de los nuevos elementos.
El 2do parametro es cuantos elementos, desde la insercion, se borran.
El 3er parametro (y siguientes) son los elementos a insertar (son todos
opcionales)
aCoches.splice(2, 0, "Audi", "Skoda");
Se puede usar SPLICE para eliminar completamente elementos de un array;
aCoches.splice(1,2);
CONCAT Une varios arrays
aCoches.concat(["Bentley", “Rolls"]);
// (aCoches queda [ "Opel", Volvo", “BMW","Bentley", “Rolls"]
16
3.1 JavaScript - Inicio Arrays (Métodos II)
// Este array se supone inalterable para todos los ejemplos siguientes
var nombres = [“Juan”, “Ana”, “Pedro”];
var datos = [101,7, 2, 70];
Metodo Descripción
© Iñaki Martín
SORT Ordena ALFABETICAMENTE los elementos de un array

var t = nombres.sort() // (t vale [“Ana”,”Juan”,”Pedro”])
var t = datos.sort() // (t vale [101,2,7,70])
Si se desea ordenar NUMERICAMENTE, se ha de usar un metodo comparador en la

llamada a sort (será un metodo anonimo, ya se vera mas adelante que es eso):
var t = datos.sort(function(a, b){return a - b}); // (t vale [2,7,70,101])
Explicacion: sort ordena los elementos del array por pares, esperando un valor negativo, cero
o positivo. Si es positivo, intercambia los valores. Con la función anonima, cambiamos el
comportamiento estandar de comparacion de SORT, que ahora compara los pares del array como si
fueran los parametros a y b, y hacemos que nuestra funcion devuelva un valor positivo o
negativo según nuestro criterio.
Este mismo criterio se puede usar para ordenar objetos, aplicando operaciones con sus
propiedades de modo que nos de un valor positivo o negativo según nuestro deseo.
REVERSE Ordena ALFABETICAMENTE en orden INVERSO los elementos de un array

var t = nombres.sort() // (t vale [“Pedro”,”Juan”,”Ana”])
Si se desea ordenar NUMERICAMENTE y en orden INVERSO, usar el SORT antes

indicado, con el método anonimo ya explicado, negando el return anterior:
var t = datos.sort(function(a, b){return -(a - b)}); // (t vale [101,70,7,2])
SLICE Crea un nuevo array con una seccion del array objeto actual
El 1er parametro es el elemento inicial a extraer
El 2do parametro es el elemento final (excluido) a extraer. Es opcional, si no
se indica, se coge hasta fin de array
var t = aCoches.slice(1,2); // t vale los elementos 2so y 3ro de aCoches
17
3.1 JavaScript - Inicio Instrucciones de Control (IF - SWITCH)
function instrucionesDeControl() {
// IF - ELSE IF - ELSE
// Advertir que:
© Iñaki Martín
// - else if, y else, son opcionales

if (edad < 18) {
estadoEdad = "Menor de edad";
} else if (edad = 18) {
estadoEdad = "Reciente mayor de edad";
} else {
estadoEdad = "Mayor de edad";
}
// SWITCH
// Advertir que:
// - Default no ha de ser la ultima instruccion
// - Los case no pueden repsetirse, pero pueden tener cualquier orden
// - Los case pueden o no tener break, segun nuestras necesidades

switch (new Date().getDay()) {
case 4:
case 5:
resp = “Finde cerquita";
break;
case 0:
case 6:
resp = “Es finde !!";
break;
default:
resp = “Dura semana nos espera";
}
18
3.1 JavaScript - Inicio Instrucciones de Repetición (WHILE - FOR)
function instrucionesDeRepeticion() {
// WHILE
var i=0;
© Iñaki Martín
while (i < 10) {

if (i%2==0) { continue; }
texto = texto + " " + i;
i++;
if (i==7) { break; }
}
// DO WHILE (tambien tiene break y continue)

var i=0;
do {
i++;
} while (i < 10);
// FOR (tambien tiene break y continue)

for (var i=0; i < 10; i++) {
}
// FOR IN (tanto en objetos como en colecciones-arrays)

var aCoches = ["Opel", "Volvo", “BMW”];
var texto = "";
var x;
for (x in aCoches) {
texto = texto + " " + aCoches[x];
}
}
19
3.1 JavaScript - Inicio Conversiones entre tipos
function conversionesATope() {
// De otros tipos a STRING

© Iñaki Martín
var u = String(123) ; // u es la cadena "123"

var x = 24;
var t = x.toString(); // t es la cadena "24"
var x = 9.656;
var t = x.toFixed(2); // t es "9.66" (coge 2 decimales)
var t = x.toPrecision(2); // t es "9.7" (coge un total de dos digitos)
var u = String(false) ; // u es la cadena "false"
var u = String(Date()) ; // u vale "Thu Jul 77 2017 19:22:10"

// en el capitula Fechas hay mas mecanismos de conversion
// De otros tipos a NUMERO

var u = "451";
var d = Number(u); // d es el numero 451
var d = parseInt(u); // d es el numero 451
var d = + u ; // d es el numero 451
var d = Number(false) // d es el numero 0
g = new Date();
var d = Number(g) // d es 1404553245671
var d = g.getTime() // d es 1404553245671
20
3.1 JavaScript - Inicio Errores (TRY - CATCH)
function erroresATope() {
try {
© Iñaki Martín
var i = 10 / a[77]; // Si no existe el elemento 77 del array, dara un error

alert(i);
} catch (err) {
alert("ERROR: "+err.message);
} finally{
alert("Este mensaje sale SIEMPRE ");
}
// La propiedad name del objero err creado tiene estos posibles valores.
// EvalError Se produjo un error al ejecutar la funcion eval()
// RangeError Un número ha salido fuera de su rango valido ("out of range")
// ReferenceError Se ha pedido una referencia erronea de una objeto
// SyntaxError Error sintactico
// TypeError Error con el tipo del dato tratado

// URIError Error al procesar un URI (URL)
// La instruccion THROW permite "generar" un error propio

// La excepcion creada por usuario puede ser un String, numero, boolean o un objeto
throw (300);
throw ("excepcion personalizada 12");
21
3.1 JavaScript - Inicio Eventos HTML y JS
Eventos
• Un evento es algo que o bien el usuario, o bien el navegador, “hacen”
• Cuando ocurre un evento, se puede definique que se ejecute un determinado codigo javascript
© Iñaki Martín
• Ejemplos de eventos:
- Una pagina ha terminado de cargarse
- El texto de un elemento html ha cambiado
- El usuario ha pinchado en un boton…
• El modelo normal de aplicar un codigo a un evento de un elemento HTML es :
<elemento evento="codigojavascript">
<button id ="pru"
onclick="document.getElementById('pru').innerHTML = Date()”>
Son las…
</button>
// igual que antes, pero usando this, ya que se hace referencia al propio elemento
<button onclick="this.innerHTML = Date()”>Son las…</button>
• Algunos eventos de los mas usados pueden ser:

- onchange Un elemento HTML ha cambiado
- onclick Se ha pinchado en un elemento
- onmouseover El ratón esta pasando por encima de un elemento
- onmouseout El ratón deja de estar por encima de un elemento (sale de él)
- onkeydown Se ha presionado una tecla
- onload El navegador ha terminado de cargar la página actual
(en los Apendices de este capitulo hay una lista detallada de eventos)
22
3.1 JavaScript - Inicio Validacion de formulario HTML con JS (I)
<!DOCTYPE html>
<html>
<head>
© Iñaki Martín
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>
// funcion calcular precio segun lo seleccionado
function calcular() {
var precio = 0;
var v = 0;
// ---- Extraer que elemento esta elegido en el DROP-DOWN LIST:
v = parseInt(document.getElementById('sabores').value);
precio = precio + v;
// ---- Ver que elemento se ha elegido en un RADIO OPTION:
if (document.getElementById('m1').checked) {
v = parseInt(document.getElementById('m1').value);
}
}
}
// ---- Ver si un elemento se ha elegido en un CHECK BOX:
if (document.getElementById('doblequeso').checked) {
precio = precio + parseInt(document.getElementById('doblequeso').value);
}
// ---- ponemos el precio en el paragraph necesario:
document.getElementById("par1").innerHTML = "Precio : " + precio;
}
</script>
</head>
23
3.1 JavaScript - Inicio Validacion de formulario HTML con JS (I)
<body>
BODY con HTML
<form id="form1" name="selecionIngredientes" method="GET" action="">

© Iñaki Martín
AQUI VA UN DROPDOWN LIST DE CUATRO OPCIONES<br>

<select id="sabores" onchange="calcular()">
<option value="1">Napolitana 1€</option>
<option value="2">4 Quesos 2€</option>
<option value="2">Hawaiana 2€</option>
<option value="5">Especial de la casa 5€</option>
</select><br><br>
AQUI VA UN RADIO OPTION DE TRES OPCIONES<br>

<input type="radio" name="masas" value="1" id="m1" onclick="calcular();"> Masa fina 1€<br>
<input type="radio" name="masas" value="2" id="m2" onclick="calcular();"> Masa doble 2€<br>
<input type="radio" name="masas" value="4" id="m3" onclick="calcular();"> Hojaldre 4€<br><br>
AQUI VA UN CHECKBOX DE UNA OPCION<br>

<input type="checkbox" id="doblequeso" value="1">Doble de queso 1€<br><br>
Este texto debe cambiar al pulsar en cada opcion y hacer su onclick()

<p id="par1">Precio : </p><br><br><br>
<input type="submit" value=“seguir”><br>
</form>
</body>
</html>
24
3.1 JavaScript - Inicio Redirecciones con JS (I)
<html>
<head>
</head>
<body>
EJEMPLO 1: REDIRECCION CON UN ENLACE HTML<br>
© Iñaki Martín
<a href='https://elpais.com/'>Redireccion 1: Pincha e iras a la portada de El Pais</a><br>
EJEMPLO 2: REDIRECCION DESDE UNA FUNCION JAVASCRIPT LLAMADA CON UN BOTON HTML<br>
<p>Pincha en el enlace e iras a la portada de El Pais</p>
<form>
<input type="button" value="Redireccion 2" onclick="Redireccion2();" />
</form>
function Redireccion2() {
window.location = "http://www.elpais.com/";
// CUIDADO QUE NO FUNCIONA poniendo window.location = "www.lavanguardia.com";
// Pues te envia a la pagina http://localhost:8383/ProyectoEjemplo/www.elpais.com
// Esto es, estas añadiendo una rama a tu propio dominio
}
</script>
EJEMPLO 3: REDIRECCION CON JAVASCRIPT CREANDO UN ENLACE ANONIMO (NO SE VE EN EL HTML)<br>

<p>Pincha en el enlace e iras a la portada de El Mundo</p>
<form>
</form>
var enlaceanonimo = document.createElement("a"); // crea elemento "a" (enlace html)

enlaceanonimo.target = "_blank"; // propiedad "donde abrir enlace"
enlaceanonimo.href = "http://www.elmundo.es/"; // propiedad "destino del enlace"
enlaceanonimo.click(); // click sobre el enlace
}
</script>
</body> </html>
25
3.1 JavaScript - Inicio Redirecciones con JS (II)
<html>
<head>
</head>
<body>
EJEMPLO 4: REDIRECCION RETARDADA<br>
© Iñaki Martín
<p>Pincha en el enlace e iras a la portada de La Vanguardia tras unos segundos</p>

<form>
</form>
document.write("Seras redireccionado en tres segundos...");
// setTimeout() ejecuta su 1er parametro tras los milisegundos de su 2do parametro
setTimeout('Redireccion4final()', 3000);
}
function Redireccion4final() {
window.location = "http://www.lavanguardia.com/";
}
</script>
EJEMPLO 5: REDIRECCION SEGUN NAVEGADOR EN USO<br>

<p>Pincha en el enlace e iras a la portada de algun periodico....</p>
<form>
</form>
var tipoDeNavegador = navigator.appName;
if (tipoDeNavegador == "Chrome"){
window.location = "https://elpais.com/";
} else if (tipoDeNavegador == "Microsoft Internet Explorer"){
window.location = "http://www.elmundo.es/";
} else {
window.location = "http://www.lavanguardia.com/"; }
}
</script>
</body></html> 26
3.1 JavaScript - Inicio Ejemplos: reloj digital
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
© Iñaki Martín
#reloj { width: 150px; height: 30px; padding: 5px 10px; border: 1px solid black;
font: bold 1.5em dotum, "lucida sans", arial; text-align: center;
float: right; margin: 1em 3em 1em 1em; }
</style>
<script>
function actual() {
fecha=new Date(); //Actualizar fecha.
hora=fecha.getHours(); //hora actual
minuto=fecha.getMinutes(); //minuto actual
segundo=fecha.getSeconds(); //segundo actual
if (hora<10) { //dos cifras para la hora
hora="0"+hora;
}
if (minuto<10) { //dos cifras para el minuto
minuto="0"+minuto;
}
if (segundo<10) { //dos cifras para el segundo
segundo="0"+segundo;
}
//devolver los datos:
mireloj = hora+" : "+minuto+" : "+segundo;
return mireloj;
}
function actualizar() { //función del temporizador

mihora=actual(); //recoger hora actual
mireloj=document.getElementById("reloj"); //buscar elemento reloj
mireloj.innerHTML=mihora; //incluir hora en elemento
}
setInterval(actualizar,1000); //iniciar temporizador

</script>
</head>
<body>
<div id="reloj">
00 : 00 : 00
</div>
</body>
</html>
27
3.1 JavaScript - Inicio APENDICE 1: EVENTOS HTML (I)
EVENTOS DE RATON
==========================================================================================
onclick The event occurs when the user clicks on an element
oncontextmenu The user right-clicks on an element to open a context menu
© Iñaki Martín
ondblclick The event occurs when the user double-clicks on an element

onmousedown The event occurs when the user presses a mouse button over an element
onmouseenter The event occurs when the pointer is moved onto an element
onmouseleave The event occurs when the pointer is moved out of an element
onmousemove The event occurs when the pointer is moving while it is over an element
onmouseover The pointer is moved onto an element, or onto one of its children
onmouseout A user moves the mouse pointer out of an element, or out of one of its children
onmouseup The event occurs when a user releases a mouse button over an element
EVENTOS DE TECLADO
==========================================================================================
onkeydown The event occurs when the user is pressing a key
onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key
EVENTOS DE VENTANA / OBJETOS

==========================================================================================
onabort The event occurs when the loading of a resource has been aborted
onbeforeunload The event occurs before the document is about to be unloaded
onerror The event occurs when an error occurs while loading an external file
onhashchange The event occurs when there has been changes to the anchor part of a URL
onload The event occurs when an object has loaded
onpageshow The event occurs when the user navigates to a webpage
onpagehide The event occurs when the user navigates away from a webpage
onresize The event occurs when the document view is resized
onscroll The event occurs when an element's scrollbar is being scrolled
onunload The event occurs once a page has unloaded (for <body>)
28
3.1 JavaScript - Inicio APENDICE 1: EVENTOS HTML (II)
EVENTOS DE FORMULARIO
==========================================================================================
onblur The event occurs when an element loses focus
onchange The event occurs when the content of a form element, the selection,
© Iñaki Martín
or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>)
onfocus The event occurs when an element gets focus
onfocusin The event occurs when an element is about to get focus
onfocusout The event occurs when an element is about to lose focus
oninput The event occurs when an element gets user input
oninvalid The event occurs when an element is invalid
onreset The event occurs when a form is reset
onsearch The user writes something in a search field (for <input="search">)
onselect The event occurs after the user selects some text (for <input> and <textarea>)
onsubmit The event occurs when a form is submitted
EVENTOS DE ARRASTRE CON RATON

==========================================================================================
ondrag The event occurs when an element is being dragged
ondragend The event occurs when the user has finished dragging an element
ondragenter The event occurs when the dragged element enters the drop target
ondragleave The event occurs when the dragged element leaves the drop target
ondragover The event occurs when the dragged element is over the drop target
ondragstart The event occurs when the user starts to drag an element
ondrop The event occurs when the dragged element is dropped on the drop target
EVENTOS DE PORTAPAPELES
==========================================================================================
oncopy The event occurs when the user copies the content of an element
oncut The event occurs when the user cuts the content of an element
onpaste The event occurs when the user pastes some content in an element
EVENTOS DE IMPRESION
==========================================================================================
onafterprint A page has started printing, or if the print dialogue box has been closed
onbeforeprint A page is about to be printed
29
3.1 JavaScript - Inicio APENDICE 1: EVENTOS HTML (III)
EVENDOS MULTIMEDIA
==========================================================================================
onabort The event occurs when the loading of a media is aborted
oncanplay The browser can start playing the media (when it has buffered enough to begin)
oncanplaythrough The browser can play through the media without stopping for buffering
© Iñaki Martín
ondurationchange The event occurs when the duration of the media is changed
onemptied The event occurs when something bad happens and the media file is
suddenly unavailable (like unexpectedly disconnects)
onended The media has reach the end (useful for messages like "thanks for listening")
onerror The event occurs when an error occurred during the loading of a media file
onloadeddata The event occurs when media data is loaded
onloadedmetadata The event occurs when meta data (like dimensions and duration) are loaded
onloadstart The event occurs when the browser starts looking for the specified media
onpause The media is paused either by the user or programmatically
onplay The event occurs when the media has been started or is no longer paused
onplaying The media is playing after having been paused or stopped for buffering
onprogress The browser is in the process of getting the media data (downloading the media)
onratechange The event occurs when the playing speed of the media is changed
onseeked The user is finished moving/skipping to a new position in the media
onseeking The user starts moving/skipping to a new position in the media

onstalled The browser is trying to get media data, but data is not available
onsuspend The event occurs when the browser is intentionally not getting media data
ontimeupdate The playing position has changed (like when the user fast forwards
to a different point in the media)
onvolumechange The volume of the media has changed (includes setting the volume to "mute")
onwaiting The media has paused but is expected to resume
(like when the media pauses to buffer more data)
EVENTOS DE ANIMACION
==========================================================================================
animationend The event occurs when a CSS animation has completed
animationiteration The event occurs when a CSS animation is repeated
animationstart The event occurs when a CSS animation has started
30
3.1 JavaScript - Inicio APENDICE 1: EVENTOS HTML (IV)
EVENTOS DE TRANSICIONES
==========================================================================================
transitionend The event occurs when a CSS transition has completed
EVENTOS DE SERVIDOR
© Iñaki Martín
==========================================================================================
onerror The event occurs when an error occurs with the event source
onmessage The event occurs when a message is received through the event source
onopen The event occurs when a connection with the event source is opened
EVENTOS MISCELANEO
==========================================================================================
onmessage The event occurs when a message is received through or fom an object
(WebSocket, Web Worker, Event Source or a child frame or a parent window)
ononline The event occurs when the browser starts to work online
onoffline The event occurs when the browser starts to work offline
onpopstate The event occurs when the window's history changes
onshow The event occurs when a <menu> element is shown as a context menu
onstorage The event occurs when a Web Storage area is updated
ontoggle The event occurs when the user opens or closes the <details> element
onwheel The event occurs when the mouse wheel rolls up or down over an element
EVENTOS DE TOQUE (PANTALLAS TACTILES)

==========================================================================================
ontouchcancel The event occurs when the touch is interrupted
ontouchend The event occurs when a finger is removed from a touch screen
ontouchmove The event occurs when a finger is dragged across the screen
ontouchstart The event occurs when a finger is placed on a touch screen
31
4.1 - XML 1
GUIONES DE CLASE
PROGRAMACIÓN HTML - CSS - JAVASCRIPT - XML
CAPÍTULO 4.1
©Iñaki Martín
XML INICIAL.
Temario de curso hTML-Css-Js-XML
4.1 - XML Introduccion XML 2
HISTORIA DE XML
๏ Desde siempre ha sido necesario intercambiar informacion entre diferentes ordenadores, o dentro del
mismo ordenador, entre diferentes sistemas o programas.
๏ Cuando un programa envia información a otro programa, ambos han de saber que formato tiene esa
información
©Iñaki Martín
๏ Esta información se puede “compartir” de dos modos básicos:

1. Un ordenador (o un programa) envia directamente la información a otro, sin que se cree entre medias
ningún fichero o soporte que contenga la información. Aqui los ordenadores (o programas) envian
mensajes entre si, lo que obliga a que los sistemas esten “conectados” directamente entre si. Aqui se
pueden comunicar por herramientas propias de programacion: sockets, webservices, etc.

2. Un ordenador (o un programa) guarda la informacion en un soporte físico (fichero de texto, base de
datos, etc) y el otro ordenador (o programa) lee esta información. Aqui el intermbio de informacion es
más global pues permite que un sistema “ofrezca” información que pueda leer cualquiera, no solo quien
este conectado a él, y evita precisamente que exista esa conexión.
๏ Aqui vemos a analizar solo el caso 2. Si la comunicacion es por ficheros de bases de datos, todos los
sistemas que se comuniquen han de disponer de un Sistema de Gestion de Base de Datos, y además, del
mismo sistema (todos Oracle, o MySql, o DB2…)
๏ Por otro lado, si se usan fichero planos, por ejemplo, ficheros de texto, ambos sistemas han de ponerse de
acuerdo (y conocer ambos) como se guarda la información: qué informacion hay, en que orden, como se
separan los campos de la informacion, que tipo de dato es en cada caso….
4.1 - XML Introduccion XML 3
๏ Con la proliferación de la comunicaciones por internet, se hizo mucho más grande el problema de que todos
los ordenadores o sistemas conocieran el formato de cada uno de los ficheros que compartían informacion.
๏ Ya antes de intenet, por los años 1970, IBM creo un lenguaje llamado GML (Generalized Markup Language),
que surgió por la necesidad de almacenar grandes cantidades de información y compartirla en otros SO y
plataformas.
๏ Este lenguaje gustó a la ISO, por lo que trabajaron para normalizarlo, creando SGML (Standard Generalized
©Iñaki Martín
Markup Language) en 1986. Ya no era un lenguaje solo para IBM, sino un intento de adaptarse a un gran
abanico de problemas y sistemas.
๏ En el año 1989 se creó la web, y junto con ella el lenguaje HTML. Este lenguaje se definió en el marco de
SGML. Los navegadores web sin embargo no crean validaciones de la informacion que reciben en el código
HTML, así las páginas web son caóticas y no estan obligadas a cumplir con una sintaxis, lo que hace a las
páginas más frágiles y a los navegadores más complejos.
๏ La principal limitación del HTML es que cada documento pertenece a un vocabulario fijo, establecido por
el DTD (document type definition, que es quien da una descripción de estructura y sintaxis de un documento)
o por un XSD (otro descriptor más avanzado, que describiremos tambien mas adelante). Es imposible para
un intérprete (por ejemplo un navegador) analizar el documento sin tener conocimiento de su gramática (del
DTD o XSD). Por ejemplo, el navegador sabe que antes de una etiqueta <div> debe haberse cerrado
cualquier <p> previamente abierto.
๏ Los navegadores resolvieron esto adaptandose para resolver cada uno sus problemas (scripts, javascripts,
Active X, HTML dinámico…) en vez de incluir un analizador genérico
๏ XML surge entonces como ese modelo genérico que permita un estandar único para la comunicación entre
sistemas, sin las limitaciones que existían.
4.1 - XML Que es XML 4
PROBLEMAS DE HTML
๏ HTML:
- HTML carece de un chequeo sintáctico. Páginas conerroressonmostradasenlosnavegadores.
- HTML carece de estructura.
©Iñaki Martín
- HTML no es orientado a objeto.

- HTML mezcla contenido y representación.
๏ Ejemplo de un código HTML y algunos de sus problemas:

‣ En apariencia, el documento HTML anterior es correcto, sin embargo:

- Existen etiquetas que nunca se cierran: <P>
- Algunas etiquetas no están bien anidadas: el primer
- <I> nunca se cierra.
- Para un ector no humano, no se sabe qué es un libro y qué es un autor.
4.1 - XML Que es XML 5
QUE ES XML
๏ XML, eXtensible Markup Language, es un heredero de SGML.

๏ Al igual que él, se utiliza para representar datos de forma estructurada.
๏ Se basa en una gramática de obligado cumplimiento. Esto facilita el desarrollo de parsers (programas que
©Iñaki Martín
analizan el contenido) y, por lo tanto, su utilización masiva.

๏ La estructura interna de un documento XML puede reflejarse en:
‣ DTD (DocumentTypeDefinition)
‣ XSD (XML Schema)

๏ A diferencia de HTML, separa radicalmente la semántica del documento, de su representación gráfica Por un
lado se define qué información contiene el documento, y por otra, cómo esta representada)
๏ XML no ha nacido únicamente para su aplicación en Internet, sino que se propone como un estándar para el
intercambio de información estructurada entre diferentes plataformas. Se puede usar para comunicarse entre
bases de datos, editores de texto, hojas de cálculo y casi cualquier cosa imaginable.
๏ Es fácil de aplicar por usar etiquetas semánticas entendibles por humanos y máquinas.
4.1 - XML Reglas generales 6
REGLAS GENERALES XML

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<!DOCTYPE MiDTD SYSTEM “C:\MiDTD.dtd”>
๏ Un único elemento raíz (elemento documento) 
<Libros>
(<Libros> en el ejemplo) <Libro>
<Titulo>Don Quijote de la Mancha</Titulo>
๏ Todo elemento debe tener etiquetas de apertura <Autor>Miguel de Cervantes</Autor>
</Libro>
©Iñaki Martín
<Libro>
y cierre. <Titulo>La vida es sueño</Titulo>
<Autor>Calderon de la Barca</Autor>
๏ Distinción entre mayúsculas/minúsculas. </Libro>
</Libros>
๏ Anidamiento perfecto entre elementos.

๏ Los valores de atributos van siempre entre comillas.
๏ Los espacios en blanco se conservan. Los caracteres CR/LF se transforman en LF.

๏ Comentarios: fomato <!— Aqui va el comentario —> (
<xs:element name=“Idioma" type=“empleado" />
<xs:complexType name=“empleado">
<xs:sequence>
</xs:sequence>
</xs:complexType>
Ahora que se ha creado un tipo complejo, se puede aplicar a muchos más elementos en el futuro, como si fuera un
tipo de dato normal, pues así ya queda predefinido en el sistema
<xs:element name="empleado" type="empleado"/>
<xs:element name="empleadoFijo" type="empleado"/>
<xs:element name="empleadoEntrante" type="empleado"/>
4.3 - XSD (SCHEMAS) Elementos complejos en XSD (III) 21
TIPOS DE ELEMENTOS COMPLEJOS

Elementos complejos CON ELEMENTOS
๏ Se debe usar alguna etiqueta de tipo "indicadores de elementos complejos" (ver más adelante), como por ejemplo
la etiqueta <xs:sequence> para indicar cuales son los “subelementos” de este elemento.
©Iñaki Martín
elemento complejo con elementos internos,

dentro del element XSD
<xs:complexType>
<xs:sequence>
<xs:element name="nombre" type="xs:string"/>

<xs:element name="apellidos" type="xs:string"/>
</xs:sequence> XML
</xs:complexType>
</xs:element>

<persona>
<apellidos>García López</apellidos>
</persona>
fuera del element XSD
<xs:element name="persona" type="TipoPersona"/>

XSD
<xs:complexType name="TipoPersona">
<xs:sequence>
<xs:element name="apellidos" type="xs:string"/>
</xs:sequence>
</xs:complexType>
4.3 - XSD (SCHEMAS) Elementos complejos en XSD (IV) 22
Elementos complejos CON ELEMENTOS Y TEXTO A LA VEZ
๏ Se debe usar alguna etiqueta de tipo "indicadores de elementos complejos" (ver más adelante), como por ejemplo
la etiqueta <xs:sequence>, y además, se usa el atributo mixed=“true” en la etiqueta complexType para indicar
que además puede tener texto

©Iñaki Martín
dentro del element XSD
<xs:element name="carta">
<xs:complexType mixed="true">
<xs:sequence>
<xs:element name="pedidoid" type="xs:int"/>
<xs:element name="fechaenv" type="xs:date"/>
</xs:sequence>
</xs:complexType>
</xs:element>

<carta>
Estimado Sr.
<nombre>Juan García</nombre>.
elemento complejo con elementos internos, Su pedido
fuera del element XSD <pedidoid>1032</pedidoid>
será enviado el
<xs:element name="carta" type=“TipoCarta"/> <fechaenv>2007-03-25</fechaenv>.
XSD </carta>
<xs:complexType name="TipoCarta" mixed="true">
<xs:sequence>
<xs:element name="pedidoid" type=“xs:int"/>
<xs:element name="fechaenv" type="xs:date"/>
</xs:sequence>
</xs:complexType>
4.3 - XSD (SCHEMAS) Elementos complejos en XSD (II) 23
Elementos complejos VACIOS
๏ Normalmente son con atributos, pues si no, se podría tratar mejor como un elemento simple:
elemento complejo vacio, con atributos,
dentro del element
XSD
<xs:element name="producto">
©Iñaki Martín
<xs:complexType>
</xs:complexType>
</xs:element>

<producto Id=“1345"/> XML
elemento complejo vacio, con atributos,

fuera del element

XSD
<xs:element name="producto" type=“TipoProd"/>
<xs:complexType name="TipoProd">
</xs:complexType>
4.3 - XSD (SCHEMAS) Elementos complejos en XSD (V) 24
ELEMENTOS ATRIBUTOS
๏ Un atributo se trata realmente de un elemento simple , pero ha de estar dentro de un elemento complejo, que será
el elemento que contiene el atributo. Esto es, un elemento simple no puede tener atributos; si un elemento simple
tiene atributos, ha de convertirse en complejo, y declarar dentro el atributo
๏ Un atributo sólo puede contener texto. No puede contener ni elementos ni atributos.
๏ La sintaxis de un atributo es: <xs:attribute name="xxx" type="yyy"/> (xxx es el nombre del atributo e yyy es el tipo de dato del atributo)
©Iñaki Martín
XSD Ejemplo de atributo

<xs:complexType name="titulo" type="xs:string">
<xs:attribute name="idioma" type="xs:string" use="required"/>
</xs:complexType>
XML
<titulo idioma="ES" >El Quijote</nombre>
๏ Como un atributo es un elemento <xs:attribute name="tipo" use="required">

<xs:simpleType>
simple, puede tener restricciones <xs:restriction base="xs:string">
<xs:enumeration value="matricial"/>
como cualquier elemento simple, <xs:enumeration value="laser"/>
<xs:enumeration value="tinta"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
๏ Como cualquier elemento

simple, puede tener valor por <xs:attribute name=color” type=“xs:string" default=“EN"/>
defecto o fijo, y además, por
defecto los atributos son <xs:attribute name=color” type=“xs:string" fixed=“EN”/>
opcionales, pero se puede hacer
que éstos sean requeridos. <xs:attribute name=color” type=“xs:string" use=“required”/>
4.3 - XSD (SCHEMAS) Indicadores de elementos complejos (I) 25
INDICADORES DE ELEMENTOS COMPLEJOS
๏ El contenido de un elemento complejo se identifica a través de varios elementos, indicadores de la naturaleza del
contenido
๏ Vamos a ver en este curso a continuación estos "indicadores"
©Iñaki Martín
➡ Indicadores de orden: <xs:sequence>

<xs:all>
<xs:choice>
➡ Indicadores de ocurrencia: maxOccurs

minOccurs
➡ Indicadores por grupo de elementos : <xs:group>
➡ Indicadores por grupo de atributos : <xs:attributeGroup>
➡ Indicadores de elementos no validados: <xs:any>

4.3 - XSD (SCHEMAS) Indicadores de elementos complejos (II) 26
Indicadores por ORDEN

๏ Permiten saber cuántos y cuáles de los “subelementos” de un elemento complejo se pueden representar
๏ Se pueden usar varias etiquetas distintas:
➡ la etiqueta <xs:sequence> para indicar cuales son los “subelementos” de este elemento (todos los
indicados), y además, que deben aparecer en el orden en que se indica
©Iñaki Martín
<xs:complexType>

<xs:sequence>
<carta>
<nombre>Juan García</nombre>
<xs:element name="pedidoid" type="xs:int"/>
</xs:sequence>
</carta>
</xs:complexType>
</xs:element>
➡ con la etiqueta <xs:all> se indica que han de salir todos los elementos, una vez cada uno, pero en el
orden que se quiera
<xs:complexType mixed="true">

<xs:all>
<carta>
<apellidos>Puertas</apellidos>
<xs:element name="apellidos" type=“xs:string"/>
</xs:all>
</carta>
</xs:complexType>
</xs:element>
➡ con la etiqueta <xs:choice> se indica que han de salir uno de los elementos y sólo uno
<xs:complexType> 
<xs:choice> <carta>
<xs:element name=“dni" type="xs:string"/> <pasaporte>103223422R</pasaporte>
<xs:element name=“pasaporte" type=“xs:string"/> </carta>
</xs:choice>
</xs:complexType>
</xs:element>
4.3 - XSD (SCHEMAS) Indicadores de elementos complejos (III) 27
Indicadores por OCURRENCIA

๏ Permiten saber cuantas veces pueden aparecer los “subelementos” de un elemento complejo.
๏ En este caso se usan atributos sobre la etiqueta del “subelemento”:
➡ el atributo “maxOccurs” indica el numero máximo de veces que se puede dar el elemento
©Iñaki Martín

<xs:complexType>
<carta>
<xs:sequence>
<nombre>Juan García</nombre>
<xs:element name="pedidoid" type=“xs:int" maxOccurs=“6”/>
</xs:sequence>
</xs:complexType>
</carta>
</xs:element>
➡ el atributo “minOccurs” indica el numero mínimo de veces que se debe dar el elemento
<xs:complexType> 
<xs:sequence> <carta>
<xs:element name="nombre" type="xs:string"/> <nombre>Juan García</nombre>
<xs:element name="pedidoid" type=“xs:int" minOccurs=“1”/> <pedidoid>1032</pedidoid>
</xs:sequence> <pedidoid>1039</pedidoid>
</xs:complexType> </carta>
</xs:element>
4.3 - XSD (SCHEMAS) Indicadores de elementos complejos (IV) 28
Indicadores por GRUPO DE ELEMENTOS

๏ Permiten definir grupos de varios elementos, y puego, poder hacer referencia a todos ellos a la vez
๏ En este caso se usa
1. una etiqueta
<xs:group name=“nombregrupo">
para definir los elementos que contiene el grupo, y luego
©Iñaki Martín
2. una etiqueta
<xs:group ref=“nombregrupo"/>
con el nombre del grupo, para añadir el grupo a un elemento complejo.
Este grupo va como cualquier otro elemento, dentro de un complexType, encerrando una sequence
(o un all o un choice)
<xs:group name="GrupoPersonas">
<xs:sequence>
<xs:element name=“nombre" type="xs:string"/>

<xs:element name="apellidos" type="xs:string"/> <persona>
<xs:element name="fechanac" type="xs:date"/> <nombre>Juan</nombre>
</xs:sequence> <apellidos>Shaftner</pedidoid>
</xs:group> <fechanac>10/12/2000</pedidoid>
<pais>Suiza</pedidoid>
</persona>
<xs:element name="persona" type="InfoPersona"/>
<xs:complexType name="InfoPersona">
<xs:sequence>
<xs:group ref="GrupoPersonas"/>
<xs:element name="pais" type="xs:string"/>
</xs:sequence>
</xs:complexType>
4.3 - XSD (SCHEMAS) Indicadores de elementos complejos (V) 29
Indicadores por GRUPO DE ATRIBUTOS

๏ Permiten definir grupos de varios atributos, y puego, poder hacer referencia a todos ellos a la vez
๏ En este caso se usa
1. una etiqueta
<xs:attributeGroup name=“nombregrupo">
para definir los atributos que contiene el grupo, y luego
©Iñaki Martín
2. una etiqueta
<xs:attributeGroup ref=“nombregrupo"/>
con el nombre del grupo, para añadir el grupo es un elemento complejo.
Este grupo va como cualquier otro atributo, dentro de un complexType:
<xs:attributeGroup name="GrupoAtrPersonas">
<xs:attribute name="nombre" type="xs:string"/>
<xs:attribute name="apellidos" type="xs:string"/>
<xs:attribute name="fechanac" type="xs:date"/> 
©Iñaki Martín
<xs:element name="nombre" type="xs:string"/> <persona>

<xs:element name="dni" type="xs:string"/> <nombre>Juan</nombre>
<dni>3898238F</dni>
<xs:any minOccurs="0"/> <apodo>Juanillo</apodo>
</xs:sequence> <grado>Medio</grado>
</xs:complexType> </carta>
</xs:element>
๏ Como se ve en el ejemplo, tras el elemento dni, se pueden añadir mas elementos. En este caso, ademas se ha
añadido una restriccion
๏ <xs:any> se puede usar con una serie de atributos, que restringen algo el alcance de añadir cosas no validadas:
‣ minOccurs y maxOccurs permiten indicar cuantos elementos indefinidos pueden añadirse en ese punto.
‣ namespace obliga a que el elemento indefinido pertenezca a un determinado namespace. Se puede añadir una
lista de namespaces separados por espacios.
‣ processContents dice al parseador XML como debe tratar los elementos desconocidos y añadidos. Valores :
- Skip - no se realiza ninguna validación, pero los elementos deben estar al menos bien formados como XML
- Lax - si hay un esquema XSD para poder procesar el elemento, usarlo con el, si no hay, dejarlo pasar.
- Strict - debe buscarse un esquema XSD para poder procesar el elemento, y debe usarlo con el, si no hay
4.3 - XSD (SCHEMAS) Elementos complejos heredados 31
ELEMENTOS COMPLEJOS EXTENDIDOS (heredados)

๏ Se puede coger un tipo complejo … y crear otro a partir de este, extendiéndolo
XSD

<xs:complexType name=“empleado">
<xs:sequence>
©Iñaki Martín

</xs:sequence> XSD
</xs:simpleType>


<xs:complexType name=“empleadoExtendido”>
<xs:extension base=“empleado”>
<xs:sequence>
<xs:element name="antiguedad" type=“xs:int”/>

</xs:sequence>
</xs:extension>
</xs:complexType>
empleado
nombre
edad
empleadoExtendido
antiguedad
4.3 - XSD (SCHEMAS) Ejercicios: Ejemplo de XSD 32
XML
<?xml version="1.0" encoding="ISO-8859-1"?>

<Libro precio="20"
xsi:noNamespaceSchemaLocation="libro.xsd" >
<Título>Ejercicios de Marcas</Título>
©Iñaki Martín
<Autores>Pedro Porras</Autores>
<Autores>Juan Perez</Autores>
<Editorial>Planeta</Editorial>
</Libro>
libro.xsd
<?xml version="1.0" encoding="ISO-8859-1"?>

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xsd:element name="Libro">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="Título" type="xsd:string"/>
<xsd:element name="Autores" type="xsd:string" maxOccurs="10"/>
<xsd:element name="Editorial" type="xsd:string"/>
</xsd:sequence>
<xsd:attribute name="precio" type="xsd:double"/>
</xsd:complexType>
</xsd:element>
</xsd:schema>
XML
<nota xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="note.xsd">
<a>Pepe</a>
<de>Ana</de>
©Iñaki Martín
<cabecera>Cumpleaños</cabecera>
<cuerpo>Comprar regalo de cumple</cuerpo>
</nota>
Nota.XSD
targetNamespace="http://www.jyoc.com"
elementFormDefault="qualified">
<xs:element name="nota">
<xs:complexType>
<xs:sequence>
<xs:element name="a" type="xs:string"/>
<xs:element name="de" type="xs:string"/>
<xs:element name=“cabecera" type="xs:string"/>
<xs:element name=“cuerpo" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
XML
<shiporder orderid="889923"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" shiporder.xsd
xsi:noNamespaceSchemaLocation="shiporder.xsd">
<orderperson>John Smith</orderperson> <?xml version="1.0" encoding="ISO-8859-1" ?>
<shipto> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<name>Ola Nordmann</name>
<xs:simpleType name="stringtype">
<address>Langgt 23</address> <xs:restriction base="xs:string"/>
<city>4000 Stavanger</city> </xs:simpleType>
<country>Norway</country>
</shipto> <xs:simpleType name="inttype">
©Iñaki Martín
<item> <xs:restriction base="xs:positiveInteger"/>

<title>Empire Burlesque</title> </xs:simpleType>
<note>Special Edition</note>
<xs:simpleType name="dectype">
<quantity>1</quantity>
<xs:restriction base="xs:decimal"/>
<price>10.90</price> </xs:simpleType>
</item>
<item> <xs:simpleType name="orderidtype">
<title>Hide your heart</title> <xs:restriction base="xs:string">
<quantity>1</quantity> <xs:pattern value="[0-9]{6}"/>
<price>9.90</price> </xs:restriction>
</item> </xs:simpleType>
</shiporder>
<xs:complexType name="shiptotype">
<xs:sequence>
<xs:element name="name" type="stringtype"/>
<xs:element name="address" type="stringtype"/>
<xs:element name="city" type="stringtype"/>
<xs:element name="country" type="stringtype"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="itemtype">
<xs:sequence>
<xs:element name="title" type="stringtype"/>
<xs:element name="note" type="stringtype" minOccurs="0"/>
<xs:element name="quantity" type="inttype"/>
<xs:element name="price" type="dectype"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="shipordertype">
<xs:sequence>
<xs:element name="orderperson" type="stringtype"/>
<xs:element name="shipto" type="shiptotype"/>
<xs:element name="item" maxOccurs="unbounded" type="itemtype"/>
</xs:sequence>
<xs:attribute name="orderid" type="orderidtype" use="required"/>
</xs:complexType>
<xs:element name="shiporder" type="shipordertype"/>
</xs:schema>
XML
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0"?>
<impresoras> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<impresora numSerie="i245" tipo="laser" compra="2010"> <xs:complexType name="tipo_impresora">
<xs:sequence>
<marca>Epson</marca> <xs:element name="marca" type="xs:string"/>
<modelo>EPL300</modelo>
<peso>4.52</peso> <xs:element name="modelo" type="xs:string"/>
<tamaño>A4</tamaño>
<xs:element name="peso">
<tamaño>A5</tamaño> <xs:simpleType>
<cartucho>C-123BV</cartucho> <xs:restriction base="xs:decimal">
<enred/> <xs:minInclusive value="0"/>
<xs:fractionDigits value="2"/>
</impresora>
©Iñaki Martín
</xs:restriction>
<impresora numSerie="i246" tipo="matricial"> </xs:simpleType>
<marca>HP</marca> </xs:element>
<modelo>LaserJet 2410</modelo>
<xs:element name="tamaño" type="xs:string" maxOccurs="unbounded"/>
<peso>3.2</peso> <xs:element name="cartucho" >
<tamaño>A4</tamaño> <xs:simpleType>
<cartucho>C-456P</cartucho> <xs:restriction base="xs:string">
<xs:pattern value="C-[0-9]{3}[A-Z]{1,2}"/>
</impresora> </xs:restriction>
</impresoras> </xs:simpleType>
</xs:element>
<xs:element name="enred" type="xs:string" minOccurs="0" fixed=""/>
๏ Reglas a cumplir: </xs:sequence>
<xs:attribute name="numSerie" type="xs:ID" use="required"/>
<xs:attribute name="tipo" use="required">

<xs:simpleType>
<xs:enumeration value="matricial"/>
<xs:enumeration value="laser"/>
<xs:enumeration value="tinta"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
<xs:attribute name="compra">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:minInclusive value="0"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
</xs:complexType>
<xs:element name="impresoras">
<xs:complexType>
<xs:sequence>
<xs:element name="impresora" type="tipo_impresora"
minOccurs="1" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
4.3 - XSD (SCHEMAS) ANEXO: Tipos de datos que se pueden definir en un XSD (1) 36
TIPOS DE DATOS PRIMITIVOS

==========================================================================================
CADENAS Y NÚMEROS --------------

string Cadena de caracteres.
boolean Valores booleanos que pueden ser true o false.
decimal Números reales.
float Números en punto flotante de 32 bits.
©Iñaki Martín
double Números en punto flotante de 64 bits.

hexBinary Secuencia de dígitos hexadecimales.
base64Binary Secuencia de dígitos hexadecimales en base 64.
FECHAS -------------------------
duration Duración representada en "Años + Meses + Días + Horas + Minutos +
Segundos" (P10Y5M4D10H12M50S).
dateTime Fecha y hora en formato CCYY-MM-DDThh:mm:ss donde CC es el siglo, YY el año, MM el

mes, DD el día, precedido del carácter (-) indica un número negativo. La T es el
separador de hh horas, mm minutos, y ss segundos. Puede seguirse de una Z para
indicar la zona UTC (Universal Time Coordinated).
time Hora en formato hh:mm:ss.sss.
date Fecha en formato CCYY-MM-DD.
gYearMonth Sólo el año y mes en formato Gregoriano CCYY-MM.
gYear Sólo el año en formato Gregoriano CCYY.
gMonthDay Sólo el mes y el día en formato Gregoriano --MM-DD.
gDay Sólo el día en formato Gregoriano ---DD.
gMonth Sólo el mes en formato Gregoriano —MM--.
VARIADOS -----------------------
anyURI Cualquier identificador URI.
QName Cualquier nombre cualificado del espacio de nombres
NOTATION Tipo de datos para atributo compatible con DTD.
4.3 - XSD (SCHEMAS) ANEXO: Tipos de datos que se pueden definir en un XSD (2) 37
TIPOS DE DATOS NO PRIMITIVOS

==========================================================================================
normalizedString Representa cadenas normalizadas de espacios en blanco. Este tipo de datos se
deriva de string.
token Representa cadenas convertidas en tokens. Este tipo de datos se deriva
de normalizedString.
language Representa identificadores de lenguaje natural (definidos por RFC 1766). Este tipo
de datos se deriva de token.
IDREFS Representa el tipo de atributo IDREFS. Contiene un conjunto de valores de
©Iñaki Martín
tipo IDREF.
ENTITIES Representa el tipo de atributo ENTITIES. Contiene un conjunto de valores de
tipo ENTITY.
NMTOKEN Representa el tipo de atributo NMTOKEN. NMTOKEN es un juego de caracteres de
nombres (letras, dígitos y otros caracteres) en cualquier combinación. A diferencia
de Name y NCName, NMTOKEN, no tiene restricciones del carácter inicial. Este tipo
de datos se deriva de token.
NMTOKENS Representa el tipo de atributo NMTOKENS. Contiene un conjunto de valores de

tipo NMTOKEN.
Name Representa nombres en XML. Name es un token que empieza con una letra, carácter de
subrayado o signo de dos puntos, y continúa con caracteres de nombre (letras,
dígitos y otros caracteres). Este tipo de datos se deriva detoken.
NCName Representa nombres sin el signo de dos puntos. Este tipo de datos es igual
que Name, excepto en que no puede empezar con el signo de dos puntos. Este tipo de
datos se deriva de Name.
ID Representa el tipo de atributo ID definido en la recomendación de XML 1.0. El IDno
debe incluir un signo de dos puntos (NCName) y debe ser único en el documento
XML. Este tipo de datos se deriva de NCName.
IDREF Representa una referencia a un elemento que tiene un atributo ID que coincide con
el ID especificado. IDREF debe ser un NCName y tener un valor de un elemento o
atributo de tipo ID dentro del documento XML. Este tipo de datos se deriva
de NCName.
ENTITY Representa el tipo de atributo ENTITY definido en la recomendación de XML 1.0. Es
una referencia a una entidad sin analizar con un nombre que coincide con el
especificado. ENTITY debe ser un NCName y declararse en el esquema como nombre de
entidad sin analizar. Este tipo de datos se deriva de NCName.
5.1 - XPath 1
GUIONES DE CLASE
CAPÍTULO 5.1
©Iñaki Martín
XPATH.
5.1 - XPath XSL, XPATH y XQUERY 2
XSL: Xslt, Xpath y Xquery

๏ XSL son herramientas para trabajar con XML.
๏ Se denominan "Style Sheets for XML", pues lo que describen es cómo deben ser representados los elementos que componen
un XML
๏ XSL se compone de tres partes:
©Iñaki Martín
• XSLT - un lenguaje para transformar documentos XML

• XPath - un lenguaje para navegra a través de documentos XML
• XQuery - un lenguaje para consultar el contenido de documentos XML
5.1 - XPath XPath: Introducción 3
Que es Xpath
๏ XPath se usa para navegar por los nodos y su contenido en un XML
๏ Usa una sintaxis similar a la de Unix al navegar por sus directorios, solo que referencia nodos del XML.
manteniendo la referencia de un pah (camino) de acceso a los nodos bien desde el nodo raiz, bien desde un
nodo desde el que estemos localizados
๏ Es un componente vital de XSL, pues el resto de elementos (XSLT, SQuery) usa sus reglas para moverse por un
©Iñaki Martín
documento
๏ En XPath existen siete tipos de nodos: elementos, atributos, texto, namespaces, instructiones, comentarios y
nodos en si (nodos del documento)
๏ UN XML es tratado como un arbol de nodos. El nodo inicial es llamado nodo raiz
XML

<tienda>
<libro>
<titulo idioma="en">Harry Potter</titulo>
<autor>J K. Rowling</autor>
<anio>2005</anio>
<precio>29.99</precio>
</libro>
</tienda>
<tienda> (nodo raiz)

<autor>J K. Rowling</autor> (nodo elemento)
idioma="en" (attribute node)
๏ Valores atomicos: son nodos que no tienen ni padre ni hijos, nodos "dato". Ejemplos:
J K. Rowling
"en"
Xpath localizacion absoluta o relativa

๏ Una localización en XPath puede ser abcoluta o relativa.
‣ Es absoluta si el pat comienza con una barra ( / ) ; /step/step/...
‣ Es relativa si no comienza por una barra: step/step/...
๏ Como se ha indicado, en ambos casos la localizacion se completa con diferentes pasos separados por barras
©Iñaki Martín
Relaciones entre nodos
๏ Parent (padre) todo elemento y atributo tiene un padre.

En el ejemplo, el elemento libro es padre de titulo, autor, anio, y precio
๏ Children (hijo) Todo nodo elemento tiene ceo, uno o mas hijos.
En el ejemplo, titulo, autor, anio, y precio son hijos de libro
๏ Siblings (hermanos) Son nodos con el mismo padre.
En el ejemplo, titulo, autor, anio, y precio son elementos hermanos
๏ Ancestors (ancestros) Un ancestro de un nodo es su padre, el padre de su padre, y sucesivamente.
En el ejemplo, los ancestros de titulo son libro y tienda
๏ Descendants (descendientes) todos los nodos hijos y los que de ellos desciendan directamente.
En el ejemplo, los descendientes de tienda son libro, titulo, autor, anio, y precio
XPath Expressions
๏ XPath usa expressions para identificar un nodos de un XML según su path. Estas son las expressions más utiles:
expression Descripción
estenodo Selecciona todos los nodos con el nombre estenodo
/ Selecciona el nodo raiz
// Selecciona todos los nodos desde el raiz
©Iñaki Martín
//unnodo Selecciona todos los nodos unnodo desde el raiz, esten donde estén
. Seleciona el nodo actual
.. Selecciona el nodo padre
@ Seleciona atributos
tema Selecciona todos los nodos tema

/tema Selecciona todos los nodos tema que sean hijos de la raiz
//nota Selecciona todos los nodos nota esten donde esten

tema/nota Selecciona todos los nodos nota que son hijos de tema
tema//nota Selecciona todos los nodos nota que sean descendientes de tema, esten donde esten
//@idioma Selecciona todos los atributos llamados idioma, esten donde esten
XPath eligiendo varios paths

๏ XPath usa el operador | en una expresión para seleccionar varios valores conjuntamente
tema Selecciona todos los nodos tema

//libro/titulo | //libro/precio Selecciona todos los elementos titulo y precio, de todos los elementos libro
//titulo | //precio Selecciona todos los elementos titulo y precio, en todo el documento
/tienda/libro/titulo | //precio Selecciona todos los elementos titulo que sean hijos de un libro y nietos
de un tienda, y todos los precio existentes en el documento
XPath Predicados
๏ Los predicados XPath se usan para buscar un nodo específico o un nodo con un valor específico
๏ Se escriben encre corchetes tras el elemento que evalúan
๏ Ejemplos:
/tienda/libro[1] Selecciona el primer libro de los hijos de tienda.
Nota: En IE 5,6,7,8,9 el primer nodo es [0], aunque según W3C debe ser [1]. Para paliar este problema,
usa SelectionIdiomauage para XPath: En JavaScript, se usa:
©Iñaki Martín
xml.setProperty("SelectionIdiomauage","XPath");
/tienda/libro[last()] Selecciona el último elemento hijo de los que tenga libro
/tienda/libro[last()-1] Selecciona el penúltimo elemento hijo de los que tenga libro
/tienda/libro[position()<3] Selecciona los elementos libro cuya posicion sea menor que 3 (los
dos primeros por tanto) y que sean hijos de tienda
//titulo[@idioma] Selecciona todos los titulo que tengan un atributo idioma
//titulo[@idioma='en'] Selecciona todos los titulo que tengan un atributo idioma = "es"
/tienda/libro[precio>35.00] Selecciona todos los elementos libro hijos de tienda con un
hijo precio que sea mayor de 35.00

/tienda/libro[precio>35.00]/titulo Selecciona todos los elementos titulo, hijos de libro y
nietos de tienda, donde el elemento precio (hijo de libro)
sea mayor de 35.00
XPath comodines
๏ XPath usa comodines para seleccionar elementos que desconoce
comodín Descripción
* Coincide en la búsqueda con cualquier elemento (pero NO con 0 elementos)
@* Coincide en la búsqueda con cualquier atributo (pero no con 0 atributos)
Ejemplos node() Coincide en la búsqueda con cualquier nodo de cualquier tipo
/tienda/* Selecciona todos los nodos hijos de tienda

//* Selecciona todos los nodos del documento
//titulo[@*] Selecciona todos los titulo que tengan al menos un atributo (de cualquier tipo)
Xpath Axes
๏ XPath axis (ejes) definen un conjunto de nodos, relativos al nodo previamente seleccionado
๏ Se usan indicando qué conjunto de nodos se seleccionan, separandose por :: (dobles dos puntos)
axis Descripción
©Iñaki Martín
parent Selecciona el padre del nodo actual

ancestor Selecciona todos los ancestros del nodo actual
Selecciona todos los ancestros del nodo actual
ancestor-or-self y al propio nodo actual
attribute Selecciona todos los atributos del nodo actual
Selecciona todos los hijos del nodo actual
child (solo los hijos directos)
Selecciona todos los hijos del nodo actual
descendant (y tambien nietos, bisnietos...)

Selecciona todos los descendientes del nodo
descendant-or-self actual y al propio nodo actual
Selecciona todos los elementos que esten en
following el documento tras el nodo actual
Selecciona todos los elementos que esten en
el documento antes de aparecer el nodo
preceding actual, excepto ancestros, atributos y
namespaces
Selecciona todos los elementos hermanos del
following-sibling nodo actual que esten en el documento tras el
nodo actual
Selecciona todos los elementos hermanos del
preceding-sibling nodo actual que esten en el documento detras
del nodo actual
self Selecciona el nodo actual
Selecciona todos los nodos namespaces del
namespaces nodo actual
๏ Ejemplos de uso de axes

child::libro Selecciona todos los nodos libro hijos del nodo actual
attribute::idioma Selecciona el atributo idioma del nodo actual
child::* Selecciona todos los nodos hijos del nodo actual
attribute::* Selecciona todos los atributos del nodo actual
child::text() Selecciona todos los nodos text hijos del nodo actual
child::node() Selecciona todos los hijos del nodo actual
©Iñaki Martín
descendant::libro Selecciona todos los nodos libro que sean descendientes del nodo actual
ancestor::libro Selecciona todos los nodos libro que sean ascendientes del nodo actual
child::*/child::precio Selecciona todos los nodos precio nietos del nodo actual
ancestor-or-self::libro Selecciona todos los nodos libro que sean ascendientes del nodo actual,
y el mismo nodo actual tambien SI ES UN NODO LIBRO
Xpath operadores
Tipo Operador Significado y uso
matemático + suma 4+2

matemático - resta 4-2
matemático * multiplicacion 4 * 2
©Iñaki Martín
matemático div división. Se usa div ya que el símbolo ‘/’ es necesario para indicar caminos 4 div 2
union | une dos conuntos de elementos //libro | //cd
matemático mod resto de una division entera 4 mod 3
relacional = comparacion por igualdad (es igual que) precio = 3.4
relacional != comparacion por desigualdad (es distinto que) precio != 3.4
relacional < comparacion por minoría (es menor que) precio < 3.4
relacional > comparacion por mayor (es mayos que) precio > 3.4
relacional <= es menor o igual que precio >= 3.4
relacional >= es mayor o igual que precio <= 3.4
relacional or o precio = 3.4 or precio < 0
relacional and y precio = 3.4 and precio < 0
5.2 - Xslt 1
GUIONES DE CLASE
CAPÍTULO 5.2
©Iñaki Martín
XSLT
5.2 - Xslt XSL 2
XSL: Xslt, Xpath y Xquery

XSL = Style Sheets for XML
XSL describes how the XML elements should be displayed.
XSL se compone de tres partes:

©Iñaki Martín
• XSLT - a language for transforming XML documents

• XPath - a language for navigating in XML documents
• XQuery - a language for querying XML documents
5.2 - Xslt XSLT 3
Que es XSLT
๏ XSLT (XSL Transformations) en realidad aplicar una Hoja de estilos al XML, para cambiar su resultado
๏ Al hablar de hola de estilo no confundir con CSS, que también (de otra manera) puede aplicarse a un XML.
๏ Es la parte mas importante de XSL si se desea transformar el contenido de un XML en otro XML, o en cualquier
otro formato legible por un navegador (HTML, XHTML...)
©Iñaki Martín
๏ Con XSLT se puede añadir o eliminar elementos y atributos del documento origen, o reordenarlos, recolocarlos,
probar su existencia o contenido, ocultar o mostrar nodos , ramas o atributos...
๏ Xslr usa XPath para navegar entre documentos XML.
๏ Con XPath, busca partes del documento XML origen (nodos, atributos...) que coincidan con un determinado
patrón (template). Si encuentra una coincidencia, transforma dicha parte en otro formato según se indique
Formato doc XSLT
๏ Deben comenzar con una declaración XML: <?xml version="1.0“?>
๏ Se guardarán siempre en archivos independientes con extensión .xsl
๏ El elemento raíz de la hoja de estilo XSLT es stylesheet
๏ Los nombres de los elementos “reservados” para usarse com identificadores XSLT proceden de un mismo
espacio de nombres, y por lo tanto deben escribirse precedidos por el correspondiente alias.
๏ Dicho alias debe “apuntar” a la URL: http://www.w3.org/1999/XSL/Transform, por lo que el elemento raiz es :
XSLT
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

........
</xsl:stylesheet>
5.2 - Xslt XSLT 4
Enlazar XSLT con XML

๏ Para que un documento XML se transforme con un XSLT, se ha de incluir en el XML una referencia a qué XSLT
debe usarse como estilo
๏ Para ello se añade en el XML la linea
<?xml-stylesheet type="text/xsl" href="ficheroxslt.xsl"?>
©Iñaki Martín
๏ donde ficheroxslt.xsl es el fichero donde hemos descrito las transformaciones

XML
<?xml version=“1.0”?>
<?xml-stylesheet type="text/xsl" href="ej1.xsl"?>
<ciudades>
<ciudad>
<nombre>Madrid</nombre>
<habitantes>3500000</habitantes>
</ciudad>
<ciudad>
<nombre>Málaga</nombre>
</ciudad>
<ciudad>
<nombre>Toledo</nombre>
</ciudad>
</ciudades>
5.2 - Xslt XSLT 5
Reglas XSLT
๏ XSLT Entre las marcas de inicio y de fin del elemento raíz xsl:stylesheet, se escribirán las reglas de
transformación propiamente dichas, con una elemento xsl:template
๏ La regla indica
‣ qué instancias de los elementos del documento XML se van a transformar.
©Iñaki Martín
‣ cómo se deben transformar cada una de ellas

๏ ¿Como se define una regla? La regla se define con la etiqueta <xsl:template match="..." >
Este es un ejemplo del formato para indicar qué se ha de transformar:
XSLT
<xsl:template match="/">
</xsl:template>
๏ ¿Como se transforma el doc origen? Entre las etiquetas del template (antes vistas) se incluye el resultado a
generar cuando se cumpla la regla. Además de texto y etiquetas HTML expresas, se pueden usar varias
funciones par añadir contenido expreso, como <xsl:value-of...>, que recupera y escribe en el documento
resultado el valor del elemento que está siendo procesado
๏ Normalmente se usa como primera regla <xsl:template match="/"> que coincide con el elemento raiz del XML.
๏ Luego, se van evaluando otras reglas mediante nuevos <xsl:template que se crean al final, y se invoca a estas
reglas desde
5.2 - Xslt XSLT 6
Orden y uso de templates

๏ Con cada template se le indica al procesador de XSLT qué parte del XML ha de formatear
๏ Normalmente se usa como primer template <xsl:template match="/">
๏ Con ello se "selecciona" el elemento raiz del documento, y asi se le dice al XSLT que se va a procesar el
documento entero dentro de este template
©Iñaki Martín
๏ Luego, se pueden incluir internamente otras reglas (templates) para procesar otros nodos del documento
๏ Para ello, se escriben nuevos <xsl:template> (detras del <xsl:template match="/">) y se hace alusión a dichas
reglas, desde dentro del <xsl:template match="/"> con la instruccion <xsl:apply-templates select=”...” />
XSLT

 El template raiz, que indica
que se ha de procesar
<xsl:apply-templates select="unaReglaXpath"/> todo el documento
 Linea de indica dónde ha
de aplicarse el template
</xsl:template> (escrito mas abajo) que se
dispara al encontrarse
<xsl:template match="//unaReglaXpath"> "unaReglaXpath"
 Un segundo template, que
evalua lo que hacer
</xsl:template> cuando se encuentre el
elemento "unaReglaXpath"
</xsl:stylesheet>
5.2 - Xslt XSLT 7
๏ Ejemplo:
XSLT

<html> XML
<head>
©Iñaki Martín
<title>Ejemplo XSLT</title> <?xml version=“1.0”?>

</head> <?xml-stylesheet type="text/xsl" href="ej1.xsl"?>
<body> <ciudades>
<xsl:apply-templates select="nombre"/> <ciudad>
</body> <nombre>Madrid</nombre>
</html> <habitantes>3500000</habitantes>
</xsl:template> </ciudad>
<ciudad>
<nombre>Málaga</nombre>
<xsl:template match="//nombre">
<h2> <habitantes>800000</habitantes>
<xsl:value-of select="."/> </ciudad>
</h2> <ciudad>
</xsl:template> <nombre>Toledo</nombre>
</xsl:stylesheet> </ciudad>
HTML </ciudades>
<html>
<head>
<title>Ejemplo XSLT</title>
</head>
<body>
<h2>Madrid</h2>
<h2>Málaga</h2>
<h2>Toledo</h2>
</body>
</html>
5.2 - Xslt XSLT 8
xsl:value-of ...
๏ En el elemento <xsl:value-of…> se puede indicar que se quiere mostrar el valor del elemento que estamos
procesando, aunque también podemos indicar que queremos mostrar el valor de un elemento hijo, o
descendiente, del elemento que se está procesando..
๏ Esto es posible porque en el atributo select puede usarse una “expresión XPath”.
©Iñaki Martín
๏ Ejemplo: <xsl:value-of select="./titulo" /> devuelve el valor del nodo titulo que es hijo del nodo actual
5.3 - XQuery 1
GUIONES DE CLASE
CAPÍTULO 5.3
©Iñaki Martín
XQUERY
5.3 - XQuery XQuery 2
XSL: Xquery
๏ XML se ha convertido en una herramienta de uso cotidiano en los entornos de tratamiento de información y de
programación.
๏ Inicialmente, las herramientas más habituales para manipular, desde un programa, un árbol de datos en XML, eran los
parsers SAX y DOM, no son prácticos
©Iñaki Martín
๏ Pero parsers DOM y SAX tienen un problema: la necesidad de escribir una gran cantidad de código para realizar el
procesamiento. Este código consiste, básicamente, en recorrer un árbol, para un parser DOM, o detallar una lista de
acciones según la etiqueta que se encuentre para parser SAX.
๏ Posteriormente a los parsers DOM y SAX, ha aparecido los bindings, que, si bien en ciertos aspectos son útiles y
ahorran una gran cantidad de trabajo, no son útiles en todas las situaciones en las que se puede utilizar XML.
๏ Otra solución es el estándar XSLT. Sin embargo XSLT sólo es aplicable en los casos en los que desee obtener una
representación distinta de los datos, no cuando se desea localizar una información concreta de los mismos
๏ Un ejemplo de un escenario donde no es aplicable ninguna de las herramientas comentadas (parsers, binding y XSLT)
se ve a la hora de consultar la información en los actuales servidores de bases de datos XML nativas (Native XML
Database) (o bases de datos antiguas, con funciones para procesar datos en XML)
Dar solución a este escenario de uso mediante código escrito con la ayuda de un parser SAX puede ser bueno si la información origen no es de mucha complejidad.
Otro problema es que el código está fuertemente ligado a la estructura de los datos en XML, por lo que cualquier cambio en la consulta o en la estructura de los
datos obliga a volver a escribir el código. Además el código resultante es muy poco parametrizable y reutilizable. Dar solución a este escenario de uso mediante
código escrito con la ayuda un parser DOM añade, a los problemas de reusabilidad, complejidad y fuerte acoplamiento anteriores, la exigencia de tener cargar los
datos en memoria antes de comenzar el recorrido, lo cual puede resultar imposible para grandes volúmenes de datos. Las herramientas de bindings favorecen la
sencillez en el proceso de carga en memoria de los datos, pero, aplicadas a este escenario de uso, no facilita la tarea a la hora de escribir una consulta
๏ Era pues necesaria la aparición de un lenguaje como xQuery, que permita definir de forma rápida y compacta,
consultas o recorridos complejos sobre colecciones de datos en XML, consultas que devuelvan todos los nodos
que cumplan ciertas condiciones. xQuery es, además, declarativo, es decir, independientemente de la forma en que
se realice el recorrido o de donde se encuentren los datos.
Que es XQuery
๏ XQuery es a XML lo mismo que SQL es a las bases de datos relacionales.
๏ XQuery es un lenguaje funcional, lo que significa que, en vez de ejecutar una lista secuencial de instrucciones,
como un lenguaje procedimental, cada consulta es una expresión que es evaluada y devuelve un resultado, al igual
que en SQL.
๏ XQuery ha sido construido sobre la base de Xpath, un lenguaje declarativo para la localización de nodos y
©Iñaki Martín
fragmentos de información en árboles XML

๏ Ejemplos de uso de XQuery:
- Extraer información de un WebService
- Crear informes o resúmenes de XML existentes
- Transformar XML en HTML o XHTML
- Buscar en documentos XML o en Webs en busca de información relevante

๏ Requerimientos técnicos que cumple XQuery:
• XQuery debe ser un lenguaje declarativo. Al igual que SQL hay que indicar que se quiere, no la manera de obtenerlo.
• XQuery debe ser independiente del protocolo de acceso a la colección de datos. Una consulta en XQuery debe funcionar igual al consultar un archivo local que
al consultar un servidor de bases de datos que al consultar un archivo XML en un servidor web.
• Las consultas y los resultados deben respetar el modelo de datos XML
• Las consultas y los resultados deben ofrecer soporte para los namespace4.
• Debe ser capaz de soportar XML-Schemas y DTDs y también debe ser
capaz de trabajar sin ninguno de ellos.
• XQuery debe poder trabajar con independencia de la estructura del
documento, esto es, sin necesidad de conocerla.
• XQuery debe soportar tipos simples, como enteros y cadenas, y tipos
complejos, como un nodo compuesto por varios nodos hijos.
• Las consultan deben soportar cuantificadores universales (para todo) y
existenciales (existe).
• Las consultas deben soportar operaciones sobre jerarquías de nodos y secuencias de nodos.
• Debe ser posible en una consulta combinar información de múltiples fuentes.
• Las consultas deben ser capaces de manipular los datos independientemente del origen de estos.
• Con XQuery debe ser posible definir consultas que transformen las estructuras de información originales y debe ser posible crear nuevas estructuras de datos.
• El lenguaje de consulta debe ser independiente de la sintaxis, esto es, puede que existan varias sintaxis distintas para expresar una misma consulta en XQuery.
Ejemplos para uso en este curso

libros.xml comentarios.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <comentarios>
<tienda> <entrada>
<libro anio="1999"> <titulo>Recuerdos inmortales</titulo>
<titulo>La sombra del viento</titulo> <precio>40.95</precio>
<autor> <comentario>
<apellido>Zafon</apellido> Una recopilacion de cuentos de tres genios
<nombre>Carlos Ruiz</nombre> </comentario>
</autor> </entrada>
<editorial>Planeta</editorial> <entrada>
©Iñaki Martín
<precio>65.95</precio> <titulo>Marina</titulo>
</libro> <precio>31.20</precio>
<libro anio="1997"> <comentario>
<titulo>Marina</titulo> Un libro iniciatico y recomendable.
<autor> </comentario>
<apellido>Zafon</apellido> </entrada>
<nombre>Carlos Ruiz</nombre> <entrada>
</autor> <titulo>La sombra del viento</titulo>
<editorial>Planeta</editorial> <precio>66.95</precio>
<precio>30.20</precio> <comentario>
</libro> El libro estrella del autor

<libro anio="2010"> </comentario>
<titulo>Recuerdos inmortales</titulo> </entrada>
<autor> </comentarios>
<apellido>Argensol</apellido>
<nombre>Sergio</nombre>
</autor>
<autor>
<apellido>Batista</apellido>
<nombre>Pedro</nombre>
</autor>
<autor>
<apellido>Seros</apellido>
<nombre>Daniel</nombre>
</autor>
<editorial>Alfaguara</editorial>
</libro>
<libro anio="1999">
<titulo>La colmena</titulo>
<editor>
<apellido>Martinez</apellido>
<nombre>Rodolfo</nombre>
<afiliacion>Historia siglo XX</afiliacion>
</editor>
<editorial>SinPerdonEdiciones</editorial>
</libro>
</tienda>
Consultas
๏ Una consulta XQuery es una expresión que lee una secuencia de datos en XML y devuelve como resultado otra
secuencia de datos en XML.
A diferencia de SQL, en XQuery las expresiones y los valores que devuelven son dependientes del donde se encuentran los datos. Por ejemplo los
nodos que aparecerán en el resultado dependen de los namespaces, de la posición donde aparezca la etiqueta raíz del nodo (dentro de otra, por
ejemplo), etc.
๏ El resultado de una ejecución XQuery es un texto. Según con qué herramienta se use XQuery, el texto se puede
©Iñaki Martín
almacenar en un fichero, o enviar a otro proceso como entrada, guardar en una variable para procesarse, etc.
๏ Como el resultado de un XQuery puede formatearse, se puede obtener un texto con formato XML (lo mas habitual y
simple), o un texto HTML/XHTML, o un texto plano...
Este manual supondremos siempre la salida a fichero de los resultados, y que la salida es, si no se indica lo contrario, otro fichero XML
๏ En XQuery las consultas pueden estar compuestas por cláusulas de hasta cinco tipos distintos: For, Let, Where, Order
y Return. Las iniciales juntas se conocen normalmente por la norma FLWOR
CLAUSULA FWLOR DESCRIPCION
Evalua una expresion XPath, y crea un grupo con elementos que cumplan la expresión (al
FOR grupo se le llama tupla). La tupla se almacena además en una variable
Cuando se procese la tupla, se van procesando uno a uno cada uno de sus componentes
Vincula una variable al resultado completo de una expresión añadiendo esos vínculos a las
LET tuplas generadas por una cláusula for o, si no existe ninguna cláusula for, creando una única
tupla que contenga esos vínculos.
WHERE Filtra las tuplas eliminando todos los valores que no cumplan las condiciones dadas
ORDER BY Ordena las tuplas según el criterio dado.
Construye el resultado de la consulta para una tupla dada, después de haber sido filtrada por
RETURN
la cláusula where y ordenada por la cláusula order by
Reglas generales
En matemáticas, una tupla es una lista ordenada de elementos.
En XQuery, se conoce como tupla al conjunto de valores que toma una variable.
Por ejemplo, un conjunto de nodos de un xml es una tupla.
Una expresion xPath tambien puede dar como resultado una tupla:
//libro/autor Devuelve como respuesta un conjunto (tupla) de todos los nodos autor que tenga cada nodo
©Iñaki Martín
๏ For y Let sirven para crear las tuplas con las que trabajará el resto de las cláusulas de la consulta.
๏ For y Let pueden usarse tantas veces como se desee en una consulta, incluso dentro de otras cláusulas.
๏ Solo puede declararse una única cláusula where, una única cláusula order by y una única cláusula return.
๏ Ninguna de las cláusulas FLWOR es obligatoria en una consulta XQuery.
Por ejemplo, una expresión XPath, como la que se muestra a continuación, es una consulta válida y no contiene ninguna de las cláusulas FLWOR.
XQuery
doc("libros.xml")/tienda/libro/titulo[/tienda/libro/autor/apellido='Zafon']
๏ Es posible especificar varios criterios de ordenación en la cláusula order by, separándolos por comas. Los
criterios de ordenación se aplican por orden de izquierda a derecha.
๏ Los valores entre llaves { .. } en la clausula return son valores que han de evaluarse, si no, se escriben tal
y como se pongan en el xml destino
๏ Los elementos de búsquedas en las clausulas For son instrucciones XPath.
๏ Ejemplo de una consulta donde aparecen las 5 clausulas. La siguiente consulta devuelve los títulos de los libros
que tengan más de dos autores ordenados por su título.
XQuery XML
for $b in doc("libros.xml")//libro <titulo>Recuerdos inmortales</titulo>

let $c := $b//autor
©Iñaki Martín
where count($c) > 2

order by $b/titulo
return $b/ titulo
clausulas FOR y RETURN

๏ Una clasula FOR evalua una expresion (generalmente una expresión XPath), y crea un grupo con los elementos que
cumplan la expresión (al grupo se le llama tupla). La tupla se almacena además en una variable
Cuando Return procese la tupla, se van procesando uno a uno cada uno de sus componentes
๏ La variable se identifica poniendole delante el signo $
๏ La cláusula RETURN "procesa" uno a uno cada elemento de la variable del for (cada elemento de la tupla)
©Iñaki Martín
Recordar que en este manual supondremos que Return escribe a fichero de los resultados, y que la salida es otro fichero XML (si no se indica lo contrario)
๏ RETURN no escribe directamente cada uno de los elemento, sino que nos permite:
‣ Decidir qué parte de cada elemento de la tupla se muestra
‣ Qué formato se le da a cada elemento. Los valores entre llaves { .. } en la clausula return son valores que han de
evaluarse, si no, si se añaden otros valores sin llaves, se escriben tal y como se pongan en el fichero destino
๏ Ejempo: esta busqueda evalúa el documento "libros.xml", y en el, con una expresión XPath, busca cada uno de los
nodos autor, dentro de un nodo libro, que esten dentro de un nodo tienda XML
<autor>
<apellido>Zafon</apellido>
Variable donde se almacena la tupla de nodos Expresion xpath que se evalua <nombre>Carlos Ruiz</nombre>
seleccionados con la expresión XPath </autor>
XQuery <autor>
<nombre>Carlos Ruiz</nombre>
for $b in doc("libros.xml")//tienda/libro/autor </autor>
<autor>
return $b <apellido>Argensol</apellido>
</autor>
<autor>
Cláusula RETURN; va procesando uno a uno los lementos de $b y , en este caso simple, <apellido>Batista</apellido>
devuelve directamente cada elemento de $b <nombre>Pedro</nombre>
Como $b es un nodo, devuelve cada nodo COMPLETO, es decir, con sus etiquetas de </autor>
apertura y cierre, sus atributos, y sus nodos descendientes si los tuviere <autor>
Además, como solo se devuelve un elemento de la tupla, sin ningun caracter mas, no es <apellido>Seros</apellido>
necesario encerrar la respuesta entre llaves { }. Si se hubiera añadido mas texto libre, si <nombre>Daniel</nombre>
hubieran hecho falta (ver ejemplos siguientes) </autor>
๏ Evaluando el ejemplo anterior:

‣ En el return $b, se devuelve cada autor encontrado en el xml,
‣ Además, se devuelve completo, con todos sus hijos
‣ Además el nuevo XML no se crea con ninguna estructura añadida, no tiene etiquetas xml que agrupen la respuesta
como nodo principal, ni otros nodos nuevos añadidos. Si se desea esto, hay que incluir en la clausula Return las
etiquetas XML que se desen añadir a la respuesta.
©Iñaki Martín
En este caso, las variables que se evaluen (y la expresion donde se usen) deben ir entre llaves.
๏ Mas ejemplos: XML
<cadaautor>
<autor>
XQuery <apellido>Zafon</apellido>
for $b in doc("libros.xml")//tienda/libro/autor </autor> XML
</cadaautor>
return <cadaautor>{$b}</cadaautor> <cadaautor> <nodoprincipal>
<autor> <cadaautor>
<apellido>Zafon</apellido> <autor>
Advertir que las etiquetas añadidas, <cadaautor>, no <nombre>Carlos Ruiz</nombre> <apellido>Zafon</apellido>
</autor> <nombre>Carlos Ruiz</nombre>
existian en el xml original, estamos construyendo un </cadaautor> </autor>
<cadaautor> </cadaautor>
nuevo XML con nueva estructura <autor> <cadaautor>
<apellido>Argensol</apellido> <autor>
<nombre>Sergio</nombre> <apellido>Zafon</apellido>
</autor> <nombre>Carlos Ruiz</nombre>
</cadaautor> </autor>
<cadaautor> </cadaautor>
<autor> <cadaautor>
<apellido>Batista</apellido> <autor>
Nada impide que la ejecucion del For este dentro de otra <nombre>Pedro</nombre>
</autor>
estructura de etiquetas que lo engloben. </cadaautor>
<cadaautor>
</autor>
</cadaautor>
<autor> <cadaautor>
De hecho, puede haber muchos elementos For en un XQuery <apellido>Seros</apellido>
<autor>
</autor> <nombre>Pedro</nombre>
XQuery </cadaautor> </autor>
</cadaautor>
<nodoprincipal> <cadaautor>
for $b in doc("libros.xml")//tienda/libro/autor <autor>
return <cadaautor>{$b}</cadaautor> <nombre>Daniel</nombre>
</nodoprincipal> </autor>
</cadaautor>
</nodoprincipal>
๏ Mas ejemplos:
XML
Extraemos un nodo hijo de cada nodo de los de la tupla <nombre>Carlos Ruiz</nombre>
XQuery <nombre>Carlos Ruiz</nombre>
for $b in doc("libros.xml")//tienda/libro/autor <nombre>Pedro</nombre>
return { $b/nombre } <nombre>Daniel</nombre>
©Iñaki Martín
Extraemos el valor un nodo, sin sus correspondientes

etiquetas de apertura y cierre. Lo usamos en este caso
para cambiar éstas por las mismas pero traducidas XML
<name>Carlos Ruiz</name>
XQuery <name>Carlos Ruiz</name>
<name>Sergio</name>
for $b in doc("libros.xml")//tienda/libro/autor <name>Pedro</name>
return <name> { $b/nombre/text() } </name> <name>Daniel</name>
Extraemos un atributo de cada nodo de los de la tupla

XQuery XML
<et_anio>1999</et_anio>
for $b in doc("libros.xml")//tienda/libro <et_anio>1997</et_anio>
return <et_anio> { $b/@anio } </et_anio> <et_anio>2010</et_anio>
<et_anio>1999</et_anio>
clausula LET
๏ LET es usada para crear una variable que contenga un valor o una secuencia de valores
๏ Los valores pueden ser cadenas, numeros, o una secuencia
๏ Una secuencia es una lista de varios nodos simple de un documento XML, o nodos completos (con todos sus
descendientes), o valores de cadenas o numericos.
©Iñaki Martín
๏ Normalmente las secuencias se extraen del análisis con XPath de un nodo/nodos XML
๏ para asignar un valor a una variable se usa el operador :=
๏ La variable se identifica poniendole delante el signo $
XQuery
let $A = 'Juan'
๏ Para crear una secuencia los mas sencillo es separando los valores con comas, si no son elementos HTML, y
encuadrandolos entre parentesis
XQuery
let $t := (2,3,4,45,6)
๏ Si la secuencia es de elementos HTML, se pueden enlazar como un documento XML, sin comas ni nada
XQuery
let $items := <items>

<item1 />
<item2 />
<item3 />
</items>
๏ Un rango puede ser usado para crear secuencas de valores consecutivos

XQuery XML
let $t := (2, 5 to 10) 2 5 6 7 8 9 10
XQuery
XML
let $k := reverse(10 to 15)
15 14 13 12 11 10
©Iñaki Martín
return $k
urn <li>{data($x/title)}. Category: {data($x/@category)}</li>
data($x/@category)
The at keyword can be used to count the iteration:

for $x in (10,20), $y in (100,200)
DIiferencias entre FOR y LET
๏ La mejor manera de explicarlo es con un ejemplo, haciendo una consulta similar con FOR y con LET:
Con FOR Con LET
XQuery XQuery
for $d in doc("libros.xml")/tienda/libro/ let $d := doc("libros.xml")/tienda/libro/titulo

titulo return
©Iñaki Martín
<titulos>{ $d }</titulos>
return
<titulos>{ $d }</titulos>
XML XML
<titulos> <titulos>
<titulo>La sombra del viento</titulo> <titulo>La sombra del viento</titulo>
</titulos> <titulo>Marina</titulo>
<titulos> <titulo>Recuerdos inmortales</titulo>
<titulo>Marina</titulo> <titulo>La colmena</titulo>
</titulos> </titulos>
<titulos>
<titulo>Recuerdos inmortales</titulo>
</titulos>
<titulos>
</titulos>
๏ la cláusula FOR vincula una variable con cada ๏ LET, en cambio, vincula una variable con todo el
nodo que encuentra en la coleccion que recorre resultado de una expresión.
XML
๏ Lo anterior no quiere decir que se pueda usar una clausula let casi <libro>
<titulo>La sombra del viento</
igual que una for titulo>
</libro>
๏ Si una cláusula let aparece en una consulta que ya posee una o <libro>
<titulo>Marina</titulo>
más cláusulas for, los valores de la variable vinculada por la </libro>
<libro>
cláusula let se añaden a cada una de las tuplas generadas por la <titulo>Recuerdos inmortales</
titulo>
©Iñaki Martín
cláusula for </libro>

<libro>
</libro>
XQuery
XML
for $r in doc("libros.xml")/tienda/libro/
<libro>
titulo <titulo>La sombra del viento</titulo>
let $m := $r <autor>
return </autor>
<autores>1</autores>
<libro>{ $r }</libro> </libro>
<libro>
<autor>
XQuery <nombre>Carlos Ruiz</nombre>
</autor>
for $r in doc("libros.xml")/tienda/libro/titulo <autores>1</autores>
</libro>
let $m := $r/../autor/nombre <libro>
return <autor>
<libro>{ $r, <autor>{$m}</autor>, <nombre>Sergio</nombre>
<autores>{ count($m) }</autores>} <nombre>Daniel</nombre>
</autor>
</libro> <autores>3</autores>
</libro>
<libro>
<autor/>
<autores>0</autores>
</libro>
CLAUSULA WHERE
๏ where filtra los resultados dependiendo de una condición

๏ Aplicado en un for, toma la tupla original y elimina los elementos que NO cumplan la condición
where (condicion)
©Iñaki Martín
XQuery XML
for $b in doc("libros.xml")//libro <librocaro>
where $b\precio > 40 <titulo>La sombra del viento</titulo>
return </libro>
<librocaro> <librocaro>
{$b/titulo} <titulo>La colmena</titulo>
</librocaro> </libro>
๏ En este ejemplo, en la tupla $b se recogen todos los libros, y la clausula where deja en la
tupla $b los libros que sean de precio mayor de 40
CLAUSULA ORDER BY
๏ order by ordena el contenido de la tupla resultante de la expresion xQuery, justo antes de ejecutar el Return
order by criterio
๏ el criterio de ordenación puede ser uno de los elementos de la tupla, varios de los elementos (separados por
comas) o cualquier expresion con funciones de cadena o numericas que se pueda ordenar
©Iñaki Martín
๏ La ordenación será alfabética si se manejan cadenas, o numérica si son valores numéricos

XQuery XML
for $b in doc("libros.xml")//libro <librocaro>
where $b\precio > 40 <titulo>La colmena</titulo>
order by $b\titulo </libro>
return <librocaro>
<librocaro> <titulo>La sombra del viento</titulo>

{$b/titulo} </libro>
</librocaro>
๏ En este ejemplo, en la tupla $b se recogen todos los libros, y la clausula where deja en la
tupla $b los libros que sean de precio mayor de 40, y posteriormente, se ordenan los
resultados por el titulo, alfabéticamente.
Origen de los datos

๏ Los datos que se evaluan se extraen desde las cláusulas for y let, de estas dos maneras (principalmente):
‣ con la función doc(URI) se devuelve el nodo documento, o nodo raíz, del documento referenciado por
un identificador universal de recursos (URI)
‣ con la función collection(URI) se devuelve una secuencia de nodos referenciados por una URI, sin
©Iñaki Martín
necesidad de que exista un nodo documento o nodo raíz. Esta es la función más habitual para
acceder a la información almacenada en una base de datos que tenga capacidad para crear
estructuras de datos XML.
If then
XML
๏ XQuery también soporta expresiones condicionales del tipo “if-then-else”. <libro>
<titulo>La sombra del viento</titulo>
๏ Su uso es muy similar a lde otros lenguajes de programación <autor>
<nombre>Carlos Ruiz</nombre>,
if (condicion) </autor>
</libro>
then instruccionesdesalida <libro>
©Iñaki Martín
else instruccionesdesalida <autor>
XQuery <nombre>Carlos Ruiz</nombre>,
for $b in doc("libros.xml")//libro </autor>
return </libro>
<libro> <libro>
{$b/titulo} <titulo>Recuerdos inmortales</titulo>
<autor>
{ <nombre>Sergio</nombre>,
for $a at $i in $b/autor
where $i <= 2 </autor>
return <autor>{$a/nombre, ", ", $a/apellido}</autor> <autor>
} <nombre>Pedro</nombre>,
{ <apellido>Batista</apellido>
if (count($b/autor) > 2) </autor>
then <autor> (y otros autores) </autor> <autor> (y otros autores) </autor>
else () </libro>
<libro>
} <titulo>La colmena</titulo>
</libro> </libro>
๏ A diferencia de la mayoría de los lenguajes, la cláusula else es obligatoria y debe aparecer siempre
en la expresión condicional. El motivo de esto es que toda expresión en XQuery debe devolver un valor.
๏ Si no existe ningún valor a devolver al no cumplirse la cláusula if, se devuelve una secuencia vacía
con ‘else ()’
Cuantificadores existenciales (some y every)

๏ XQuery dispone de dos cuantificadores existenciales llamados some y every
‣ usaremos some en consultas que devuelvan algún elemento que satisfaga la condición,
‣ usaremos every enonsultas que devuelvan los elementos en los que todos sus nodos satisfagan la condición
๏ some y every que se añaden en la condicion where, con este formato (normalmente):
©Iñaki Martín
where some $a in expresionXPath where every $a in expresionXPath

satisfies (condicion) satisfies (condicion)
XQuery
XML
for $b in doc("libros.xml")//libro

where some $a in $b/autor <titulo>Marina</titulo>
satisfies ($a/apellido="Zafon")
return $b/titulo
XQuery
for $b in doc("libros.xml")//libro XML

where every $a in $b/autor <titulo>La sombra del viento</titulo>
satisfies ($a/apellido="Zafon") <titulo>Marina</titulo>
return $b/titulo <titulo>La colmena</titulo>
๏ Advertir que se ha añadido al final un libro que no es de Zafón.

Realmente, el libro La Colmena no tiene autor (en nuestro xml :-)
Cuando un cuantificador universal se aplica sobre un nodo vacío, siempre devuelve cierto
๏ Otro ejemplo. La siguiente consulta devuelve los títulos de los libros que mencionen “Unix” y “programing” en el
mismo párrafo. Si el libro tiene más de un párrafo solo es necesario que aparezca en, al menos, uno de ellos.
Esto lo indicamos con la palabra reservada “some” justo a continuación de where.
©Iñaki Martín
๏ Otro ejemplo. La siguiente consulta devuelve los títulos de los libros que tengan un autor que contenga la letra
"r". Todos los autores han de cumplis la regla, por lo que no se muestra el libro "Recuerdos inmortales" ya que
uno de sus autores no tiene una "r" en su nombre.
๏ Sí se muestra “La colmena" pues no tiene valor para comparar el nombre del autor
๏ En este ejempo ademas se hace uso de una funcion, contains(), que evalua si un valor alfanumérico contiene
©Iñaki Martín
internamente una subcadena, pasandosele ambas cosas como argumento. Mas adelante se hace una
descripcion de ésta y más funciones disponibles
XQuery
XML
where every $p in $b//autor/nombre <titulo>La sombra del viento</titulo>
satisfies (contains($p,"r") ) <titulo>La colmena</titulo>

return $b/titulo
Operadores
๏ XQuery dispone de varios operadores para comparar y operar con los valores que evalua o devuelve
El resultado de un operador aritmético en el que uno, o ambos, de los operandos sea una cadena vacía es
una cadena vacía. Como regla general el funcionamiento de las cadenas vacías en XQuery es análogo al funcionamiento de los valores nulos en SQL.
©Iñaki Martín
๏ Estos son los principales operadores:

matemático + suma
matemático - resta
matemático * multiplicacion
matemático div división. Se usa div ya que el símbolo ‘/’ es necesario para indicar caminos.
matemático idiv división entera. ‘idiv’ se usa en divisiones con enteros en las que se ignora el resto.
matemático mod resto de una division entera
asignacion := asigna un valor a una variable: $var = 2345
relacional = comparacion por igualdad (es igual que )
relacional != comparacion por desigualdad (es distinto que)
relacional < comparacion por minoría (es menor que)
relacional > comparacion por mayor (es mayos que)
relacional <= es menor o igual que
relacional >= es mayor o igual que
negacion. Recibe como argumento un valor booleano (una expresion o un valor true o false) y devuelve lo
relacional not() contrario. Tambien da true si se evalua una cadena de longitud 0, el numero 0 o una secuencia vacia
orden << Los operadores de comparación de orden de nodos comparan pares de nodos según sus posiciones en un
documento. En este caso, da true si el primer operando predece (esta antes) que el segundo
orden >> Los operadores de comparación de orden de nodos comparan pares de nodos según sus posiciones en un
documento. En este caso, da true si el primer operando sigue (esta despues) que el segundo
secuencia | Unión. Procesa dos secuencias de nodos (una antes y otra despues del operador) y devuelve una secuencia con
todos los nodos existentes en las dos secuencias originales
©Iñaki Martín
Ejemplo: sacar los apellidos tanto de los autores como XML

de los editores de libros: <apellido>Argensol</apellido>
XQuery <apellido>Martinez</apellido>
for $l in doc("libros.xml")//(autor | editor)/apellido <apellido>Seros</apellido>
order by $l <apellido>Zafon</apellido>
return $l <apellido>Zafon</apellido>
secuencia intersect intersección: Recibe dos secuencias de nodos como operandos y devuelve una secuencia conteniendo todos
los nodos que aparezcan en ambos operandos.
secuencia except sustracción: recibe dos secuencias de nodos como operandos y devuelve una secuencia conteniendo todos los
nodos del primer operando que no aparezcan en el segundo operando.
Ejemplo: sacar todos los atributos del libro "Marina", menos el precio XML
XQuery <libro anio="1997">

for $b in doc("libros.xml")//libro <autor>
where $b/titulo = "Marina" <nombre>Carlos Ruiz</nombre>
return </autor>
<libro> <editorial>Planeta</editorial>
{ $b/@* } </libro>
{ $b/* except $b/precio }
</libro>
Funciones
๏ XQuery dispone de varias funciones de todo tipo, de las cuales explicamos las más significativas
Tipo Funcion Significado y uso
redondeo floor() redondea con la precisión indicada al decimal inmediatamente inferior al indicado
redondeo ceiling() redondea con la precisión indicada al decimal inmediatamente superior al indicado
redondeo round() redondea con la precisión indicada
©Iñaki Martín
agrupacion count() cuenta cuantos elementos contiene al secuencia pasada como argumento
agrupacion min() indica el elemento menor de los que contiene al secuencia pasada como argumento
agrupacion max() indica el elemento mayor de los que contiene al secuencia pasada como argumento
agrupacion avg() indica la media de los elementos que contiene al secuencia pasada como argumento
agrupacion sum() indica la suma de los elementos que contiene al secuencia pasada como argumento
cadena concat() concatena los elementos pasados como argumentos: concat('a', 'b', 'c')
cadena string.length() calcula el tamanio de una cadena
cadena starts-with() indica true o false si una cadena empieza por cierta subcadena: starts-with('ahora', 'ho')
cadena ends-with() indica true o false si una cadena acaba por cierta subcadena: ends-with('ahora', 'ho')
devuelve una subcadena del primer argumento, desde la posicion del segundo argumento, y de
cadena substring() tamanio indicado en el tercer argumento: substring('halcon', 2, 3) devuelve 'alc'
cadena upper-case() convierte la cadena argumento a mayúsculas
cadena lower-case() convierte la cadena argumento a minúsculas
genéricas disctinct-values() evalua su secuencia argumento y crea una nueva con valores únicos, sin nodos duplicados
genéricas empty() evalua su secuencia argumento y devuelve cierto si la secuencia está vacía.
genéricas exists() opuesta a empty() devuelve cierto cuando una secuencia contiene, al menos, un elemento
sus dos consultas de argumento son iguales si todos los nodos de la primera secuencia aparecen
genéricas deep-equal() en la segunda secuencia en la misma posición que en la primera secuencia.
Ejercicios de ejemplos
✦ Escribir una consulta que obtenga el nombre y el anio de todos los libros publicados por Planeta después de
1997
XQuery
for $b in doc("libros.xml")/tienda/libro
where $b/editorial = "Planeta" and $b/@anio> 1997 XML
return
©Iñaki Martín
<libro anio="{ $b/@anio }"> <libro anio="1999">

{ $b/titulo } <titulo>La sombra del viento</titulo>
</libro> </libro>
✦ Escribir una consulta que obtenga el título de los libros que cuestan menos de 50.00. El resultado sale entre
etiquetas <librobarato>
✦ Advertir que las dos soluciones dan resultados distintos. Para que el resultado salga dentro de otras etiquetas, la
consulta FLWOR ha de estar entre llaves
XQuery XML
for $b in doc("libros.xml")//libro <librobarato>

where $b/precio < 50.00 <titulo>Marina</titulo>
return </librobarato>
<librobarato> <librobarato>
{$b/titulo} <titulo>Recuerdos inmortales</titulo>
</librobarato> </librobarato>
XQuery
<librobarato>{ XML
where $b/precio < 50.00 <librobarato>
return <titulo>Marina</titulo>
$b/titulo <titulo>Recuerdos inmortales</titulo>
</librobarato>
} </librobarato>
✦ Escribir una consulta que, de cada libro almadenado en comentarios, muestra de su correpondiente libro en
"libros.xml" el título del libro, y el precio del libro, y luego, el precio del libro en el archivo "comentarios.xml", con
esta estructura:
<los-libros-con-precios>
<libro-con-precios>
<titulo>xxxxxxxx</titulo>
<precio-concomentario>9999</precio-concomentario>
<precio>9999</precio>
</libro-con-precios>
©Iñaki Martín
...
</los-libros-con-precios>
XQuery
<los-libros-con-precios>{
for $b in doc("libros.xml")//libro, $a in doc("comentarios.xml")//entrada
where $b/titulo = $a/titulo
return
<libro-con-precios>
{ $b/titulo }
<precio-concomentario>{ $a/precio/text() } </precio-concomentario>
<precio>{ $b/precio/text() } </precio>
}</los-libros-con-precios> <los-libros-con-precios>
<libro-con-precios>
<precio-concomentario>66.95</precio-concomentario>
<libro-con-precios>
XML
<libro-con-precios>
</los-libros-con-precios>
✦ Escribir una consulta que, por cada libro con autores, devuelva el título del libro y sus autores. Si el libro no tiene
autores pero sí editor, la consulta devolverá el título del libro y la afiliación del editor.
XQuery XML
<tienda> { <tienda>
<libro>
for $b in doc("libros.xml")//libro[autor]
return <autor>
<libro> <apellido>Zafon</apellido>
©Iñaki Martín
{$b/titulo} <nombre>Carlos Ruiz</nombre>

{$b/autor} </autor>
</libro> </libro>
<libro>
} { <titulo>Marina</titulo>
for $b in doc("libros.xml")//libro[editor] <autor>
return <apellido>Zafon</apellido>
<referencia> <nombre>Carlos Ruiz</nombre>
{$b/titulo} </autor>
</libro>
{$b/editor/afiliacion}
<libro>
</referencia> <titulo>Recuerdos inmortales</titulo>
} </tienda> <autor>
</autor>
<autor>
</autor>
<autor>
</autor>
</libro>
<referencia>
<afiliacion>Historia siglo XX</afiliacion>
</referencia>
</tienda>
✦ Escribir una consulta que muestre los pares de títulos que sean distintos pero tengan el mismo autor o grupo de
autores. Hay que tener en cuenta que el orden de aparición de los autores puede variar de un libro a otro
XQuery XML
<consulta1> { <consulta1>
©Iñaki Martín
for $libro1 in doc("libros.xml")//libro, <libro-par>

$libro2 in doc("libros.xml")//libro <titulo>La sombra del viento</titulo>
let $aut1 := for $a in $libro1/autor <titulo>Marina</titulo>
order by $a/apellidos, $a/nombre </libro-par>
return $a </consulta1>
let $aut2 := for $a in $libro2/autor

order by $a/apellidos, $a/nombre
return $a
where $libro1 << $libro2

and not($libro1/titulo = $libro2/titulo)
and deep-equal($aut1, $aut2) ✦ Mirar el uso en esta consulta de la función
return
<libro-par> deep-equal() encargada de comparar
{ $libro1/titulo } secuencias de nodos. Para la función deep-
{ $libro2/titulo }
</libro-par>
equal() dos consultas son iguales si todos los
}</consulta1> nodos de la primera secuencia aparecen en
la segunda secuencia en la misma posición
que en la primera secuencia.
Crear HTML con XQuery

๏ Es posible utilizar XQuery para trasformar datos XML en otros formatos, como HTML, convirtiéndose XQuery en
una alternativa más sencilla y rápida de usar que XSLT.
HTML
XQuery <html>
<title/>
<html> <head> </head> <title> </title> <body>
<table>
©Iñaki Martín
<body> <table> <tr>

{ <td>
for $b in doc("libros.xml")/tienda/libro <titulo>La sombra del viento</titulo>
</td>
return </tr>
<tr> <td> {$b/titulo} </td> </tr> <tr>
<td>
} <titulo>Marina</titulo>
</table> </body> </td>
</tr>
</html>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html

Guion de Curso HTML CSS Inaki Martin CUR

Cargado por

Información del documento

Título original

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

Guion de Curso HTML CSS Inaki Martin CUR

Cargado por

Copyright:

Formatos disponibles

1.

1 HTML - Conceptos iniciales

<div class="cabecera"> Lista de discos </div>

<div class="cabecera"> Lista de discos </div>

ETIQUETA DE APERTURA CONTENIDO DEL ELEMENTO ETIQUETA DE CIERRE

• Etiquetas de CON CONTENIDO

• Etiquetas de SIN CONTENIDO, tambien llamadas VOID

- <img src=“unaimagen.png" width=“128" height=“128">

Para una relación detallada de cada una de estas decisiones , visitar

- NO inician una linea nueva

<title>TODO supply a title</title>

ETIQUETAS BASICAS HTML

menudo para unificar varios elementos con el mismo estilo. No tiene

<h1>Un valor tamaño cabecera 1 (tamaño maximo)</h1>

TITLE Su valor se muestra al pasar el raton por encima (un tooltip)

<p title="Title se muestra como un tooltip">

<p id="identificador1">Esto es un parrao con identificador</p><br>

<h1 style="color:blue;">Esto es un titulo azul</h1>

<img src=“unaimagen.png" width=“128" height=“128">

Una linea nueva

ETIQUETAS FORMATO DE FUENTE

<b>Este texto saldrá en negrita</b>

<a href="https://www.google.com">Enlace a Google</a>

<a href="https://www.google.com" target="_top" >Enlace se abre a pagina completa </a>

Enlaces dentro de la misma página (anclas)

Imagen que es un enlace

Asi se usa una imagen como un link:

<p><img src="smiley.gif" alt="Carita" style="float:right;width:42px;height:42px;">

TABLE Inicia y acaba una TABLA

UL Inicia y acaba una LISTA NO ORDENADA.

Etiqueta Atributo Acción

IFRAME SRC Origen de la web a mostrar

Se puede usar un iFrame como el destino de un link:

<p><a href="https://es.wikipedia.org/" target="iframe_1">Aqui se abre wikipedia</

Una entity es un caracter que no se puede representar directamente en HTML,

Se pueden representar de dos formas:

&lt; &#60; simbolo menor que ( < )

Ejemplo de web Identificación del tipo Correspondencia con los

LA PAGINA MARAVILLOSA CABECERA <header> </header>

Inicio | Opciones | Descargas Menu de navegacion <nav> </nav>

Lorem Ipsum Alfa Lorem ip

© 2017 Contacto: 910080007 Información institucional y © <footer> </footer>

(han de colocarse mediante div o como cualquier otro elemento)

<header> Define la cabecera de un documento o de una sección.

<section> Define un sección del documento

10. CSS - Inicio

1.2 HTML - Formularios

Ejemplo global de un formulario (sin estilo)

Contraseña: <input type = "password" name = "campo_contrasena" /><br>

Descripcion larga: <br><textarea rows="6" cols="50" name = "campo_descripcion"></textarea><br>

<input type = "checkbox" name = "op1" > Estudiante<br>

Elige un color personal<input type = "color" name = "selectorDeColor" /><br>

• El envío se realiza mediante una acción especifica (p.e., pinchar en un botón)

Etiqueta INPUT, y su atributo type con diferentes valores: “text” “time”

Etiqueta DATALIST “reset” “url”

INPUT TYPE Su valor indica el tipo de la informacion solicitada

Etiqueta Atributo Valor Acción

<!— atributo "name" pone un nombre a la caja o elemento -->

PASSWORD Pide un texto normal en una caja normal, pero al escribirse no

RADIO Ponen varios RADIO BUTTON

Etiqueta Atributo Valor Acción

analizar que opcion esta marcada

SUBMIT Muestra un BOTON DE ENVIO, que envia el formulario a un destino.

< < simbolo menor que ( < )