UF1 Flashcards

Question

25- HIPERVÍNCULOS:

Answer 1

− Son elementos del lenguaje HTML que permiten acceder a otro recurso; es decir, lo podemos definir como un enlace que apunta a otro sitio web, un fichero, una imagen, etc. − La sintaxis que debemos utilizar a la hora de incluir un hipervínculo es: de tal forma que el texto que se encuentre en esa directiva se puede convertir en un hipervínculo. Si hacemos clic con el ratón, nos debe llevar al sitio referenciado. - En el caso en el que el sitio web esté referenciado por un texto, debe aparecer subrayado y de otro color. - El atributo href es el que nos ofrece la posibilidad de crear un hiperenlace. Debemos indicar una URL que va a ser a la que queramos acceder al hacer clic en el hiperenlace. A continuación, si en el elemento no indicamos el atributo href, entonces el elemento representa un marcador de posición que va a ser a la que referencie otro hipervínculo en su atributo href. - Disponemos de otro atributo target (opcional) que va a hacer referencia al destino en el que se va a mostrar la información disponible en esa dirección a la que nos lleva.

Answer 2

- Permiten acceder a un sitio concreto dentro de una página web. Aunque, si queremos hacer uso de los vínculos internos, antes debemos establecer un ancla que es el punto fijo de posición al que accederemos tras un vínculo interno.

Answer 3

1) Absolutas. - Aquellas que enlazan con páginas, cuya dirección absoluta se indica en el atributo href del comando a. - Suelen ser páginas web externas a nuestro proyecto. >a href="http://www.google.es"> - Las direcciones absolutas empiezan a direccionarse desde el comienzo de la ruta que indicamos. 2) Relativas. - Aquellos enlaces cuya dirección relativa se indica en el atributo href del comando a. - Suelen ser enlaces a páginas internas al mismo proyecto. >/a>>a href="./pagina2/pagina2.html"> - Empiezan a direccionarse a partir del directorio actual.

Answer 4

- Pueden estar en diferentes formatos como pueden ser los mapas de bits (archivos PNG, GIF, JPEG), documentos vectoriales de una página (archivos PDF, XML), mapas de bits animados, gráficos de bits animados, etc. Aunque existen otros tipos de archivos que no se consideran imágenes, como pueden ser los archivos PDF de varias páginas, interactivos, documentos HTML, documentos sin formato, archivos SVG. - Gracias al elemento podemos representar una determinada imagen ayudados por su atributo (obligatorio) src. En este caso, indicamos: 1) La dirección válida en la que está la imagen que queremos visualizar. 2) Una ruta relativa si es que la imagen está en alguna parte local. 3) Una URL si se refiere a una imagen externa que se encuentra almacenada en una página web diferente. - El atributo alt nos permite que indiquemos un texto alternativo que sea capaz de representar el contenido de una imagen. Podemos utilizar esta forma en el caso en el que el navegador no pueda visualizar o descargar las distintas imágenes. - Las etiquetas y son novedosas para HTML5, y nos ofrece la posibilidad de agrupar una imagen junto con su información o leyenda.

Answer 5

- Llegado el momento de añadir imágenes a las diferentes páginas web, debemos contar con que los navegadores permiten trabajar con ficheros que tengan formatos JPEG o GIF, ya que son los más recomendables. - Si queremos que una imagen se muestre en una web, en primir lugar necesitamos declarar una etiqueta , que no necesita etiqueta de cierre. Por ejemplo: >img src=”imagen.jpg” alt=”Texto”> - Aparte de estos dos atributos, también contamos con algunos más que mostramos en la siguiente tabla. Atributo Valor Significado ------------------------------------------------------ src URL Indica la URL de la imagen. alt Texto Define un texto alternativo por si no se encontrara la imagen deseada. Align Top, middle, Alinea la imagen respecto al bottom, Left, Right, texto, tanto en sentido center horizontal como en sentido vertical. Border Número Pone un borde o marco a la imagen. Se expresa en píxeles. Height Número % Especifica la altura que debe tener la imagen. Se expresa en píxeles o porcentaje. Width Número % Especifica el ancho que debe tener la imagen. Se expresa en píxeles o porcentaje. hspace Número Especifica en píxeles la separación horizontal entre el texto y la imagen. vspace Número Especifica en píxeles la separación vertical entre el texto y la imagen.

Answer 6

- Nos permiten definir distintas zonas “pinchables” dentro de una imagen. De tal forma que el usuario puede hacer clic sobre las zonas definidas y, cada una de estas, puede apuntar a una URL distinta. - Las diferentes zonas que se definen en una imagen se van creando mediante rectángulos, círculos y polígonos. A la hora de crear un mapa de imagen: 1) En primer lugar, insertamos la imagen original mediante la etiqueta . 2) A continuación, utilizaremos la etiqueta (map) para definir las diferentes zonas o regiones de la imagen. Cada una de estas zonas, la definiremos con la etiqueta (area). - Estructura: a) Mapa de imagen (map) b) Atributos comunes Básicos, i18n y eventos. > href = “url” –URL a la que se accede al pinchar sobre el área. > nohref = “nohref” – Se emplea para las áreas que no son seleccionables. > shape = “default | rect | circle | poly” – Indica el tipo de área que se define (toda la imagen, rectangular, circular o poligonal). c) Atributos específicos (area) > Name = “texto”. Nombre que identifica de forma única al mapa definido (es obligatorio indicar un nombre único). > coords = “lista de números” – Se trata de una lista de números separados por comas que representan las coordenadas del área. Rectangular = X1, Y1, X2, Y2 (coordenadas X e Y del vértice superior izquierdo y coordeandas X e Y del vértice inferior derecho). Circular = X1, Y1, R (coordenadas X e Y del centro y radio del círculo). Polígonal = X1, Y1, X2, Y2, ..., XnYn (coordenadas de los vértices del polígono. Si las últimas coordenadas no son iguales que las primeras, se cierra automáticamente el polígono uniendo ambos vértices). d) Tipo de elemento Bloque y en línea. e) Descripción Se emplea para definir mapas de imagen.

Answer 7

A) Listas numeradas: - Ofrece la posibilidad de poder representar los diferentes elementos de una lista enumerándolos a todos dependiendo del lugar que ocupen. ``` - En las listas numeradas, utilizan las directivas:

Apartado 1
Apartado 2

``` - La directiva

tiene disponibles los siguientes parámetros: > start = numero. Permite seleccionar el número que deseemos que sea el primero de la lista. > Type = tipo. Nos permite seleccionar el tipo de numeración que deseemos. - En HTML5, podemos diferenciar entre los siguientes tipos: 1. Expresa números desde 1, 2, 3, etc. a. Expresa letras minúsculas a partir de a, b, c, etc. A. Expresa letras mayúsculas a partir de A, B, C, etc. i. Expresa números romanos desde i, ii, iii, etc. I. Expresa números romanos en mayúscula desde I, II, III, etc. __________________ B) Listas no numeradas: - Ofrece la posibilidad de poder representar los diferentes elementos de una lista sin enumerar independientemente del lugar en el que se vayan a almacenar. Lo que sí lleva es una especie de “viñeta” para marcar la lista. ``` - En las listas no numeradas, utilizan las directivas:

Apartado 1
Apartado 2

``` - La directiva

Coche: Vehículo de cuatro ruedas
Moto: Vehículo de dos ruedas

Answer 8

| - Esta marca sirve para agrupar varios elementos dentro de un bloque y permite asignarle un identificador.

Answer 9

- Son elementos de HTML que nos ofrecen la posibilidad de representar datos de una o varias dimensiones (matriz) con la información distribuida en filas y columnas. - Uno de los objetivos que pretende HTML5 es conseguir separar el contenido que se pretende mostrar de una página web, de la forma que lo ha presentado, mediante hojas de estilo CSS. - A la hora de definir una tabla, debemos hacerlo con la siguiente directiva: >table> ... >/table> - Hasta el momento, y para versiones anteriores a HTML5, se han podido utilizar distintos atributos como: align y bgcolor. Sin embargo, desde la aparición de HTM5, soporta los siguientes atributos: > summary, realiza el resumen y la estructura de la tabla para facilitar la tarea de los buscadores. > width, indica el ancho total de la tabla en distintas unidades. Podemos hacerlo en píxel (px) o porcentaje (%). > frame, indica el nombre del marco en el que se puede visualizar la tabla. > rules, especifica las líneas de división que serán visibles. > border, determina el ancho del borde anterior. > cellspacing, especifica el espacio existente entre las distintas celdas. > cellpadding, especifica el espacio existente entre el borde de las celdas y el contenido. - Si tenemos una tabla, el primer elemento que podemos representar es el que aparece dentro de la etiqueta: (caption)(/caption) Representa el título de la tabla que lo contiene.

