UF1 Flashcards
1- PRINCIPALES CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS
1) TEXTO PLANO:
• Formados solo por caracteres de texto, no pueden contener imágenes, sonido, archivos comprimidos ni otros tipos.
• Los caracteres se codifican mediante la utilización de diferentes códigos: por ejemplo ASCII, UFT-8, ISO-8859-15, dependiendo del idioma o del alfabeto necesario.
• Los archivos de texto plano se pueden interpretar mediante un simple editor de texto. Sin embargo, los archivos binarios necesitan un software específico, por ejemplo, descompresores, visores multimedia, compiladores. Lo cual es una ventaja.
____________________
2) COMPACIDAD:
• Permite mezclar las instrucciones de marcado con el propio contenido.
• El código que aparece entre corchetes es lo que denominamos instrucciones de marcado o etiquetas. Ej: (>h2>Contenido>/h2>)
___________________
3) INDEPENDENCIA DEL DISPOSITIVO FINAL:
• Son las distintas interpretaciones que se pueden hacer de un mismo documento. Dependiendo del dispositivo final, podemos tener distintos resultados si utilizamos un dispositivo móvil o si utilizamos un ordenador.
___________________
4) ESPECIALIZACIÓN:
• Con la especialización nos referimos a que, con el paso de los años, han ido evolucionando, de tal manera que, podemos hacer uso de los lenguajes de marcas en un gran número de áreas (como pueden ser los gráficos vectoriales, notación científica, interfaces de usuario, etc).
___________________
5) FLEXIBILIDAD:
• Podemos combinar el mismo tipo de archivo con otros lenguajes diferentes, como pueden ser HTML con PHP y con JavaScript. Además, existen unas etiquetas que ya viene especificadas para tal fin, como son los .
2- CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS DEPENDIENDO DEL TIPO DE MARCAS QUE UTILICEMOS:
Tendremos 3 tipos:
1) DE PRESENTACIÓN:
• Se refieren al formato del texto que, sin modificar su estructura, permite aumentar el tamaño de la fuente, añadir o eliminar la cursiva. Incorpora diferentes lenguajes de procedimiento que permiten combinar varias marcas de presentación para una macro determinada.
• El software encargado de representar el documento debe ser capaz de poder traducir el código, pero sin transformar el orden en que aparece. Las aplicaciones de edición y los procesadores de texto son algunos de los que utilizan este marcado.
• Algunos ejemplos pueden ser: TeX, Docbook
(derivados de SGML), nroff, troff, RTF.
___________________
2) DESCRIPTIVO, ESTRUCTURAL O SEMÁNTICO:
• Hacen referencia a las diferentes
partes en las que se puede dividir un documento sin ofrecer detalles de cómo se representan y en qué orden van a hacerlo.
• XML es un lenguaje diseñado específicamente para generar marcado descriptivo junto con los lenguajes que deriven de XML y tengan este propósito.
• Van a ir creando una serie de documentos que se van a almacenar en forma de árbol por lo que son bases de datos, pero en este caso, no se utilizan tablas, ni bases de datos estructuradas, por tanto, reciben el nombre de bases de datos semiestructuradas.
• Algunos ejemplos de este tipo pueden ser: ASN. 1, YAML, EBML, RDF, XFML, OWL, XTM.
___________________
3) HÍBRIDO:
• Se refieren a una un conjunto de lenguajes que permiten utilizar los dos tipos de marcas anteriores, como HTML, XHTML y WML.
3- CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS SEGÚN SU FUNCIONALIDAD:
1) Para crear documentación electrónica:
• RTF, TeX, troff, nroff
• Wikitexto, DocBook, LinuxDoc
• ASN.1, EBML, YAML
2) Tecnologías de Internet:
• HTML, XHTML, WML (páginas web)
• XMPP (para mensajería instantánea)
• WSDL, SOAP, UDDI (servicios web)
• RSS, Atom (sindicación de contenidos)
• GladeXML, XForms, XAML (interfaces/formularios de usuario)
3) De propósito específico:
• MathML, CML (fórmulas matemáticas)
• MusicXML (lenguaje musical)
• SSML, SRGS, VoiceXML (síntesis de voz)
• SVG, VML, X3D (gráficos vectoriales)
• XLL (enlaces):
o XLINK (asociación de recursos)
o XML Base (URI básico)
o XPOINTER (localiza recursos)
• XSLT (transformación de documentos)
• XTM (mapas conceptuales)
• RDF, XFML, OWL, XMP (catalogación y clasificación de documentos)
• GML (información geográfica)
• OFX (intercambio de información financiera)
ebXML (comercio electrónico)
• XML Dsig, XML Enc, SAML, XACML, XKMS, XrML (seguridad)
• XInclude (inclusión de archivos)
4- HERRAMIENTAS DE EDICIÓN:
1) XMLSpy, de Altova:
• Un editor de XML junto con XLST, XPath, XQuery, etc. Cuenta con un gran número de herramientas diferentes, entre las que podemos diferenciar las de representación gráfica de diferentes documentos. Se trata de un programa de pago, pero que dispone de unaversión de prueba de 30 días.
2) (oXygen/) , de Syncro Soft:
• Utilizado para una serie de tecnologías entre las que destacamos: XSD, XSLT o XQuery. Es necesario descargarse el XML Editor.
3) XML Copy Editor:
• Herramienta de software libre con licencia
GNU GPL. También es editor de XML, XSD, XSLT, etc.
4) XMLPad Pro Edition, de WMHelp:
• Herramienta bastante sencilla de utilizar cuya función principal es comprobar si un documento XML está bien formado.
5) Otras aplicaciones: (Exchanger XML Editor, Liquid XML Editor, versión de pago, de la que también existe una versión de prueba.
6) Parser XML:
• Procesador que se encarga de leer un documento XML para, posteriormente, determinar la estructura y propiedades de aquellos datos que se encuentran
contenidos en dicho documento.
• Este procesador o analizador va a comprobar que se han seguido las reglas de forma correcta y, a continuación, puede validar el documento e informar, en caso de que existan, de los errores producidos.
5- XML: ESTRUCTURA, SINTAXIS Y ETIQUETAS:
- La información de un documento XML se organiza de forma jerárquica, de tal forma que los diferentes elementos del documento se van a relacionar entre sí mediante relaciones de padres, hijos, hermanos, ascendentes, etc.
- Las diferentes relaciones que se pueden dar entre los diferentes nodos son:
1) Original:
2) Descendentes (de padres a hijos)
3) Ascendentes (de hijos a padres)
4) Hermanos - A las partes del árbol que tienen hijos se les denomina nodos intermedios o ramas.
- Y a las partes que NO tienen hijos, las denominamos nodos finales u hojas.
6- ELABORACIÓN DE DOCUMENTOS XML BIEN FORMADOS:
- A la hora de especificar la sintaxis del lenguaje XML, definimos:
• Cómo delimitar los elementos con etiquetas.
• Qué formato podemos asignar a una etiqueta.
• Qué nombres son aceptables para los diferentes elementos.
• Dónde se pueden colocar los atributos.
7- UN DOCUMENTO XML BIEN FORMADO DEBE CUMPLIR CON UNA SERIE DE REGLAS ESTABLECIDAS POR W3C EN LAS ESPECIFICACIONES CORRESPONDIENTES PARA XML:
- Podemos comenzar un documento por una instrucción de procesamiento XML que indique cuál es la versión del XML que se está utilizando y, algunas
veces, indica también la codificación de caracteres (encoding), que por defecto es UTF-8 y si ya se encuentra preparado para procesarse o si necesita
una serie de archivos.
(xml version=”1.0” ?) - Solo debe haber un elemento raíz del que van a colgar los demás elementos.
- Los elementos se encuentran entre los símbolos de apertura < y cierre >.
- Existes diferencias entre mayúsculas y minúsculas.
- Dos atributos no pueden tener el mismo nombre.
- Los atributos pueden llevar el valor “simples” o “dobles”.
8- MODELO DE DATOS EN UN DOCUMENTO XML.
NODOS:
- Raíz. El nodo raíz es el primer elemento que encontramos en la estructura y lo designamos como “/”.
- ELEMENTOS. Unidad básica de los documentos XML. Tienen como función principal almacenar información, y los etiquetamos de la misma forma que los elementos de HTML, por ejemplo: (ejemplo)…(/ejemplo).
- Podemos diferenciar dos tipos de elementos especiales:
a) Elemento RAIZ. Debe formar parte de cualquier documento XML. Si el documento está bien formado, debe tener solo un elemento raíz
b) Elementos SIN CONTENIDO. Tenga atributos o no, debe abrirse y cerrarse con una sola instrucción.
(ejemplo /)
• Atributos. Permiten asignar un valor a un atributo haciendo uso del signo igual. Se van a tratar como tipo texto, de tal forma que el valor debe aparecer
entre comillas.
Ej: (persona DNI=”35427641M”)…(/persona)
- Texto. Puede aparecer de dos formas diferentes, como contenido de un elemento determinado o como valor correspondiente de un atributo.
- Comentarios. Se utilizan de la misma forma que en HTML.
- Espacio de nombres. Utilizado para diferenciar las distintas etiquetas cuando se están utilizando varios vocabularios.
• Instrucciones de procesamiento. Comienzan por Y finalizan con ¿>.
Engloban un conjunto de instrucciones que se envían al procesador.
• Entidades predefinidas. Utilizadas para poder representar caracteres especiales de marcado, aunque se interpreten por el procesador como si fuera un texto.
Entidad Carácter
-------------------------------
& &;
< <
> >
&apos ‘
&quot "
- Secciones CDATA. Grupo de varios caracteres que no necesitan ser analizados por el procesador.
- Definición Tipo de Documento (DTD). Se definen una serie de reglas que asignan una serie de restricciones sobre la estructura del documento XML.
9- UTILIZACIÓN DE ESPACIOS DE NOMBRES EN XML
a) Nombres XML:
− Los nombres en XML deben seguir una serie de reglas para conseguir utilizar nombres correctos. Estas reglas son las mismas para nombres que para los atributos:
• Tienen permitido empezar con una letra (puede tener tilde o no), que puede pertenecer al alfabeto no latino, subrayado o con dos puntos.
• Los caracteres que aparezcan a continuación pueden ser: letras, dígitos, guiones bajos, subrayados, comas o dos puntos.
• Aquellos nombres que empiecen por las letras XML (mayúscula o minúscula) están reservadas.
• No deben contener espacios en blanco.
____________________
b) Uso de elementos frente a uso de atributos:
• Elementos:
o Se pueden utilizar para representaciones jerárquicas.
o Pueden tener atributos.
o Puede que un elemento tenga distintas ocurrencias.
o Aparecen en orden representativo.
o Tienen posibilidad de poder extender con algunos elementos en su interior.
• Atributos:
o Deben asociar a los diferentes elementos.
o Permiten alterar la información.
o Aparecen en orden no representativo.
o Permiten realizar el registro de metadatos.
o No tienen posibilidad de poder extender con otros elementos en su interior.
o Un atributo no dispone de múltiples ocurrencias. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ c) Espacios de nombres − Son una serie de mecanismos utilizados para que no se desarrollen conflictos sobre los nombres, de tal forma que, se puedan diferenciar los elementos que están dentro de un mismo documento XML y tengan el mismo nombre, pero pertenezcan a diferentes distribuciones.
− Declaración: (nombre_elemento xmlns:prefijo=”URI del espacio_de_nombres”)
* El URI correspondiente al espacio de nombres tiene que ser único, aunque no exista ninguna conexión que lo compruebe. El URI es un nombre lógico del espacio de nombres.
* Definimos el espacio de nombres como los diferentes lugares que pueden hacer referencia a un espacio de nombres en concreto. Todos los elementos llevan antepuesto el prefijo del espacio de nombres.
• Además, también podemos declarar un espacio de nombres distinto para un elemento que descienda de otro, que ya haya declarado otro espacio de nombres. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ d) Espacio de nombres por defecto: − En estos espacios de nombres no tenemos la obligación de definir un prefijo. Su ámbito de aplicación correspondiente es el del elemento en el que se ha declarado junto con sus elementos descendientes. No a sus atributos.
• Para añadir un espacio de nombres a un documento XML que ya está creado, iremos insertando el prefijo a los elementos y atributos. Este proceso resulta un poco pesado y puede provocar una serie de errores. Así podemos evitar escribir prefijos.
• Uno de los mayores inconvenientes que se puede dar en el espacio de nombres por defecto es que el espacio de nombre al que nos referimos solo afecte al elemento que está declarado y a sus descendientes. No a sus atributos. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ e) Atributos especiales:
• xml: space. Utilizado para indicar a la aplicación XML si debe tener en cuenta los espacios en blanco.
• xml: Lang. Ofrece la posibilidad de indicar el idioma en el que está escrito, diferenciando entre:
o Código que contiene solo dos letras
o Identificador para el idioma.
o Identificador que define el usuario
• xml: base. Puede definir una URI diferente a la existente en el documento.
10- UTILIZACIÓN DE LENGUAJES DE MARCAS EN ENTORNOS WEB: EVOLUCIÓN HISTÓRICA
− Cuando hablamos del origen de HTML nos remontamos al año 1980, que fue cuando el físico Tim Berners-Lee, que trabajaba para CERN (Organización Europea para la Investigación Nuclear), propone un nuevo sistema de “hipertexto” para que de pudieran compartir diferentes documentos.
− Estos sistemas de “hipertexto” ya se habían desarrollado con anterioridad, aunque en el ámbito de la informática; cuando se habla de “hipertexto” se refiere a que los usuarios puedan acceder a la información que esté relacionada con aquellos documentos electrónicos que están visibles. Así, los “hipertextos” iniciales, se asimilaban a los enlaces a las distintas páginas web.
− Años posteriores, Tim Bereners-Lee se une con el ingeniero de sistemas Robert Cailliau, con el que gana la propuesta WorldWideWeb (W3):
1) En 1991 se presenta el primer documento con descripción de HTML y bajo el nombre HTML Tags (Etiquetas HTML). 2) En 1993 se presenta la primera propuesta oficial para convertir HTML en un estándar. Aunque existieron avances muy significativos, porque se definieron las etiquetas de imágenes, las tablas y los formularios, no se llegó a conseguir ser el estándar oficial. 3) Ya en 1995, es el organismo IETF quien se encarga de poner en marcha un grupo para trabajar con HTML, y es cuando se consigue publicar, el 22 de septiembre de 1995, el estándar HTML 2.0, siendo este el primer estándar oficial de HTML. 4) A partir del año 1996, los diferentes estándares de HTML los publica otro organismo distinto denominado W3C (World Wide Web Consortium), llegando a publicar la versión HTML 3.2 el 14 de enero de 1997. Esta fue la primera recomendación de HTML que publicó W3C. 5) Con la versión HTML 4.0, publicada el 24 de abril de 1998, se consiguieron numerosos avances sobre las versiones anteriores, y aparecía la posibilidad de añadir pequeños programas (scripts) en las páginas web con lo que se conseguía mejorar la accesibilidad de las páginas que ya estaban diseñadas, trabajar mediante la utilización de tablas más complejas y mejora de los formularios. 6) La publicación de HTML 4.01 (publicada en 1999), basada, sobre todo, en revisar publicaciones anteriores, pero no añade avances significativos. Detuvo un poco el desarrollo de HTML para centrarse más en el estándar XHTML. 7) Sobre el año 2004 y debido a este parón que existió, algunas empresas como Appel, Mozilla y Opera empezaron a mostrar su preocupación por la falta de interés que estaba existiendo del W3C DE HTML, y fue entonces cuando empezaron a organizar una nueva asociación denominada WHATWG (Web Hypertext Application Technology Working Group). 8) El 22 de enero de 2008 se publica el primer borrador oficial del estándar HTML5. 9) En marzo del 2007 se publican distintos borradores de HTML5.0. 10) De forma paralela, se seguía avanzando sobre la estandarización de XHTML (versión avanzada de HTML basada en XML), publicando su primera versión en enero del 2000. 10) XHTML 1.0 está basado en la adaptación de HTML 4.01 al lenguaje XML por lo que utiliza sus mismas etiquetas y muchas de sus características, aunque añade algunas nuevas. 11) La versión XHTML 1.1 y XHTML 2.0 se publicaron en forma de borrador con la intención de poder modularizar XHTML.
11- CUADRO EVOLUCIÓN HISTÓRICA:
AÑO EVENTO 1991 Nacimiento. “HTML tags” 1993 HTML 1.2 1995 HTML 2.0 1994 Se funda W3C 1997 HTML 3.2 1998 HTML 4.0 y XML 1999 HTNK 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2002 XHTML 2.0 2003 XFORMS 2004 Se funda WHATWG 2008 Borrador de HTML 5
12- Identificación de etiquetas y atributos de HTML
− HTML es un lenguaje de marcas que nos permite desarrollar diferentes páginas web.
− Para ello, necesitamos:
• Un editor de textos ASCII mediante el que vamos a poder añadir el
contenido que pretendemos mostrar.
• Un navegador web con el que podemos visualizar el contenido de la página.
− Todos aquellos ficheros que contengan documentos HTML van a tener como extensión .HTML o .htm.
− Otro editor HTML (aunque un poco más específico), puede ser WYSIWYG (What You See Is What You Get), que se traduce como “Lo que ves, es lo que obtienes”. De esta forma, podemos escribir diferentes documentos HTML y ver, de forma simultánea, cómo quedaría el resultado final de la página web, de la misma forma que se vería cuando la publicásemos en Internet.
− También existen otras herramientas de edición, que podemos utilizar para llevar a cabo la realización de diferentes páginas web de forma más profesional, como pueden ser, entre otras, Aptana, Amaya, Dreamweaver y Kompozer. Esta serie de editores:
• Algunas etiquetas (directivas) de HTML sin que las tengamos que teclear.
• Reglas estilo CSS.
• Diferentes funciones destinadas a la creación y mantenimiento de la página web.
− Cuando tengamos la página web lista para su posterior publicación en Internet, vamos a necesitar un servidor de páginas web en los que podamos almacenar las distintas páginas. El servidor web es un software que se encuentra en el propio ordenador y debe estar conectado siempre a Internet. Cuando pongamos las páginas en el servidor, ya serán accesibles a todos los usuarios que pertenezcan a la misma red.
13- ETIQUETAS Y ATRIBUTOS:
1- ETIQUETAS
− Las etiquetas, también conocidas como marcas, definen una serie de elementos que forman el léxico del lenguaje HTML. Se encuentran entre los signos de menor que < y >.
− Podemos diferenciar entre dos tipos de etiquetas: cerradas y abiertas.
a) Etiquetas cerradas: Consta de una etiqueta para la apertura que indica el comienzo de la etiqueta y otra de cierre que indica que hemos terminado de trabajar con la etiqueta en cuestión y lleva el símbolo “/” antes del nombre. Por ejemplo:
>p>
...
>/p>
b) Etiquetas abiertas: Cuentan con una única palabra reservada para indicar el inicio y fin de la etiqueta a la vez. Por ejemplo:
>hr>
>br>
>img> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ 2- ATRIBUTOS − Los atributos, al igual que las etiquetas, se pueden definir tanto en mayúsculas como en minúsculas, aunque los valores que se asignen a los atributos sí son sensibles a mayúsculas o minúsculas. Por ello, es recomendable utilizar siempre minúsculas para etiquetas y para los atributos y, de esta forma, evitar confusiones.
− Las etiquetas pueden contener atributos si necesitan realizar alguna configuración sobre alguna característica determinada. Estos atributos se definen a continuación de la palabra reservada en la etiqueta de apertura separada por un espacio en blanco y antes del signo de cierre.
− Asignaremos el valor correspondiente al atributo a través del signo (“=”). Cada comando cuenta con una serie de atributos con sus correspondientes valores, como, por ejemplo:
>p>
Definición de un párrafo y alineación del texto a la izquierda.
− Es recomendable poner el valor entre dobles comillas para que sea más legible.()
- ESTRUCTURA BÁSICA
− Las etiquetas que utilicemos en HTML siempre van a ir entre los símbolos “”. Y cada vez que tengamos que cerrar una etiqueta, pondremos el nombre correspondiente comenzando con el símbolo “/”.
− Todas las etiquetas afectan al código que se encuentre delimitado entre la apertura y cierre de la etiqueta correspondiente.
− Estructura básica:
>html> Inicio del documento
>head> Comienzo de la cabecera
>title> Título del documento >/title)
>/head> Fin de cabecera
>body> Inicio del cuerpo
...
>/body> Fin de cuerpo
>/html> Fin documento
− HTML5, mediante unas etiquetas nuevas, añade una serie de características y elementos cuya función es facilitar la tarea a los autores de la aplicación web.
− HTML5 se basa principalmente en una estructuración avanzada que se encarga de definir los contenidos agrupándolos en distintas etiquetas que tengan un nombre asignado correspondiente con la tarea que se va a realizar.
− Etiquetas básicas HTML5
• >header> Encabezado de la página.
• >nav> Enlaces de navegación.
• >article> Algún artículo que se haya publicado.
• >section> Parte correspondiente a algún artículo.
• >aside> Barras laterales.
• >footer> Pie de página.
• >dialog> Distintos diálogos o comentarios.
− Además de estas etiquetas, HTML5 también cuenta con elementos como >div> y >span>, que utilizados para poder agrupar los diferentes elementos hijos haciendo
uso de atributos como: class, id o tittle. De esta manera, se pretende utilizar una misma semántica con un estilo común.>/span> >/div>
15- COMENTARIOS:
− Son unas líneas que definen, de cara al usuario, lo que vamos realizando en cada momento, aunque no se interpretan por el navegador.
− Van escritos entre los símbolos (!- - y - -).
− Por parte del desarrollador, es conveniente utilizar una serie de comentarios para explicar, con sus palabras, lo que se va realizando en cada momento.
- Ejemplo:
> !- - Esto es un comentario - - >
16- NORMAS EN XHTML:
− Para que un documento XHTML esté bien formado debe cumplir una serie de normas que detallamos a continuación:
1) Todas las etiquetas y atributos deben ir en minúsculas. 2) Todas las marcas deben cerrarse. 3) No se permiten errores de acoplamiento entre las marcas. 4) Los valores de los atributos deben ir entre comillas dobles.
17- ELEMENTOS DE UN HTML: CABECERA
− La cabecera del programa se encuentra siempre entre:
> head >
…
> /head >
− Y se encuentra dentro de un elemento superior como es >html>.
− Las marcas que se pueden utilizar dentro de las cabeceras son: >title>, >base>, >meta>, >link>, >object>, >script>, >style>. Todas son opcionales excepto la primera.
− Dentro de la cabecera es donde vamos a definir los elementos generales, como el:
a) título de la página: . Es el título que va a aparecer en el navegador web, en la barra superior.
b) . Encargada de indicar el contenido de nuestras palabras junto con las palabras clave. Esta directiva suele llevar dos atributos: name y content, que hacen referencia al nombre de la página y a sus principales contenidos.
Otro uso diferente de la etiqueta es el “refresco automático” que, transcurrido un tiempo estimado, pasa a actualizarse de nuevo la misma página. Es bastante recomendable para aquellas páginas en las que el contenido se modifica con mucha frecuencia.
Con esta instrucción estamos indicando que, pasados 10 segundos, se acceda a la página web de Google.
c) Otro elemento de mucha utilidad es el elemento , al que le podemos indicar una URL base de algún documento, sonidos, gráficos, etc. Que hagan referencia a una determinada página web.
d) . Define el formato del vínculo a la hora de indicar el comando href en el cuerpo.
e) . Lo utilizaremos para insertar, entre su apertura y cierre, un script implementado en otro lenguaje mediante el atributo type, indicamos el lenguaje de programación, y mediante el atributo src definimos la URL del script en el caso de que sea externo,
f) Marca que nos permite insertar una hoja de estilo en la cabecera. Mediante el atributo type, indicamos el lenguaje del estilo. En este caso, utilizaremos siempre el CSS.
>style type =”text/css”>
body{
margin-left:40px;
}
*Cuando creamos una página web, es conveniente que, al comienzo, realicemos una planificación de su diseño para, después, ordenar la información y recursos disponibles que se van a ofrecer. Para llevar a cabo esta tarea, es recomendable que hagamos uso de una estructura de directorios.
18- ELEMENTOS DE UN HTML: CUERPO DEL DOCUMENTO
− El cuerpo del programa se encuentra siempre entre:
>body>
…
>/body>
− Siempre situado detrás de la cabecera . Va a contener todo el cuerpo correspondiente a una determinada página web junto con los elementos propios de la página como pueden ser gráficos, textos, imágenes, etc.
− En el cuerpo de un programa también tenemos la posibilidad de definir una serie de acciones necesarias para eventos más concretos, entre los que podemos destacar:
1) onload. Cuando se descarga el contenido completo de una página. 2) onunload. Cuando un documento se va a descargar. 3) ononline. Cuando hay conexión a Internet. 4) onoffline. Cuando no hay conexión a Internet. 5) onafterprint. Cuando terminamos de imprimir un documento. 6) onbeforeprint. Cuando finalizamos la impresión de un documento.
− Además, existen un conjunto de atributos (opcionales) de que permiten realizar diferentes configuraciones sobre la apariencia de un documento. Hoy en día están obsoletos, ya que HTML5 no los soporta. Algunos de ellos son: bgcolor, text, link y vlink.
− Existen algunos atributos que sí son recomendables utilizar en la marca , como pueden ser:
a) id: para identificar el elemento para la hoja de estilo. b) class: para asignar un nombre de la clase de la hoja de estilo y, de esta forma, poder mejorar su rendimiento. c) title: para agregar un comentario y así lo puedan visualizar los navegadores. d) style: aplicamos un estilo a este elemento.
19- LOS ELEMENTOS DEL CUERPO SE PUEDEN DIVIDIR EN:
− Elementos de bloque, cuando en su interior contiene otros elementos de HTML y la propia información, formando así una gran estructura.
− Elementos de línea, estos elementos, solo pueden contener datos y otros elementos de línea.
20: CABECERAS:
− Existen seis tipos diferentes de cabeceras (elementos de encabezado).
− Las marcas de apertura y cierre son obligatorias, y el atributo que podemos utilizar es align para alinear este título.
− Los tipos de cabecera son: >h1> >/h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
− El texto que se escriba en h1 va a ser el del título de mayor tamaño hasta el de h6, que va a ser el menor.
21- PÁRRAFOS
− Es una de las marcas más utilizadas. No puede contener elementos de bloque en su interior. Todos los párrafos del documento web van a ser bloques delimitados por la marca p, dejando al navegador el ajuste al ancho de la página.
− A la hora de insertar un espacio es necesario insertarlo mediante el carácter  , ya que habrá navegadores que ignoren el espacio en blanco del teclado.
<p> Escribe un texto en forma de párrafo.</p> <blockquote> Permite visualizar una cita con el margen izquierdo mayor produciéndose un efecto de una sangría.</blockquote> <pre> Devuelve una copia exacta del texto respetando los espacios en blanco, tabulaciones y retorno de carro, es decir, tal y como se ha escrito.</pre>
22- SALTOS DE LÍNEA:
− <br></br>Representa un salto de línea entre párrafos, ya que el salto de línea del teclado lo ignora el navegador. No necesita marca de cierre.
− <hr>Existe una forma de separar cada párrafo, utilizando una línea horizontal visible. No necesita etiqueta de cierre y podemos utilizar los siguientes atributos: align, noshade, size, width.
23- SEMÁNTICA EN TEXTOS:
− Son una serie de elementos HTML que ofrecen un significado a una parte del contenido de un texto, haciendo uso del texto en negrita, subrayado o cursiva (<b></b>, <u> </u> y <i> </i>).
<b> Negrita
<i> Cursiva
<big> Agrandar el tamaño. Se puede introducir varios comandos para hacerlos más grande
<small> Pequeño. Funciona de la misma forma que big
o Tachado de texto
<u> Subrayado</u></small></big></i></b>
24- COLORES:
− Podemos representar los colores mediante el símbolo de “#” seguido de tres pares de dígitos hexadecimales.
− El rango de colores indica la intensidad de los colores
primarios (rojo, verde y azul), que en dígitos hexadecimales son (#RRVVAA).
− Los diferentes pares de cifras hexadecimal van a oscilar desde 00 hasta FF proporcionando un rango que va desde 0 hasta 255 valores diferentes.
− Otra forma de expresar colores en HTML es haciendo uso de una notación hexadecimal más corta, que utiliza un dígito para cada color (#JVA). En este caso, el rango de valores va a oscilar entre 0 y 15 o, si lo preferimos, podemos indicar el color de forma directa: red, green, blue.
25- HIPERVÍNCULOS:
− 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:
<a> </a>
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 <a> 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.</a>
- 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.</a>
26- ANCLAS Y VÍNCULOS INTERNOS:
- 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.
27- RUTAS RELATIVAS Y ABSOLUTAS:
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.
28- IMÁGENES:
- 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 <img></img> 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.
29- INCORPORACIÓN DE IMÁGENES:
- 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 <img></img>, 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.
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.
30- USO DE MAPAS SENSIBLES:
- 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 <img></img>.
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.
31- LISTAS:
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:
<ol>
<li>Apartado 1</li>
<li>Apartado 2</li>
...
</ol>
- La directiva <ol> 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:
- 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:
- Expresa números desde 1, 2, 3, etc.
- 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:
</ol><ul>
<li>Apartado 1</li>
<li>Apartado 2</li>
...
</ul>
- La directiva <ul> tiene disponibles los siguientes parámetros:> Type = tipo. Nos permite seleccionar el tipo viñetas que deseemos.
- En HTML5, podemos diferenciar entre los siguientes tipos:
> disk. Expresa una viñeta en forma de disco.
> circle. Expresa una viñeta en forma de círculo.
> square. Expresa una viñeta en forma de cuadrado.
__________________
C) Listas de definición o glosario: - Ofrece la posibilidad de poder representar los diferentes elementos de un diccionario formado por su término y su definición.
- En las listas de definición, se utilizan las directivas:
<dl>
<dt>Coche</dt>
<dd>Vehículo de cuatro ruedas</dd>
<dt>Moto</dt>
<dd>Vehículo de dos ruedas</dd>
...
</dl></ul>
32- AGRUPACIÓN DE CONTENIDOS:
<div></div>
- Esta marca sirve para agrupar varios elementos dentro de un bloque y permite asignarle un identificador.
33- TABLAS:
- 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.
34- COMBINACIÓN DE CELDAS:
- 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
35- FILAS, COLUMNAS Y CELDAS:
- 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.
36- FORMULARIOS:
- 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).
37- PROPIEDADES DE LOS FORMULARIOS:
- 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:
»_space; “_blank”. Se muestra en una ventana nueva.
»_space; “_self”. Se muestra en la misma ventana del formulario.
»_space; “_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.
38- ELEMENTOS DE LOS FORMULARIOS:
- 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>
39- MARCOS (frames):
- 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.
40- USO DE MARCOS:
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)41- OBJETOS MULTIMEDIA:
> > > 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”>
42- VERSIONES DE HTML y XHTML: HTML
- 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).
43- XHTML:
- 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.
44- HERRAMIENTAS DE DISEÑO WEB:
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.
45- HERRAMIENTAS DE DISEÑO WEB:
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.
46- EDITORES AVANZADOS:
- 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.
47- GESTORES DE LENGUAJES HTML:
- 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.
48- HOJAS DE ESTILO:
- 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.
49- SINTAXIS: Incluir CSS en un documento
- 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.
50- CONSTRUIR REGLAS CSS:
- 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:
/*.....*/
51- SELECTORES:
> 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 <p>, y para poder diferenciarlos, debemos hacer uso del atributo.
</p><h3 class="“grande”">Texto1</h3> <p class="“grande”">Texto2</p> <p class="“peque”">Texto3</p>
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; }
<h1>Texto1</h1>
<p>
Primera linea <br>
Segunda linea <br>
Tercera linea <br>
Cuarta linea <br>
</p>
52- MODELO DE CAJAS: Fundamentos
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:
- Contenido (content): texto, imágenes, vídeos, listas del elemento.
- Relleno (padding): espacio que queda entre el contenido y el borde.
- Bordes (border): la línea que agrupa el contenido junto con su relleno.
- Imagen de fondo (background-image): es la imagen que se visualiza detrás del contenido y del espacio de relleno.
- Color de fondo (background-color): el color que se visualiza detrás del contenido y del espacio de relleno.
- 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.
53- MODELO DE CAJAS: Ancho, alto
- 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.
54- MODELO DE CAJAS: Margin, Padding
- 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|autoo 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|autoo Se puede aplicar a todos los elementos excepto cabeceras y pies de tablas.
55- MODELO DE CAJAS: Bordes
- 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.
56- MODELO DE CAJAS: Colores y Fondos
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.
57- MODELO DE CAJAS: Posicionamiento
- 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>
<p>Esta caja tiene posición normal o estática</p>
<a> Enlace 1 </a>
<a> Enlace 2 </a>
<a> Enlace 3 </a>
>/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.
58- MODELO DE CAJAS: Visualización
- 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.
59- MODELO DE CAJAS: Texto
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
60- MODELO DE CAJAS: Listas
List-style-type: disc | circle | Viñeta usada para los
square | decimal | elementos de la lista
decimal-leading-zero |
lower-roman | upper-roman
| lower-greek | lower-latin |
upper-latin | armenian |
georgian | lower-alpha |
upper-alpha | none | inherit
List-style-position: inside | Posición de la viñeta
outside | inherit
List-style-image: | none | Sustituye la viñeta por
inherit una imagen
List-style: (propiedad shorthand) Combina las anteriores
61- MODELO DE CAJAS: Tablas
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
62- MODELO DE CAJAS: Formularios
- 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)
63- MODELO DE CAJAS: Layout
- Podemos representar el diseño general de una estructura de página a través de capas <div>.
- 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.</div>
64- MODELO DE CAJAS: Prioridad
- 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.
65- MISCELÁNEA:
• 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/
66- DEFINICIÓN DE ESQUEMAS Y VOCABULARIOS DE XML:
- 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.
67- VALIDACIÓN. DOCUMENTOS XML VÁLIDOS:
- 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.
68- VALIDACIÓN DE DOCUMENTOS XML CON DTD:
- 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.
69- GENERACIÓN AUTOMÁTICA DE DTDs:
- 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
70- ESTRUCTURA Y ELEMENTOS DE UN DTD:
- 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.
71- DECLARACIÓN DE UN DTD:
- Para declarar un DTD, lo haremos siempre al comenzar un documento XML: (!DOCTYPE)
72- REGLAS QUE DEBEMOS SEGUIR EN UN DTD:
- Y debemos seguir una serie de reglas que lo forman:
a) UBICACIÓN. Donde se encuentran las reglas del DTD.
»_space; Interno. Cuando las reglas se encuentran en el mismo documento XML.
»_space; Externo. Cuando las reglas se encuentran en un archivo independiente.
»_space; 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.
»_space; Uso privado. Identificado por la palabra SYSTEM.
»_space; 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.
73- COMBINACIONES POSIBLES EN UN DTD:
- Entre las diferentes COMBINACIONES posibles, encontramos las siguientes:
> !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.
74- COMPONENTES DEL DTD:
- Los principales componentes que tenemos en un DTD son:
> !ELEMENT elemento,
> !ATTLIST atributo,
> !ENTITY entidad y notación.
75- COMPONENTE ELEMENT DEL DTD: (!ELEMENT)
- 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:
»_space; 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.
»_space; 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.
¿ 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.
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.
76- COMPONENTE ATTLIST DEL DTD: (!ATTLIST)
- 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:
»_space; Un valor de texto que debe ir entre comillas.
»_space; #IMPLIED es opcional y no lleva asignado ningún valor por defecto.
»_space; #REQUIRED es un valor obligatorio, aunque no lleva asignado ningún valor por defecto.
»_space; #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:
»_space; CDATA. Hace referencia a aquellos caracteres que no disponen de etiquetas.
»_space; ENTITY. Asociado al nombre de una entidad.
»_space; Enumerado. Lista de distintos valores entre los que se debe encontrar el valor uno.
»_space; ID. Identificador único que permite identificar elementos.
»_space; IDREF. Valor correspondiente a un atributo ID de un elemento diferente.
»_space; IDREFS. Permite representar una gran cantidad de IDs correspondientes a otros elementos, que deben estar separados entre ellos por un espacio en blanco.
»_space; 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.
»_space; NMTOKENS. Igual que la anterior, pero en este caso, hace referencia a una lista de nombres que van separados entre ellos por un espacio.
»_space; NOTATION. Nombre de notación que debe estar definido previamente en el DTD.
77- COMPONENTE ENTITY DEL DTD: (!ENTITY)
- 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>
78- COMPONENTE NOTATION DEL DTD: (!NOTATION)
- 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”>
79- VALIDACIÓN DE DOCUMENTOS XML CON ESQUEMAS XML:
- 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.
80- HERRAMIENTAS PARA VALIDAR ESQUEMAS:
- 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
81- HERRAMIENTA 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:
- Herramientas online:
http: //www.freeformatter.com/xsd-generator.html - Editores XML que cuentan con esta funcionalidad:
XMLSPY de Altova
82- COMPONENTES Y ESTRUCTURA DE ESQUEMA XML:
- 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>
83- COMPONENTES BÁSICOS DE UN ESQUEMA:
- 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.
84- TIPOS DE DATOS:
- 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.
85- DEFINICIÓN DEL TIPO PREDEFINIDO ESPECIAL:
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
86- NUMÉRICOS:
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.
87- DE FECHA Y HORA:
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.
88- DE TEXTO:
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.
89- BINARIOS:
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.
90- BOOLEANOS:
Tipo de datos - Descripción
- boolean Puede tener 4 valores: 0, 1, true y false.
91- TIPOS DE DATOS SIMPLES:
− 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.
93- FACETA PARA RESTRINGIR EL RANGO DE VALORES:
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
94- TIPOS DE DATOS COMPLEJOS:
− 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)
95- DISTINTOS MODELOS DE CONTENIDO:
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:
96- xs: complexType
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.
97- LENGUAJES BASADOS EN XML:
- 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.
