Tutorial de XML

Bueno, creo este tutorial porque muchas personas no saben qué es el formato XML, aunque de seguro todos lo hemos oído en uno u otro sitio.

XML es un lenguaje extensible de marcas (eXtensible Markup Language)
Qué quiere decir esto?

Pues es muy fácil, nos sirve para darle un significado especial al lenguaje.

Por ejemplo:

<negrita>Texto</negrita>

Se entiende fácilmente que eso es un texto en negrita, no?

Bien, XML es un metalenguaje, esto es, que XML sirve para crear otros lenguajes, un ejemplo muy famoso, y que de seguro conocen: XHTML.


XML es un lenguaje de marcas (</>) muy estricto, todas las etiquetas se deben cerrar en el orden en que se han abierto, por ejemplo:


Esto nos permite tener una gran cantidad de datos ordenados de manera muy sistemática y sencilla de leer.

Cada documento XML debe tener una y sólo una etiqueta globa (root). Por ejemplo:

ETC


También podemos poenr atributos a las etiquedas, tal cual lo hacemos en XHTML (aunque esto es algo que se heredó de XML)
Por ejemplo:

ETC

Esto es útil cuando tenemos muchos ítems que se repiten, por ejemplo, si estuvieramos haciando un listado o inventario.
También podemos usar las comillas simples ( 'lol' ) pero a mi me gustan mas las otras ñ_ñ
En php tiene un gran efecto usar una u otra, en xml la verdad es que no sé, pero no debería tener ningún efecto.


Como dijimos, todas las etiquetas deben cerrarse en el orden en que se abren, sin embargo hay veces en que no necesitamos cerrar nuestra etiqueta (en realidad no necesitamos poner algo dentro de ella). Podríamos escribir lo mismo así


Eso sería válido.





Bien, vamos a crear un documento, y lo pondremos en el navegador.


Todo documento xml debe tener su declaración, que es la siguiente:

<?xml : Es el inicio de una declaración especial, existen otras.

version="1.0" : Corresponde a la versión XML de nuestro documento, si mal no recuerdo en la actualidad existe la 1.1 pero no es soportada por los navegadores, así que por mientras usaremos siempre la 1.0

encoding : Esto nos permite definir una determinada codificación, no entraré a explicar esto, quizás ustedes puedan buscar en wikipedia o google lo que esto significa, también podemos poner UTF-8.

standalone : Esto le indica al navegador que nuestro documento necesita acceso a internet o no (por ejemplo, para obtener un namespace) Si lo ponemos a yes, significa que trabajemos desconectados.

Esas son las más importantes, todos son opcionales menos el version="1.0"


Bien, empecemos:



Lo guardamos con la extensión .xml y lo abrimos en nuestro navegador, se nos debería mostrar el árbol jerárquico de nuestro documento. Si hubieramos definido una hoja de estilo se habría representado gráficamente, y quedaría muy chulo, ya verán

En la web lo veríamos como esto: Ejemplo 1


Bien, ya tenemos lo básico. Ahora vamos un poco más allá, le daremos estilo.

Para los que sepan CSS lo pillarán rápido, para los que no, pues lo siento xD
Primero agregaremos a nuestro documento la siguiente declaración luego de la primera que pusimos (?xml...), la siguiente:

O sea, quedaría así en mi caso:

Crearemos un fichero .css
Que tendrá esto:

Y lo guardamos.
Verán el cambio de inmediato


En este link: Ejemplo 2

Lo que sí, ya no vemos el árbol y se vé todo desordenado, ya arreglaremos eso. Simplemente le diremos al CSS que nos muestre todos los elementos como si fueran elemenstos del tipo bloque:
Agregamos esto:

Y se nos muestra como sigue:

Ejemplo 2a