Answer 10

- Es posible combinar un conjunto de celdas de una determinada tabla por lo que van a afectar a su definición: >colgroup> Representa las columnas de una tabla >/col> Indica el número de columnas que tiene una tabla - Disponemos de un conjunto de elementos que nos permiten referirnos a las diferentes partes de una tabla en el lenguaje HTML: >thead> Cabecera >tbody> Bloques de filas >tfoot> Pie

Answer 11

- Las tablas se omponen de un número de filas y columnas que se pueden representar a través de la directiva: >tr> >/tr> Que permiten definir una nueva fila. - Después, cada fila, cuenta con una serie de elementos: (td> >/td> Nos permiten ir generando las diferentes columnas con su valor asignado dentro deuna determinada fila. - Realiza columnas de cabecera y contiene un texto centrado y en negrita. >th> >/th> Cada dato de una fila y una columna determinada, contiene un dato que denominamos valor.

Answer 12

- Los utilizaremos cuando necesitamos recoger la información específica de un objetoen cuestión. - Están compuestos, entre otros, por diferentes elementos como las cajas de texto (textBox), casillas de verificación (checkbox), casillas de opción (radio button) , listas desplegables y subformularios. - Toda la información que recogen los formularios debe tratarse por archivos que se deben implementar por el propio desarrollador. De esta forma, lo almacenaremos en bases de datos diseñadas previamente que, en este manual, no vamos a detallar ya que solo nos centraremos en la definición y diseño de los formularios. - Esta información también puede ser enviada o procesada mediante email o servidor web a través de un botón de envío (submit).

Answer 13

- Un formulario se define mediante el comando: >form> ... >/form> - Por tanto, dentro de este bloque, debemos implementar todos los elementos necesarios que hemos enumerado previamente. - Esta marca form consta de varios atributos bastante importantes, como pueden ser los atributos: 1) action: indica el lugar al que se envían los datos. 2) method: indica el método de transferencia de los datos en el servidor web. Los valores que puede tomar este atributo pueden ser: 2. 1) post. Para el envío de los datos al usuario de forma codificada. 2. 1) get. Para el envío de los datos a una dirección web. 3) target: se utiliza para indicar o especificar dónde vamos a mostrar la respuesta del formulario. Los diferentes valores que puede tomar este atributo son: >> “_blank”. Se muestra en una ventana nueva. >> “_self”. Se muestra en la misma ventana del formulario. >> “_parent”. Se muestra en la ventana padre, es decir, la que precede al formulario. > name: identifica al formulario mediante el nombre. De esta forma, podemos llamarlo desde otro archivo. Recomendamos que el nombre de formulario sea único para facilitar su tratamiento.

Answer 14

- Dentro de un formulario podemos tener distintas directivas que van a componer todo el diseño. Para comenzar, podemos agrupar un conjunto de elementos bajo un nombre, utilizando el comando . (fieldset) (/fieldset). - A continuación, y mediante las etiquetas: (input) (/input) - Vamos a poder crear varios tipos de elementos dentro de un formulario, dependiendo del valor que asignemos al atributo type. Lo primero que recomendamos dentro de esta marca es especificar el valor del atributo name, ya que de esta forma, podemos identificar el elemento. - Seguidamente, mediante el atributo type, elegiremos el tipo de elemento que deseamos tener en el formulario. - En este caso, definiremos un campo de texto de grandes dimensiones para que el usuario tenga la posibilidad de escribir todo lo deseado sin ningún tipo de limitaciones. Este comando se utiliza en muchos formularios cuando escribimos en un campo de observaciones. (textarea) (/textarea) - Los atributos de esta marca serían los siguientes: 1) name. Identifica el nombre del área de texto. 2) cols. Número de caracteres que puede contener cada línea. 3) rows. Número de líneas del área de texto. 4) readonly. Para impedir que el usuario pueda editar este campo. - >button> >/button> De esta forma insertamos un botón. Aunque también podemos hacerlo con el comando input. Podemos añadirle el atributo type, donde podemos indicar el tipo de botón que deseemos, (submit | reset | button). ``` - Este bloque de comandos se utiliza para definir una lista desplegable con opciones. Tendremos tantas marcas options como opciones deseemos tener en nuestra lista. >select> >options> >/options> >/select> ``` - Asignamos un título o etiqueta a un determinado campo del formulario. >label> >/label> - Agrupa distintos elementos del formulario por distintas temáticas. >fieldset> >/fieldset>

Answer 15

- Los marcos ofrecen la posibilidad de poder mostrar varios archivos HTML en la misma ventana del navegador. - También tenemos la posibilidad de que estos framesinteractúen como, por ejemplo, cuando presionamos un enlace en un frame para conseguir acceder a él, contamos con la posibilidad de cargar una página en otro frame diferente. - Es recomendable la utilización de frames cuando tengamos una situación que lo aconseje. El uso de los frames hace que los sitios sean menos accesibles y, por tanto, también es más difícil imprimir el contenido que tengan.

Answer 16

``` Prueba de frames >html> >head> >title>Prueba de frames>/title> >/head> >frameset cols=”20%,80%”> >frame src=”página2.html”> >frame src=”página3.html”> >noframes> >p>El navegador no soporta frames>/p> >/noframes> >/frameset> >/html) ```

Answer 17

>> >iframe> >/iframe> Inserta un marco en un documento. Suele utilizarse para insertar publicidad o páginas de colaboración. >> >object> >/object> Inserta un objeto en un documento. El tipo del objeto viene determinado por el atributo, pudiendo ser: imágenes, aplicaciones de Java, animaciones u otros documentos HTML. El atributo type es el encargado de determinar el objeto. Dependiendo de su sintaxis, podemos especificar, tanto la categoría como el formato del archivo. Por ejemplo, audio/mp3, vídeo/mpg, etc. Además de este atributo, también podemos detallar, en los atributos height y width, tanto el ancho como el alto del objeto. Y, para finalizar, en el atributo data, podemos determinar la ruta del objeto a visualizar, bien sea de audio o de vídeo. >> >param> Este comando no tiene etiqueta de cierre y permite inicializar las variables objeto. Presenta la siguiente sintaxis: >param name=”Nombre del parámetro” value = “Valor del parámetro”>

Answer 18

- Debido al rápido crecimiento de la web y a cómo van evolucionando las versiones HTML, aparece la necesidad de estandarizarlo para que autores y navegadores reconozcan el tipo de versión de HTML que pueden utilizar. - HTML llegó a convertirse en estándar en 1995 y, con el paso de los años, ha estado en un desarrollo constante de evolución. Hace algunos años, la versión de HTML recomendada por el W3C era HTML 4.01. - Cuando diseñamos una página web es conveniente especificar la versión de HTML con la que vamos a trabajar, y lo haremos utilizando en la etiqueta en la primera línea. Gracias a esta información, el navegador puede interpretar de forma correcta. - HTML 4.01 cuenta con tres variantes disponibles de DTD: > HTML 4.01 Strict (Strict DTD). Es la más restrictiva de todas ya que no permite la utilización de etiquetas que estén anticuadas, solo permite hacer uso de las propias que están definidas en HTML 4.01. Si queremos utilizar esta versión, escribimos en la primera línea la siguiente instrucción: >!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd> > HTML 4.01 Transitional (Transitional DTD). > HTML 4.01 Frameset (Frameset DTD).

Answer 19

- En 1998 aparece por primera vez XTML 1. 0 de forma oficial. En enero del 2000, y tras una serie de mejoras, se convierte en uno de los lenguajes más recomendados en la creación de páginas web. - XML es un lenguaje que deriva de SGML, aunque resulta bastante más sencillo. Su objetivo principal es transmitir los datos a través de la web con una determinada estructura.

Answer 20

El lenguaje de marcas es el más utilizado para la creación de páginas web por la facilidad de poder escribir el código en cualquier herramienta de procesador de texto. En este apartado, vamos a detallar los distintos editores de los que disponemos, desde los más básicos hasta los más sofisticados para implementar dicho código.

Answer 21

El lenguaje de marcas es el más utilizado para la creación de páginas web por la facilidad de poder escribir el código en cualquier herramienta de procesador de texto. En este apartado, vamos a detallar los distintos editores de los que disponemos, desde los más básicos hasta los más sofisticados para implementar dicho código.

Answer 22

- Debido al gran auge y complejidad en el que se ha convertido el desarrollo de las páginas web desde su existencia, cada vez es más complicada la implementación del código en este lenguaje de marcas, ya que en nuevas versiones aparecen nuevos comandos, con sus correspondientes atributos y valores, para tratar nuevos conceptos que el mercado obliga a insertar. - El código de una página web conlleva numerosas líneas de código, interacción con otros lenguajes, incrustaciones de códigos y enlaces externos, etc. Por todas estas características, cada vez resulta más complicada la identificación de las distintas marcas, y para el desarrollador es una tarea árida y complicada. - Para solucionar estos inconvenientes, aparecen los editores de texto avanzados con una interfaz amigable y sencilla de utilizar; mediante distintos colores, podemos diferenciar cada elemento de una parte del código en lenguaje HTML. - De esta forma, facilita bastante la tarea al desarrollador y a cualquier técnico que necesite visualizarlo. - Otra de las ventajas que nos ofrecen los editores avanzados es que, ante cualquier incidencia o error, provee de una serie de opciones para su fácil identificación. - Entre los ejemplos más conocidos, destacamos NotePad++ y Sublime Text, editores muy utilizados por la comunidad desarrolladora de código y con la característica de ser herramientas de código libre. Además, aunque sea de licencia de pago podemos mencionar Adobe Dreamweaver.

Answer 23

- Una vez que ya tenemos diseñado todo el código de HTML con cualquier editor de los mencionados en el apartado anterior, el último paso que nos queda es la visualización de dicho código en cualquier navegador de internet. - Para crear cualquier página web, solo nos hace falta un editor y navegador web. - Existen distintos navegadores actualmente en el mercado, entre los que destacamos: Internet Explorer, Mozilla FireFox y Google Chrome. - A medida que avanzamos en nuevas actualizaciones, estos navegadores facilitan la visualización del código de la página y la identificación de algún error que pueda existir en ella.

Answer 24

- CSS (Cascading Style Sheets), las Hojas de Estilo en Cascada son un lenguaje de presentación que resultan imprescindibles para poder crear sitios web de calidad. - Uno de sus principales objetivos es poder trabajar el aspecto y formato de los documentos, y así dejar a HTML fuera de las tareas de presentación. >body> ... >\body> - Este lenguaje presenta numerosas ventajas al utilizar separación entre contenidos y presentación. - Entre las principales ventajas que se dan cuando trabajamos con CSS podemos destacar: * Necesitamos menos código a la hora de escribir. * Facilidad a la hora de generar código y mantenerlo. * Documentos más legibles.

Answer 25