Bien, ahora le daremos algun tipo de estilo a nuestro documento, para que se vea mejor (no explicaré el CSS usado ^^') :

Ejemplo 3

Como pueden ver, ha mejorado mucho

En CSS existen distintas propiedades que nos ayudan a manejar de mejor manera los datos, como es muy fácil aplicar estilos a las etiquetas, simplemente ponemos su nombre y listo. No explicaré sobre CSS, ya que si bien es algo que manejo bien, escapa de la mira de este sencillo tutorial.

Si quieren ver mejores resultados pueden ver esto, lo hice cuando seguía un tutorial hace mucho tiempo.

Ejemplo más avanzado de CSS usando displays de tablas


--

Bien, ahora veremos lo correspondiente a los comentarios. En XML los comentarios con iguales que en XHTML (aunque es al revés -.-)

O sea

Podemos ponerlos casi en cualquier lado, menos antes de la declaración <?xml... o dentro de una etiqueta.

Por último, veremos qué son las CDATA.

CDATA es una forma de guardar los datos, cuando se necesitó guardar otros tipos de caracteres, por ejemplo, el < o el >

CDATA corresponde a Character Data, en ellas podremos guardar cuanto se nos antoje, sin que esto genere problemas, y sin tener que escribir los '<' como &lt; por ejemplo.

Se hace así


Veamos como queda en nuestro documento: Ejemplo 4

Como ven se ha mostrado en pantalla tal como esperábamos que fuera
Hagan el intento poniendo esa misma información fuera de una CDATA, y verán las ventajas.





Bien, creo que eso es suficiente, no ahondaré en temas más profundos como los namespaces o las xls, podría haber hablado de XPath o XPointer, pero la verdad es que esto es algo más introductorio que explicativo a profundidad, los invito a buscar ustedes mismos, XML es un lenguaje muy bonito que es realmente útil, y nos sirve mucho. Por ejemplo, quisieramos ordenar un horario, podríamos utilizar XML para su estructura, y posteriormente le damos una CSS para que se vea bonito. Sin contar con que XML es un potente y robusto lenguaje que sirve para casi todo, por ejemplo, vBulletin, este foro que están viendo ahora, maneja todas las frases (palabras) de un lenguaje en un archivo xml con puras CDATAs, creo que ese fichero tiene más de 1800 líneas !


Además de que es actualmente utilizado para lo que es RSS y Ajax, por decir poco jaja

Bien, espero que les haya gustado y hayan aprendido algo, saludos!!

Muy buen tutorial, sencillo y util : D. Ahora, esto se puede trabajar con cualquier programa para diseñar webs (ejemplo Dreamweaver) o es necesario algun programa en especial que soporte XML o XHTML?. Bueno, si fuera algun programa en especial recomienda alguno a ver si veo como funciona esto xD.

+Rep por el tuto : D.

Realmente con Bloc de Notas te basta
Aunque yo uso el Notepad2, es genial. El Dreamwevear lo tengo instalado pero no lo uso nunca, no me gusta que escriban el código por mí ^^'
Y como editor highlight la verdad se queda corto jaja

Saludos!

Hola Zenbaku.
Primero: gracias por este turotial.
Segundo: no tengo "<" ni ">" en mi teclado XD

98% de los adolescentes han fumado, si eres del dichoso 2% que no lo ha hecho, copia y pega esto en tu firma.

Entonces mi recomendación es que te mates xDDD

Nah, debes tenerlo, de seguro debes configurarlo mejor o.o
O...cabe esa posibilidad...de que no tengas las teclas!! no eso si que es un teclado muy malo xD

No se las sacaste por casualidad? xD


Bueno, siempre queda el método de Copiar-Pegar ^^
Saludos

Va, no importa.
Tengo otra duda, no se como usar este reproductor XD
Esta en XML, creo, y no se que tengo que hacer XD

¿qué le tengo que hacer?

98% de los adolescentes han fumado, si eres del dichoso 2% que no lo ha hecho, copia y pega esto en tu firma.

estas equivocada, ese no es un reproductor, es una lista de reproducción que necesita de una aplicación para ser reproducida.