- Existen tres formas diferentes de añadir hojas de estilo a los documentos HTML. 1) Forma 1: CSS en línea >body> >p style=”font-family: Verdana; font-size: medium;”> HOLA MUNDO>/p) >/body> Puede utilizarse para seleccionar el estilo particular de línea. 2) Forma 2: CSS interno >html> >head> >style type=”text/css”> body {font-family: Courier New;} h1 {font-family: Arial; font-size: x-large;} p {font-family: Verdana; font-size: medium;} >/style> >/head> >body> >h1>Tipo de Fuente Arial y tamaño grande>/h1> >p>Tipo de Fuente Verdana y tamaño mediano>/p> >/body> >/html> Situado dentro de la etiqueta . Podemos utilizarlo para indicar los estilos propios de esta página que se corresponden con los estilos globales propios del sitio web. 2) Forma 3: CSS externo - Primero, creemos el archivo.css en una carpeta como /css. body {margin: 0px;} td {color: #000000; font-size: 12px;} a {color: #FF6600; font-weigth: bold;} a:hover {color: #3366CC;} - Y después, vamos a insertar el enlace en cada documento. >head> >link rel=”stylesheet” type=”text/css” href=”/css/estilos.css”> >/head> 3) Otra forma que tenemos de unir archivos es mediante la regla @import. >style type=”text/css”> @import “/css/estilos.css”; >/styles> - Podemos utilizarla para indicar aquellos estilos globales que pueden compartir entre todas las páginas web del sitio. Si se produce colisión, la prioridad debe ser: 1) css en línea +prioridad 2) css interno .... 3) css externo -prioridad - En las tres formas que hemos analizado, en caso de que se produzca repetición, debe ser la última regla la que se aplique. - Si queremos dar más prioridad, podemos hacerlo haciendo uso de la palabra reservada !important.

Answer 26

- Mediante las reglas podemos unificar selectores más una declaración situada entre llaves. Se componen de una o varias parejas de propiedades con un valor y terminadas en punto y coma. Selector{propiedad:valor; propiedad:valor} p {Font-family: Verdana; Font-size: médium;} - Podemos agrupar las diferentes reglas si comparten declaración o el selector: h1 {font-family: Verdana; color: red;} h2 {font-family: Verdana; color: red;} - Se resumen y queda de la siguiente forma: h1, h2 { font-family: Verdana; color: red;} - Si tienen el mismo nombre (selector) pero no son iguales sus propiedades, sería: h1 {font-family: Verdana;} h1 {color: red;} - Se resumen y queda de la siguiente forma: h1 { font-family: Verdana; color: red;} ``` - Los comentarios se indican: /*.....*/ ```

Answer 27

> Universal: Permite seleccionar todos los elementos de una página. * {margin: 0px} > De tipo: Permite seleccionar todos los elementos de una página cuya etiqueta sea igual que la del selector. p {font-family: Verdana; color: red;} > Descendiente. Supongamos que A es un elemento que desciende de B siempre que A se encuentra entre la apertura y cierre de B. Estos selectores se construyen a partir de dos o más selectores simples y separados por un espacio en blanco. p a {font-size: 50px} > Hijo: Nos permite seleccionar el primer descendiente de un elemento (hijo). >p> a {font-size: 50px} > Adyacente: Se utiliza para poder seleccionar aquellos elementos que sean hermanos entre sí, es decir, que todos tienen el mismo padre. h1 + h2 {Font-size: 50px} > Atributos: Tiene cuatro formas diferentes de seleccionar los elementos: − [atributo] Elementos que tienen el mismo atributo, sin importar su valor. − [atributo = valor] Elementos que tienen ese mismo atributo con el valor que se pasa. − [atributo ~= valor] Elementos que tienen ese mismo atributo con, al menos, un valor igual al especificado. − [atributo |= valor] Elementos que tienen ese mismo atributo y la palabra debe comenzar por el valor que se pasa. > De clase: Ofrece la posibilidad de seleccionar una determinada instancia de un elemento en concreto. Veamos un ejemplo en el que existen dos instancias de un mismo elemento

, y para poder diferenciarlos, debemos hacer uso del atributo.

Texto1

Texto2

Texto3

Podemos construir de la siguiente forma: p. grande {font-size: 50px} Visualiza solo el Texto2 grande. > ID: Nos ofrece la posibilidad de seleccionar una sola línea de una página completa. #peque {font-size: 8px} Visualiza el Texto3 en tamaño pequeño. > Pseudo-clases Permite seleccionar elementos según las indicaciones del usuario. Algunas de las pseudo-clases más frecuentes son las que se aplican a: − :link. Los enlaces que nunca se visitan. − :visited. Los enlaces que se han visitado una vez como mínimo. − :hover. Los elementos indicados por el usuario, pero sin necesidad de ser activados. − :active. Los elementos que se activan. − :focus. Los elementos que tiene el foco. Algunos ejemplos, pueden ser: a: visited {color:black;} a: active {color:red;} > Pseudo-elementos Algunos de los pseudo-elementos principales son: − :first-line. Para referirnos a la primera línea de un texto. − :first-letter. Para referirnos a la letra de un texto. − :before. Genera texto antes del contenido de un elemento. − :after. Genera texto después del contenido de un elemento. Ejemplo: h1: before {content: “Inicio ---”; } h1: after {content: “ --- Fin”; } p: first-line {font-size: 20px; } p: first-letter {font-size: 3em; } ```

Texto1

Primera linea
Segunda linea
Tercera linea
Cuarta linea

```

Answer 28

El principal elemento del modelo de cajas de CSS, ya que confecciona en su totalidad la página web que estamos desarrollando. Los elementos que deseamos añadir al documento HTML se van a representar de forma automática a través de cajas rectangulares. En un comienzo, son cajas invisibles a no ser que añadamos algún tipo de borde o color de fondo. Las diferentes partes que podemos encontrar en una caja, junto con el orden en el que aparecen, son: 1. Contenido (content): texto, imágenes, vídeos, listas del elemento. 2. Relleno (padding): espacio que queda entre el contenido y el borde. 3. Bordes (border): la línea que agrupa el contenido junto con su relleno. 4. Imagen de fondo (background-image): es la imagen que se visualiza detrás del contenido y del espacio de relleno. 5. Color de fondo (background-color): el color que se visualiza detrás del contenido y del espacio de relleno. 6. Margen (margin): es el espacio que queda libre entre la caja y el resto de cajas adyacentes. o Padding y margin son transparentes. o En el espacio que ocupa margin, se visualiza el color o la imagen de fondo. o El espacio que ocupa margin muestra el color o la imagen de fondo del elemento padre. o Si ningún elemento padre tiene asignado un color o imagen de fondo, se va a mostrar el correspondiente a la página. o Si en una caja definimos un color y una imagen de fondo, tiene más prioridad la imagen, ya que se va a mostrar antes. o Si se da el caso en el que la imagen de fondo no cubra toda la caja del elemento por completo, se visualizará el color de fondo correspondiente de esas determinadas zonas.

Answer 29

- Podemos controlar el ancho y el alto de una caja mediante width y heigth. - Los valores que pueden tomar, podemos indicarlo mediante: (numérico px)| (numérico %) |inherit|auto - Donde: (numérico px) permite establecer los valores fijos de ancho y alto (en pixeles) de la caja. (numérico %) permite establecer los valores fijos de ancho y alto (en porcentaje) del elemento padre. (inherit) permite establecer los valores fijos de ancho y alto que se heredan del padre. (auto) es el valor por defecto que permite determinar que el navegador sea quien calcule los valores de ancho y alto dependiendo del espacio que quede disponible en la página. ``` Por ejemplo: #menu {width: 180px; heigth: 600px;} >div id="menu"> ... >/div) ``` - Podemos aplicar el ancho y el alto a todos los elementos de bloque, a las diferentes imágenes y a las columnas de una tabla determinada.

Answer 30

- MARGIN es una propiedad “shorthand” que nos permite centrar de forma horizontal una caja. - Podemos distinguir entre las propiedades: margin, margin-top, margin-rigth, margin-botton, margin-left - Que significan: margen, margen superior, derecho, inferior, izquierdo. - Y puede tomar los valores: (numérico px, em) | (numérico %) | inherit|auto o Se puede aplicar a todos los elementos menos a margin-top y margin-botton. _______________ PADDING es otra propiedad que utilizaremos para los diferentes tipos de relleno. - Podemos distinguir entre las propiedades: padding, padding-top, padding-rigth, padding-botton, padding-left - Que significan: relleno, relleno superior, derecho, inferior, izquierdo. - Y puede tomar los valores: (numérico px, em) | (numérico %)|inherit|auto o Se puede aplicar a todos los elementos excepto cabeceras y pies de tablas.

Answer 31

- Presentan tres tipos de propiedades para los bordes, como son: ancho, color y estilo. o Ancho: Podemos distinguir entre las propiedades: border-width, border-top-width, border-rigth-width, border-bottom-width, border-left-width. Que significan: ancho de borde, ancho de borde superior, ancho de borde derecho, ancho de borde inferior, ancho de borde izquierdo. Y puede tomar los valores: (numérico px, em) | thin | médium | thick | inherit o Se puede aplicar a todos los elementos. o Color - Podemos distinguir entre las propiedades: border-color, border-top-color, border-rigth-color, border-bottom-color, border-left-color. Que significan: color de borde, color de borde superior, color de borde derecho, color de borde inferior, color de borde izquierdo. Y puede tomar los valores: (color) | transparent|inherit o Se puede aplicar a todos los elementos. o Estilo Podemos distinguir entre las propiedades: border-style, border-top-style, border-rigth-style, border-bottom-style, border-left- style. Que significan: estilo de borde, estilo de borde superior, estilo de borde derecho, estilo de borde inferior, estilo de borde izquierdo. Y puede tomar los valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | |inherit o Se puede aplicar a todos los elementos. o Si el valor del estilo se corresponde con none o hidden, no va a aparecer borde.

Answer 32

o Color - En CSS, podemos especificar los colores de dos formas diferentes: — Palabras reservadas Aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blue, blueviolet, Brown, coral, cyan, darkblue, darkmagenta, ... Un ejemplo podría ser: p {color: yellow} — Números hexadecimales en el modelo RGB Hace referencia al modelo de colores aditivo, con el que vamos a poder ir obteniendo colores utilizando la mezcla de los tres colores primarios: red, green y blue con sus cantidades correspondientes. ``` Un ejemplo sería: p {color: #ff0} p {color: #ffff00} p {color: rgb (255, 255, 0)} p {color: rgb (100%, 100%, 0%)} Estas cuatro formas de representar colores son iguales y equivalen al color amarillo. ``` o Fondo Solo vamos a poder apreciar el color de fondo en las zonas que ocupe el contenido y en su relleno. Para elegir un determinado color para una página entera, debemos utilizar el elemento para aplicar el fondo. Debemos considerar una serie de propiedades fundamentales cuando trabajamos con el fondo: − Color de fondo (background- color) Puede tomar los valores: | transparent | inherit o Se puede aplicar a todos los elementos. o Primer valor: transparent. − Imagen de fondo (background- image) Puede tomar los valores: |none | inherit o Se puede aplicar a todos los elementos. o Primer valor: none. − Repetir imagen de fondo hasta completar elemento (background- repeat) Puede tomar los valores: repeat | repeat-x | repeat-y | no repeat | inherit o Se puede aplicar a todos los elementos. o Primer valor: repeat. − Desplazamiento de la imagen desde la esquina superior izquierda al sitio especificado mediante desplazamiento horizontal y vertical (background-position) Puede tomar los valores: ((num%) | (medida) | left | center | rigth | inherit) y ((num%) | (medida) | top | center | botton | inherit) o Se puede aplicar a todos los elementos. o Primer valor: 0% 0%. Si alguno se omite, asume el valor de 50% por defecto. − Controla el comportamiento de la imagen de fondo respecto a la scroll-bar (background-attachment) Puede tomar los valores: fixed | scroll | inherit o Se puede aplicar a todos los elementos. o Primer valor: scroll.

Answer 33

- En CSS tenemos CINCO FORMAS DIFERENTES PARA PODER ESTABLECER LA POSICIÓN EN PANTALLA de una caja determinada: estático, relativo, absoluto, fijo y flotante. - A la hora de establecer la posición, debemos tener en cuenta una serie de propiedades: position, top, botton, rigth, left y float. ____________________ - Propiedades: 1) Position (Establece la posición de la caja por pantalla). Puede tomar los valores: static | relative | absolute | fixed | inherit o Se puede aplicar a todos los elementos o Valor por defecto: static. 2) Top, botton, rigth, left (establece el desplazamiento vertical u horizontal de la caja). Puede tomar los valores: ||auto|inherit o Se puede aplicar a todos los elementos. o Valor por defecto: auto. 3) Float (establece la posición flotante de la caja) Puede tomar los valores: left | rigth | none | inherit o Se puede aplicar a todos los elementos o Valor por defecto: none. ____________________ - A continuación, vamos a ver los DIFERENTES TIPOS DE POSICIONAMIENTO que nombramos al iniciar este apartado. 1) Posicionamiento ESTÁTICO {position: static} Es el posicionamiento que tienen todos los navegadores por defecto. Si los elementos que debemos posicionar son de: − Bloque. Como por ejemplo un párrafo, vamos a colocar las cajas en forma vertical una debajo de otra. − Línea. Como un hipervínculo, vamos a colocar las cajas una al lado de otra, de forma horizontal, dentro del elemento bloque. − No caben en una sola línea, entonces, deben ocupar las líneas siguientes. >style> ... a {background-color: yellow;} >/style> >body> ... >p> PARRAFO 2: >a href=”#”> Enlace 1 >/a> >a href=”#”> Enlace 2 >/a> >a href=”#”> Enlace 3 >/a> >/p> >/body> 2) Posicionamiento RELATIVO {posición: relative} Desplaza la caja un valor determinado con respecto al posicionamiento estático. >style> ... a {background-color: yellow;} a.abajo {position: relative; top: 1em;} a.mas_abajo {position: relative; top: 2em;} >/style> >body> ... >p> PARRAFO 2: >a href=”#”> Enlace 1 >/a> >a href=”#” class= “abajo”> Enlace 2 >/a> >a href=”#” class=”mas_abajo”> Enlace 3 >/a> >/p> >/body> 3) Posicionamiento ABSOLUTO {position_absolute} Desplaza la caja un valor determinado con respecto al elemento contenedor. Para los desplazamientos, utilizamos top, botton, left rigth y podemos tomar como origen de coordenadas la esquina superior izquierda del primer contenedor que nos encontremos que no sea static. >style> ... a {background-color: yellow; border: 2px solid;} a.absoluto {background-color: orange; position: absolute; top: 30px; left: 30px;} >/style> >body> ... >div>

Esta caja tiene posición normal o estática

Enlace 1 Enlace 2 Enlace 3 >/div> >/body> 4) Posicionamiento FIJO {position fixed}. Es bastante parecido al posicionamiento absoluto, aunque en este caso, cuando el usuario se mueve por la página, las cajas permanecen fijas en el mismo sitio. 5) Posicionamiento flotante {float: left | rigth | inherit | none}. Permite desplazar las cajas hacia la derecha o hacia la izquierda de la línea en la que se encuentran. Las demás cajas siguen permaneciendo en el mismo sitio que deja la caja flotante. Con toda esta serie de cambios, no llega a producirse solapamiento entre las cajas gracias a la propiedad float, que tiene en cuenta todas las cajas flotantes.

Answer 34

- Vamos a definir de forma más específica las cuatro propiedades que nos podemos encontrar en CSS a la hora de visualizar las diferentes cajas. 1) Display Podemos distinguir entre los valores: inline | block | none | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit Que significan: > El valor inline se refiere a cualquier elemento html se muestre como un elemento en línea. Podemos utilizarlo cuando tengamos que mostrar listas de forma horizontal. > El valor block se refiere a que cualquier elemento html se pueda mostrar como elemento de bloque. Podemos utilizarlo en los diferentes enlaces que forman parte del menú de navegación. El valor none permite ocultar de forma completa un elemento desplazándolo de la página. Los demás elementos se mueven para ocupar su posición. 2) Visibility Podemos distinguir entre los valores: visible | hidden | collapse | inherit Que significan: El valor visible es la opción seleccionada por defecto y muestra la caja. El valor hidden oculta la caja sin modificar la posición de las demás. El valor collapse lo podemos aplicar a las diferentes filas y columnas de una tabla y nos ofrece la posibilidad de poder visualizar algunos contenidos de una tabla en cuestión. El valor inherit es heredado. 3) z- index Sirve para asignar la posición de la caja respecto al eje z. De esta forma, conseguiremos ver la profundidad con respecto al documento. Podemos distinguir entre los valores: auto | (no entero) | inherit 4) overflow. Vamos a utilizarlo para controlar que no se produzca desbordamiento del texto en una caja. Podemos distinguir entre los valores: visible | hidden | scroll | auto | inherit Que significan: El valor visible nos permite observar el contenido que se desborda. El valor hidden oculta el texto que se desborda. Scroll deja la tabla con su mismo tamaño y, además, crea las barras de desplazamiento vertical y horizontal. El valor auto también mantiene el tamaño de la caja, aunque en este caso, solo van a aparecer las barras si son necesarias. Y el valor inherit es heredado.

Answer 35

Propiedad: valor Significado -------------------------------------------------------------------------- Color: (color) | inherit Color del texto Font-family: (fuente) | inherit Tipo de fuente de letra Font-size: (absoluto) | (relativo) Tamaño de letra | (em) | (%) Font-weight: normal | bold | Grosor de letra bolder |lighter | 100 | 200 | 300 | 400 | 500... Font-style: normal | italic | Estilo de letra oblique | inherit Font-variant: normal | small-caps Mayúsculas en | inherit pequeño Text-align: Left | Right | center | Alineación horizontal justify | inherit Line-height: normal | (numero) Interlineado | (medida) |(porcentaje | inherit Text-decoration: none | (underline Decoración || overline || line-though || blink ) | inherit Text-transform: capitalize | Transformación uppercase | lowercase | none | inherit Text-shadow: none | h-shadow Sombreado del texto | v-shadow | blur | color ``` Vertical-align: baseline | sub | Alineación vertical super | top | text-top | middle | bottom | text-bottom | | | inherit ``` Text-indent: (medida) | Tabula las primeras líneas (porcentaje) | inherit Letter-spacing: normal | Espaciado entre letras (medida) | inherit White-space: normal | nowrap Tratamiento de los | pre | pre-line | pre- espacios en blanco wrap | inherit Word-spacing: normal | Espaciado entre palabras (medida) | inherit

Answer 36

Answer 37

Propiedad: valor Significado ----------------------------------------------------------------------- Border-collapse: collapse | Determina la fusión de separate | inherit bordes Border-spacing: | inherit Separación de bordes horizontal y vertical Empty-cells: show | hide | Celdas vacías inherit Caption-side: top | bottom | Posición del título inherit

Answer 38

- Todas las propiedades que hemos visto hasta el momento se pueden aplicar a un formulario para mejorar su aspecto y hacer más fácil la entrada de datos. ``` Ejemplo: >style type=”text/css”> ... :focus {background-color: yellow; border: 2px solid;} (/style) ```

Answer 39

- Podemos representar el diseño general de una estructura de página a través de capas

. - Las podemos clasificar según el número de columnas. a) Layout líquido es aquel que tiene un ancho de capas variable, haciendo uso de los porcentajes, para conseguir que se adapte a las medidas de que tenga la pantalla. - Entre sus características más importantes destacamos: > Las capas header, container y footer tienen las propiedades width: 100%, margin: 0, padding: 0 y overflow: auto. > Las capas internas “navBAR” y “content” tienen propiedades float: left y margin 1%. > El elemento (body) presenta la propiedad min-width: 600px para conseguir evitar que se descomponga la estructura. > Tenemos la posibilidad de seguir añadiendo todas las capas internas que deseemos.

Answer 40

- A parte de las opciones de las hojas de estilos definidas por los usuarios, hay otras dos opciones disponibles que son la del navegador y la del usuario: o La hoja de estilo del navegador - Va a ser la primera que apliquemos y la vamos a utilizar para definir el estilo inicial que vamos a aplicar a todos los elementos por defecto. - A la hora de comprobar sus diferentes valores, podemos hacerlos desde la herramienta “Developer tools” desde Chrome. o La hoja de estilo del usuario - La podemos configurar mediante una opción avanzada del navegador. Es bastante útil para personas de edad más avanzada o para personas con dificultad visual, ya que permiten aumentar el tamaño del texto. - Para configurar los diferentes estilos, podemos hacerlo a través de Chrome, mediante la ruta: Opciones/ configuración avanzada/ contenido web. - El orden, según la prioridad, va a ser: 1) Primero, las reglas de los navegadores; a continuación, las reglas que definen los usuarios;finalmente, las reglas que define el diseñador que, al estar más arriba, serán las primeras en poder verse.

Answer 41

• Estructuración del código CSS - Cuando escribimos código CSS es conveniente distribuirlo en hojas independientes de estilos y, dentro de cada hoja, agruparemos las diferentes reglas que necesitemos para cada función. - Un ejemplo de organización podría ser el siguiente: Estilos globales (contenido (html) y (body)) Estilos de layout (ancho, alto, posición, etc. De las capas principales) Estilos de cada capa • Aplicación web Hace referencia a las diferentes herramientas que tenemos disponibles para poder visualizar nuestro sitio en distintos navegadores sin que necesitemos instalarlos. • Sitios web orientados al diseño http: //librosweb.es/libro/css/ https: //desarrolloweb.com/css/ https: //www.w3.org/Style/Examples/011/firstcss.es.html https: //www.w3schools.com/css/

Answer 42

- El lenguaje de marcado extensible (XML). Se trata de un lenguaje que almacena información a partir de unas etiquetas o marcas creadas por el usuario. - Al ser un lenguaje de marcas, como los definidos anteriormente, una vez que están escritos, debemos comprobar si está bien formado. Adicionalmente, veremos aquellos mecanismos de los que disponemos para validar un documento, en especial, mediante dos técnicas: los ficheros DTD y los esquemas XML. - A continuación, veremos algunos lenguajes basados en XML, como son: SVG, WML o RSS.

Answer 43

- En apartados anteriores hemos podido comprobar las características principales que debe tener un documento para estar bien formado. Ahora, nos centraremos en las reglas que debemos cumplir para que un documento sea válido. - Podemos decir que un documento XML es válido si cumple una serie de reglas de validación que van a especificar la estructura gramatical y la sintaxis que debe tener dicho documento. - Todos los documentos válidos, deben estar bien formados, aunque, NO todos los documentos bien formados son válidos.

Answer 44

- Aunque hoy en día no es muy utilizada, esta técnica de validación consiste, mediante un DTD (Document Type Definition, Definición de Tipo de Documento), en especificar aquellos elementos que deben aparecer, junto con el orden que den seguir, los que son obligatorios y los que no, etc.

Answer 45

- En muchos casos, disponemos de una serie de documentos XML con una gran cantidad de datos, por lo que aquellos DTD que los tienen que validar van a ser bastante extensos. - Para facilitar este proceso, disponemos de una serie de herramientas que se pueden generar de forma automática. Entre los que diferenciamos: o Generadores online: http://xml.mherman.org/ o Editores XML que pueden generar un DTD partiendo de un documento XML: > Engloba todos los anteriores. > XMLSpy de Altova > XMLPad Pro Edition de WMHelp

Answer 46

- Los DTD podemos encontrarlos de diferentes formas: dentro del propio documento XML, en un archivo independiente y algunos, incluso, pueden mostrarse en una parte interna y otra externa.

Answer 47

- Para declarar un DTD, lo haremos siempre al comenzar un documento XML: (!DOCTYPE)

Answer 48

- Y debemos seguir una serie de reglas que lo forman: a) UBICACIÓN. Donde se encuentran las reglas del DTD. >> Interno. Cuando las reglas se encuentran en el mismo documento XML. >> Externo. Cuando las reglas se encuentran en un archivo independiente. >> Mixto. Combina los dos anteriores. Las reglas se encuentran en ambas partes. b) CARÁCTER. Indica si el DTD es de uso privado o público. >> Uso privado. Identificado por la palabra SYSTEM. >> Uso público. Identificado por la palabra PUBLIC. Debe ir con la palabra FPI (Formal Public Identifier, Identificador Público Formal), que identifica al DTD de forma universal.

Answer 49

- Entre las diferentes COMBINACIONES posibles, encontramos las siguientes: Sintaxis Tipo de DTD ------------------------------------------------------------------------------------------------- >!DOCTYPE elemento_raíz [reglas]> Interno (luego privado) >!DOCTYPE elemento_raíz SYSTEM URL> Externo y privado >!DOCTYPE elemento_raíz SYSTEM URL Mixto y privado [reglas]> >!DOCTYPE elemento_raíz PUBLIC Externo y público FPI URL> >!DOCTYPE elemento_raíz PUBLIC FPI Mixto y público URL [reglas]> ____________________ - Entre los distintos ATRIBUTOS, distinguimos: 1) Es el nombre del elemento raíz de un documento XML. Se encuentra a continuación de DOCTYPE. 2) Es la declaración privada o pública. Se encuentra a continuación del elemento raíz y sirve para identificar si el DTD es de uso privado o público. 3) Identificador, solo va a aparecer si el DTD es PUBLIC. ____________________ - ESTRUCTURA del FPI: formado por cuatro campos diferentes, que se refieren a: a) Primer campo: puede ser formal o no formal. >> DTD no aprobado por una norma formal. >> DTD aprobado por un organismo no oficial. >> DTD aprobado por un organismo oficial. b) Segundo campo: es el nombre del organismo responsable. c) Tercer campo: hace referencia al tipo del documento descrito. e) Cuarto campo: indica el idioma del DTD.

Answer 50

- Los principales componentes que tenemos en un DTD son: > !ELEMENT elemento, > !ATTLIST atributo, > !ENTITY entidad y notación.

Answer 51

- Es una declaración de un tipo de elemento que nos señala si existe un elemento a un determinado documento XML. - Sintaxis: >!ELEMENT nombre_elemento modelo_contenido> Donde nombre_elemento debe coincidir con el mismo que tenga el documento XML. Y nombre_contenido indica: • Una regla, que puede ser: >> ANY (cualquier cosa). La utilizamos en la construcción del DTD para validar la descripción de un elemento sin llevar a cabo ningún tipo de comprobación sintáctica. >> EMPTY (elemento vacío). Tiene posibilidad de describir un elemento que no tenga descendientes. Por ejemplo, la descripción de un elemento br. >!ELEMENT br EMPTY> • Datos. Se refiere a aquellos caracteres, que pueden ser textuales, numéricos o de cualquier otro formato que no disponga de ninguna marca (etiqueta). Lo podemos describir como #PCDATA y debe aparecer entre paréntesis. Por ejemplo, (ELEMENT) titulo (#PCDATA) • Elementos descendientes. Es conveniente que aparezcan entre paréntesis y se basa en una serie de reglas. >> Cardinalidad de los elementos: Indica la cantidad de veces que aparece un determinado elemento. Símbolo Significado -------------------------------------------------------------------------------------------- ¿ El elemento (o secuencia de elementos) puede aparecer 0 o 1 vez. * El elemento (o secuencia de elementos) puede aparecer de 0 a N veces. + El elemento (o secuencia de elementos) puede aparecer de 1 a N veces. >> Secuencia de elementos: Secuencia que determina en qué orden aparece o debe aparecer un elemento. Símbolo Significado -------------------------------------------------------------------------------------------- A, B El elemento B aparecerá a continuación del elemento A. A | B Aparecerá el elemento A o el B, pero no ambos • Contenido mixto. Consigue mezclar distintos textos de elementos descendientes.

Answer 52

- Declaración del tipo de atributo que cuenta con la posibilidad de poder indicar si existe un elemento determinado en un documento XML. ``` - Sintaxis: >!ATTLIST nombre_elemento nombre_atributo tipo_atributo caracter nombre_atributo tipo_atributo caracter ... > ``` - Donde, nombre_atributo se debe corresponder con un nombre XML válido carácter del atributo hace referencia a: >> Un valor de texto que debe ir entre comillas. >> #IMPLIED es opcional y no lleva asignado ningún valor por defecto. >> #REQUIRED es un valor obligatorio, aunque no lleva asignado ningún valor por defecto. >> #FIXED, cuando el atributo es de carácter obligatorio y tiene asignado un valor por defecto que va a ser único para el atributo. - En cuanto a los tipos de atributos, podemos diferenciar: >> CDATA. Hace referencia a aquellos caracteres que no disponen de etiquetas. >> ENTITY. Asociado al nombre de una entidad. >> Enumerado. Lista de distintos valores entre los que se debe encontrar el valor uno. >> ID. Identificador único que permite identificar elementos. >> IDREF. Valor correspondiente a un atributo ID de un elemento diferente. >> IDREFS. Permite representar una gran cantidad de IDs correspondientes a otros elementos, que deben estar separados entre ellos por un espacio en blanco. >> NMTOKEN. Nombre que no tiene ningún espacio en blanco en su interior. Si existen espacios en blancos antes o después del nombre, se ignorarán. >> NMTOKENS. Igual que la anterior, pero en este caso, hace referencia a una lista de nombres que van separados entre ellos por un espacio. >> NOTATION. Nombre de notación que debe estar definido previamente en el DTD.

Answer 53

- Elemento bastante avanzado en cuanto al diseño de DTDs. Su declaración hace referencia a un tipo determinado de entidad, entre los que podemos distinguir: >> REFERENCIA A ENTIDADES GENERALES: ------------------------------------------------------------------ a) INTERNAS: Sintaxis: >!ENTITY nombre_entidad definición_entidad> Por ejemplo: >!ENTITY rsa “República Sudafricana> Y, a continuación, podemos anteponer el nombre de la entidad correspondiente para utilizar el XML, anteponiendo el carácter &. >pais> >nombre>&rsa;>/nombre> ... >/pais> b) EXTERNAS: Sintaxis: >!ENTITY nombre_entidad tipo_uso url_archivo> Pudiendo seleccionar SYSTEM si es para uso privado o PUBLIC si es público. >> REFERENCIAS A ENTIDADES PARÁMETROS: ------------------------------------------------------------------------ b) INTERNAS: Sintaxis: >!ENTITY % nombre_entidad definición_entidad> c) EXTERNAS. Sintaxis: >!ENTITY % nombre_entidad tipo_uso fpi url_archivo> • Entidades que no están procesadas (unparsed). >!ENTITY % nombre_entidad tipo_uso fpi valor_entidad NDATA tipo>

Answer 54

- Lo podemos utilizar para señalar el tipo de atributo al que se le permite utilizar algún valor que se haya declarado previamente en el DTD como notación. Mediante la notación podemos determinar un formato de datos distinto a XML como pueden ser: MIME, image/gif, image/jpg, etc. - Sintaxis: >!NOTATION nombre_notacion SYSTEM “identificador_externo”>

Answer 55

- Es un mecanismo que podemos utilizar para hacer una comprobación sobre la validez de un determinado documento XML. Presenta ciertas ventajas entre las que distinguimos: >> Al ser un documento XML podemos comprobar que está bien formado. >> Dispone de un amplio catálogo de tipos de datos predefinidos para los diferentes elementos y atributos. >> Permiten conocer el número de veces que aparece un determinado elemento en un documento XML. >> Ofrece la posibilidad de utilizar varios espacios de nombres. - Aunque presente estas ventajas, no podemos pasar por alto el inconveniente más importante que presentan, que es saber que los esquemas XML son bastante más difíciles de interpretar por las personas que los DTD.

Answer 56

- Entre las diferentes herramientas de las que disponemos a la hora de valorar los esquemas, diferenciamos entre las siguientes: • Herramientas para validar esquemas. Las herramientas que ya hemos detallado en apartados anteriores que permiten comprobar si un documento está bien formado, son las mismas que nos pueden determinar si permiten validar un documento que cuente con un esquema XML. Existen una serie de herramientas que permiten llevar a cabo esta función, a continuación, citamos una de ellas. • Herramientas para generar esquemas. En este caso, como el generador no está capacitado para conocer las distintas reglas de negocio existentes, lo que hace es crear una especie de coraza a partir de un documento XML, que consta de una serie de herramientas como pueden ser: http://www.corefiling.com/opensource/schemaValidate.html >> Herramientas online: http://www.freeformatter.com/xsd-generator.html >> Editores XML que cuentan con esta funcionalidad: XMLSPY de Altova

Answer 57

- En este caso, como el generador no está capacitado para conocer las distintas reglas de negocio existentes, lo que hace es crear una especie de coraza a partir de un documento XML, que consta de una serie de herramientas como pueden ser: - Herramientas online: http: //www.freeformatter.com/xsd-generator.html - Editores XML que cuentan con esta funcionalidad: XMLSPY de Altova

Answer 58

- El esquema XML corresponde a un documento XML que debe llevar a cabo una serie de reglas como: • El nombre correspondiente al elemento raíz se denomina . • Dispone de un espacio de nombres: > http://www.w3.org/2001/XMLSchema (linkque sirve únicamente de ejemplo). > Aunque es posible no definir ningún prefijo o, por el contrario, utilizar uno de los más comunes, que son xs o xsd. Por ejemplo: >xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”> ... >/xs:schema> • Como un documento bien formado, dispone de un elemento raíz, como mínimo, cuando hablamos de esquemas XML, vamos a necesitar, al menos, la declaración de ese elemento raíz correspondiente al documento XML. Veamos un ejemplo de un XML bastante sencillo: >simple> Esto es un documento sencillo>/simple> Y, a continuación, vamos a escribir un ejemplo de un esquema que lo puede validar, como: >xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”> >xs:element name=”simple”/> >/xs:schema> • También podemos tener dos elementos raíz declarados: y , por ejemplo: >xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”> >xs:element name=”simple”/> >xs:element name=”complejo”/> >/xs:schema> * El orden de los componentes, no afecta al funcionamiento del esquema correspondiente. * El documento XML debe contener la vinculación al documento XML. Mediante la utilización de xmlns:xsi y xsi:noNamespaceSchemaLocation. Como vemos en el siguiente ejemplo: >simple xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”simple.xsd”> ... >/simple>

Answer 59

- Para construir un esquema XML haremos uso de una serie de componentes. - Algunos de ellos que son imprescindibles en este proceso, como: a) xs: schema Referencia URI que utilizamos a la hora de declarar un esquema y su elemento raíz. − Atributos optativos principales: * xmlns: permite indicar la cantidad de espacios de nombres que podemos utilizar en un determinado esquema. − Otros atributos optativos: * id: utilizado para identificar de forma única un elemento. * targetNamespace: se refiere al espacio de nombres del esquema. * elementFormDefault: para referirnos al formato de nombres del esquema. * attributeFormDefault: para referirnos al formato de los atributos del esquema. * versión: versión que tiene asignada un esquema determinado. ____________________ b) xs: element Componente que utilizamos para declarar un elemento y comprobar si existe en el documento XML. − Atributos optativos principales: * name: asociado al nombre del elemento. Se considera obligatorio siempre que su padre sea . * ref: utilizado para señalar la descripción del elemento que se encuentre en un lugar diferente al esquema. Podemos utilizarlo si su elemento padre es . * type: tipo del elemento. * default: valor que toma un elemento por defecto siempre que su contenido sea de tipo texto. * fixed: único valor que puede tomar un elemento, lo usaremos siempre que sea un elemento con contenido textual. * minOccurs: mínimo número de apariciones de un elemento en un documento XML. * maxOccurs: máximo número de apariciones de un elemento en un documento XML. − Otros atributos optativos: * id: utilizado para identificar de forma única un elemento. * form: formato que tiene asignado el nombre del atributo. * substitutionGroup: nombre de aquel elemento que puede sustituir este elemento principal. * nillable: determina si es posible que aparezca el atributo de instancia. * xsi: nil asociado a otro elemento del documento de instancia XML. * abstract: determina si podemos utilizar un documento XML instancia. * final: determina si el elemento puede derivar de algún otro. ____________________ c) xs: attribute Componente que utilizamos para declarar un atributo y representar si existe algún atributo de un determinado elemento en un documento XML. − Atributos optativos principales: * name: asociado al nombre del elemento. * ref: utilizado para señalar la descripción del elemento que se encuentre en un lugar diferente al esquema. Podemos utilizarlo si su elemento padre es . * type: tipo del elemento. * use: indica si es obligatorio, opcional, o prohibida la existencia de un atributo. * default: valor que toma un atributo cuando es procesado. * fixed: único valor que puede tomar un atributo en un documento XML. − Otros atributos optativos: * id: utilizado para identificar de forma única un atributo. * form: formato que tiene asignado el nombre del atributo.

Answer 60

- Tanto los diferentes elementos como los atributos de un documento XML pueden ir tomando diferentes valores según los tipos de datos que vayamos asignando. - Podemos diferenciar entre los tipos de datos predefinidos frente a los construidos que, a continuación, detallamos: - Tipos de datos predefinidos: están organizados de forma jerárquica y podemos diferenciar sobre unos 45 tipos de datos predefinidos diferentes. Cada tipo debe ser de la misma forma que sea el tipo de su padre.

Answer 61

1) xs: anyType Lo encontramos en la jerarquía de tipos y, a partir de él, derivan todos los demás. 2) xs: anySimpleType Puede representar a cualquier tipo simple sin llegar a particularizar. Los tipos predefinidos se dividen a su vez en: − Primitivos. Los que derivan de xs: anySimpleType − No primitivos. Los que derivan de algún tipo primitivo Estos tipos predefinidos se agrupan por distintas categorías, como son: numéricos, de fecha y hora, de texto, binarios, booleanos

Answer 62

Tipo de datos Descripción - Float: Número en punto flotante de precisión simple (32 bits). - Double: Número en punto flotante de precisión doble (64 bits). - Decimal: Números reales que pueden ser representados como i·10-n - Integer Números enteros, de – infinito a infinito. nonPositiveInteger Números enteros negativos más el 0. - negativeInteger Números enteros menores que 0. - nonNegativeInteger Números enteros positivos más el 0. - positiveInteger Números enteros mayores que 0. - unsignedLong Números enteros positivos desde 0 hasta 18.446.744.073.709.551.615 (64 bits de representación: 264 combinaciones. - unsignedInt Números enteros positivos desde 0 hasta 4.294.967.295 (32 bits de representación: 232 combinaciones). - unsignedShort Números enteros positivos desde 65.535 (16 bits de representación: 216 combinaciones). - unsignedByte Números enteros positivos desde 0 hasta 255 (8 bits de representación: 28 combinaciones). - Long Números enteros representados con 64 bits: 264 combinaciones, desde -9.223.372.036.854.775.808 hasta 9.223.372.036.854.775.807. - Int Números enteros representados con 32 bits: 232 combinaciones, desde -2.147.483.648 hasta 2.147.483.647. - short Números enteros representados con 16 bits: 216 combinaciones, desde -32.768 hasta 32.767. - byte Números enteros representados con 8 bits: 28 combinaciones, desde -128 hasta 127.

Answer 63

Tipo de datos - Descripción - duration Duración en años + meses + días + horas + minutos + segundos - dateTime Fecha y hora, en formato aaaa-mm-dd T hh:mm:ss - date Solamente fecha en formato aaaa-mm-dd - time Solamente la hora, en formato hh:mm:ss - gDay Solo el día, en formato –dd (la g viene de calendario Gregoriano). - gMonth Solo el mes. - gYear Solo el año, en formato yyyy. - gYearMonth Solo el año y el mes, en formato yyyy-mm. - gMonthDay Solo el mes y el día, en formato –mm-dd.

Answer 64

Tipo de datos - Descripción - string Cadenas de texto. - normalizedString Cadenas de texto en las que se convierten los caracteres tabulador, nueva línea, y retorno de carro en espacios simples. - token Cadenas de texto sin los caracteres tabulador, ni nueva línea, ni retorno de carro, sin espacios por delante o por detrás, y con espacios simples en su interior. - language Valores válidos para xml:lang (según la especificación XML). - NMTOKEN Tipo de datos para atributo según XML 1.0, compatible con DTD. - NMTOKENS Lista separada por espacios de NMTOKEN, compatible con DTD. - Name Tipo de nombre según XML 1.0. - QName Nombre cualificado de espacio de nombres XML. - NCName QName sin el prefijo ni los dos puntos. anyURI Cualquier URI. - ID Tipo de datos para atributo según XML 1.0, compatible con DTD. Tienen que ser valores únicos en el documento XML. - IDREF Tipo de datos para atributo según XML 1.0, compatible con DTD. - IDREFS Lista separada por espacios de IDREF, compatible con DTD. - ENTITY Tipo de datos para atributo XML 1.0, compatible con DTD. - ENTITIES Lista separada por espacios de ENTITY, compatible con DTD. - NOTATION Tipo de datos para atributos en XML 1.0, compatible con DTD.

Answer 65

Tipo de datos - Descripción - hexBinary Secuencia de dígitos hexadecimales (0...9, A, B, C, D, E, F). - Base64Binary Secuencia de dígitos en base 64.

Answer 66

Tipo de datos - Descripción | - boolean Puede tener 4 valores: 0, 1, true y false.

Answer 67

− Son simples y tienen valores atómicos todos los tipos de datos predefinidos. − Se construyen a partir de un tipo base predefinido. − Se asignan a aquellos elementos que solo tienen carácter textual. − Definición: : Permiten limitar el rango de valores mediante . 1) xs: simpleType Define los tipos simples. • Atributos optativos principales: > name: corresponde al nombre del tipo. Es de carácter obligatorio siempre que el componente sea hijo de Si no es así, no está permitido. > id: único identificador para el componente. 2) xs: restriction Permite definir aquellas restricciones correspondientes a los valores de un tipo determinado. • Atributos obligatorios. > base: nombre asociado al tipo a partir del que se va a empezar a construir un nuevo tipo (predefinido o construido). • Atributos optativos principales. > id: único identificador para el componente.

Answer 68

Faceta - Uso - Tipos de datos para donde se usa 1) xs:minInclusive: Especifica el límite inferior del rango de valores aceptable. El propio valor está incluido. / Numéricos y de fecha/horas. 2) xs:maxInclusive Especifica el límite superior del rango de valores aceptable. El propio valor está incluido. / Numéricos y de fecha/horas. 3) xs:minExclusive Especifica el límite inferior del rango de valores aceptable. El propio vaolr no está incluido. / Numéricos y de fecha/horas. 4) xs:maxExclusive Especifica el límite superior del rango de valores aceptable. El propio valor no está incluido. / Numéricos y de fecha/horas. 5) xs:enumeration Especifica una lista de valores aceptable. Todos 6) xs:pattern Especifica un patrón o expresión regular que deben cumplir los valores válidos. / Texto 7) xs:whiteSpace Especifica cómo se tratan los espacios en blanco, entendiéndose como tales los saltos de línea, tabuladores y los propios espacios. Sus posibles valores son preserve, replace y collapse. / Texto 8) xs:length Especifica el número exacto de caracteres (o elementos de una lista) permitidos. Tiene que ser mayor o igual que 0. / Texto 9) xs:minLength Especifica el mínimo número de caracteres (o elementos de una lista) permitidos. Tiene que ser mayor o igual que 0. / Texto 10) xs:maxLength Especifica el máximo de caracteres (o elementos de una lista) permitidos. Tiene que ser mayor o igual que 0. / Texto 11) xs:fractionDigits Especifica el número máximo de posiciones decimales permitidas en números reales. Tiene que ser mayor o igual que 0. / Números con parte decimal 12) xs:totalDigits Especifica el número exacto de dígitos permitidos en números. Tiene que ser mayor que 0./ Numéricos

Answer 69

− Se asignan a aquellos elementos que poseen elementos o atributos descendientes. − Puede contener contenido complejo por lo que tiene elementos descendientes. − Puede estar vacío, es decir, que no tiene contenido, aunque sí atributos. − Puede tener contenido mixto, que significa, mezcla de contenido textual con elementos descendientes. - Definición: (xs: complexType) - Permiten asignar elementos. - El contenido que puede tener asignado un elemento va entre las etiquetas de apertura y cierre, y diferencia entre: •Contenido simple. El elemento solo contiene elementos que posean contenido textual. Sin elementos descendientes. (xs: simpleContent). • Contenido complejo. El elemento puede poseer contenido textual o no. Tiene elementos descendientes. (xs: complexContent)

Answer 70

Podemos diferenciar entre los siguientes modelos de contenido: • Secuencia. Los elementos se presentan en filas, uno detrás de otro siguiendo un orden determinado. Se declara: * Alternativa. Los elementos aparecen como una alternativa los unos de los otros. Solo se puede elegir uno. Se declara: * Todos. Los elementos pueden aparecer en un orden cualquiera. Se declara:

Answer 71

Componente utilizado a la hora de definir los tipos de datos complejos. − Atributos optativos principales: • name: corresponde al nombre del tipo. Es de carácter obligatorio siempre que el componente sea hijo de Si no es así, no está permitido. * id: único identificador para el componente. * mixed: mezcla contenida de texto con otros elementos descendientes. * abstract: señala si es posible utilizar de forma directa un tipo de elemento. * final: señale si el tipo es derivable según la restricción, extensión o por ambas.

Answer 72

- Hay una serie de lenguajes en XML que cuentan con un propósito específico con un mecanismo de validación correspondiente, como pueden ser: • SVG (Scalable Vector Graphics, Gráficos Vectoriales Escalables). Es un lenguaje utilizado para representar una serie de gráficos vectoriales bidimensionales. * WML (Wireless Mark-up Language, Lenguaje de Marcado Inalámbrico). Es un lenguaje mediante el cual podemos representar la información en dispositivos móviles. * RSS (Really Simple Syndication, Sindicación Realmente Simple). Se refiere a la familia de los diferentes formatos web que podemos utilizar para publicar información que va a sufrir constantes actualizaciones. * Atom (Atom Syndication Format, Formato Atómico de Sindicación). Lenguaje que se utiliza como semillas web. * DocBool. Lenguaje utilizado para definir documentos. * XBRL (Extensible Business Reporting Language, Lenguaje Extensible de Informas Financieros). Lenguaje estándar abierto que permite representar la información junto con la expresión semántica necesaria para los distintos informes financieros.