Como usar archivos XML en Flash

Publicado por LeoBaraldi el 29th Jun, 2008

Cuando nos encontramos con proyectos donde el cliente debe cargar datos de tipo dinámicos o datos que son sensibles a nuevos cambios la mejor manera de afrontar esos proyectos es usando XML, el potencia que tiene un XML es la posibilidad de manipular grande cantidades de información de una manera organizada y estructurada y simple de modificar, sin la necesidad de tocar nuestro SWF.

Para aquellos que quieran saber cómo construir un archivo de tipo XML o quieran saber como es su estructura les vendría bien leer el siguiente artículo: http://www.leobaraldi.com.ar/2008/03/09/que-es-un-archivo-xml-y-escribir-archivos-xml
En este artículo veremos cómo cargar y gestionar un archivo XML para una galería de imágenes que el mismo roten con un intervalo de tiempo más los controles habituales e información para cada imagen. En este caso también vamos a hacer uso de AS 2.0 recuerden que todos estos tutoriales vamos a ir pasándolos a AS 3.0 a medida que el tiempo surja.
Para utilizar XML flash cuenta con una clase nativa para ello, la cual nos permite manipular XML, nodos, métodos y parámetros de todo tipo. Como toda clase simplemente para comenzar a utilizarla debemos crear un nuevo objeto de tipo XML de la siguiente manera:
var miXML:XML = new XML();

Los siguientes pasos seria comenzar a levantar la información de nuestro XML y guardarla en el objeto XML que creamos (miXML), para ello usaremos el siguiente método” load” y el controlador onLoad para saber que sucede con nuestros datos. Ahora en mas la explicaciones van dentro del código cosa que vamos ir viendo paso a paso como trabajar el objeto XML.
Antes que todo vamos a necesitar por supuesto tener nuestro XML con su estructura y datos ya conformados, en este caso particular lo vamos a diseñar de la siguiente manera.
estructura xml para flash
Importante: Nunca olvidarse de los cierre de cada nodo, sea padre o hijos!!!

Una vez que ya tenemos nuestro archivo XML con su estructura definida ya podemos pasar a nuestro AS, no es necesario por ahora que nuestro XML tenga todos los datos cargados, simplemente con que ya tengamos su estructura es suficiente para comenzar, después a su momento editaremos el XML con la información real requerida.

Actionscript:
  1. //System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
  2. var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
  3. var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
  4. miXML.ignoreWhite = true;//Que ignore las lineas en blanco que puedan existir entre nodos y nodos
  5.  
  6. //El siguiente paso seria cargar nuestro archivo XML atravez de un controlador (onLoad)
  7. miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
  8. if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
  9. trace("carga exitosa!!!")
  10. } else {//si la carga no se realizo ejecutamos lo siguiente
  11. trace("error al cargar XML");
  12. }
  13. };
  14. miXML.load(urlXML);//iniamos la carga de nuestro XML, la funcion superior se encargara
  15. //de detectar si se realizo con exito o no

Hasta aquí lo único que se realizo fue la carga a nuestro  SWF del XML, posteriormente ahora trabajaremos en el uso del mismo.  El paso más importante a continuación es guardar todos los nodos hijos (foto) y  su información en un Array, sería como que cada uno de los nodos con todos sus  datos lo pusiéramos en una carpeta individual para cada nodo y todas estas  carpetas dentro de un archivador que sería nuestro Array.

Actionscript:
  1. //System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
  2. var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
  3. var id:Number = 0;//esta variable de tipo numerica es para indicar que hijo queremos llamar, ya que
  4. //los Array funcionan como un casillero diferenciados por numero
  5. var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
  6. miXML.ignoreWhite = true;//Que ignore las lineas en blanco que puedan existir entre nodos y nodos
  7.  
  8. //El siguiente paso seria cargar nuestro archivo XML atravez de un controlador (onLoad)
  9. miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
  10. if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
  11. misNodos_Array = this.firstChild.childNodes;//creamos una variable de tipo array donde almacenamos
  12. //cada uno de los nodos. La particula this hace referencia a miXML, firstChild es el nodo principal
  13. //de nuestro XML  y childNodes son los nodos que estan dentro del nodo principal
  14. //en definitiva le indicamos que solo guarde TODOS los nodos despues del nodo principal.
  15. //si despues de esta linea pusieramos trace(misNodos_Array) el panel de salida nos muestra los
  16. //nodos almacenados en nuestro Array
  17. mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc); //cargamos el primer nodo
  18. //misNodos_Array[id]<----este es el nodo que llamamos, entre [] va el numero referencia a la posicion
  19. //que ocupa en el array, en este caso (0) - .attributes.url <--- con la particula attributes indicamos
  20. //que atrubuto queremos cargar, en este caso la url que le corresponde al nodo 0
  21. comenzarIntervalo();//inicializamos el temporizador
  22. } else {//si la carga no se realizo ejecutamos lo siguiente
  23. trace("error al cargar XML");
  24. }
  25. };
  26. miXML.load(urlXML);//iniamos la carga de nuestro XML, la funcion superior se encargara
  27. //de detectar si se realizo con exito o no
  28. //FUNCION ENCARGADA DE CARGAR LAS FOTOS
  29. function loadImagen() {
  30. if (id<misNodos_Array.length-1) {//condicional para hacer un loop continuo, cuando llegamos a la
  31. //ultima foto que regrese a la primera y asi perpetuamente
  32. id++;//incremento el valor de id, este es la referencia a la posicion del array
  33. } else {
  34. id = 0;//si llegue al final del array comienzo de nuevo el recorrido
  35. }
  36. mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc);//cargamos la imagen
  37. }
  38. //OTROS ELEMENTOS NECESARIOS
  39. this.createEmptyMovieClip("contenedor_mc",this.getNextHighestDepth());//creamos un contenedor donde enviar
  40. //nuestras imagenes
  41.  
  42. //ACCION DE CARGA POR INTERVALOS DE TIEMPO
  43. var intervalId:Number;
  44. var duracion:Number = 10000;//tiempo de espera entre foto y foto en milisegundos 1000=1 segundo
  45. function comenzarIntervalo():Void {
  46. if (intervalId != null) {
  47. clearInterval(intervalId);
  48. }
  49. intervalId = setInterval(this, "loadImagen", duracion);
  50. }
  51.  
  52. //GESTOR DE CARGA DE IMAGENES
  53. var mcLoader:MovieClipLoader = new MovieClipLoader();
  54. var escuchar:Object = new Object();
  55. escuchar.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {//porcentaje de carga de la imagen
  56. var persoTotal = bytesTotal;
  57. var cargados = bytesLoaded;
  58. var porcentaje = Math.round(cargados*100/persoTotal);
  59. var miFormat:TextFormat = new TextFormat();//formateo el campo de texto %
  60. miFormat.size = 40;
  61. miFormat.color = 0xFFFFFF;
  62. miFormat.font = "arial";
  63. porcentaje_txt.text = porcentaje+"%";
  64. porcentaje_txt.setTextFormat(miFormat);
  65. };
  66. escuchar.onLoadInit = function(target:MovieClip) {
  67. };
  68. escuchar.onLoadStart = function(target:MovieClip) {
  69. //creo el campo de texto para porcentaje
  70. target._parent.createTextField("porcentaje_txt",target._parent.getNextHighestDepth(),10,10,1,1);
  71. porcentaje_txt.autoSize = true;
  72. porcentaje_txt.background = true;
  73. porcentaje_txt.backgroundColor = 0x000000;
  74. descripcion_txt.text = "";
  75. descripcion_txt.removeTextField();
  76. };
  77. escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
  78. porcentaje_txt.removeTextField();
  79. //creo el campo de texto para la descripcion
  80. target._parent.createTextField("descripcion_txt",target._parent.getNextHighestDepth(),0,Stage.height-40,Stage.width,35);
  81. descripcion_txt.autoSize = false;
  82. descripcion_txt.textColor = 0xFFFFFF;
  83. descripcion_txt.background = true;
  84. descripcion_txt.backgroundColor = 0x000000;
  85. descripcion_txt.text = " "+misNodos_Array[id].attributes.titulo+" "+newline;
  86. descripcion_txt.text += " "+misNodos_Array[id].firstChild+" ";
  87. efectoBlur();
  88. };
  89. mcLoader.addListener(escuchar);
  90.  
  91. //EFECTO BLUR PARA CADA IMAGEN CARGADA
  92. function efectoBlur() {
  93. import flash.filters.BlurFilter;
  94. var blurX:Number = 30;
  95. var blurY:Number = 30;
  96. var quality:Number = 3;
  97. var filterArray:Array = new Array();
  98.  
  99. this.onEnterFrame = function() {
  100. var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
  101. filterArray.push(filter);
  102. contenedor_mc.filters = filterArray;
  103. blurX--;
  104. blurY--;
  105. filterArray = [];
  106. if (blurX<=0 || blurY<=0) {
  107. delete this.onEnterFrame;
  108. }
  109. };
  110. }

Descargar archivos
Ver ejemplo funcionando

En el siguiente grafico pueden darse cuenta cómo funciona la  estructura del XML y como flash la interpreta según este caso particular, pero  el principio general es el mismo en todos los casos

diagrama funcionamiento xml en flash
En conclusión como pueden observar simplemente con pocas líneas de AS y un archivo XML hemos logrado una pequeña y simple galería que solo pesa 2kb y es totalmente actualizable desde afuera del SWF con solo modificar el XML . Estaría de mas decir e imaginar las virtudes y posibilidades que dan el uso de archivos XML.

1º de Mayo, Día del trabajador

Publicado por LeoBaraldi el 30th Abr, 2008

A todos los que día a día con el trabajo, el esfuerzo dignifican su vida y hacen de este país un lugar mejor para el futuro, les deseo un feliz día del trabajador!

716045_hands.jpgArtículo 23 de los derechos humanos

1. Toda persona tiene derecho al trabajo, a la libre elección de su trabajo, a condiciones equitativas y satisfactorias de trabajo y a la protección contra el desempleo.

2. Toda persona tiene derecho, sin discriminación alguna, a igual salario por trabajo igual.

3. Toda persona que trabaja tiene derecho a una remuneración equitativa y satisfactoria, que le asegure, así como a su familia, una existencia conforme a la dignidad humana y que será completada, en caso necesario, por cualesquiera otros medios de protección social.

4. Toda persona tiene derecho a fundar sindicatos y a sindicarse para la defensa de sus intereses.

“Los derechos humanos son de los pueblos y no de los gobiernos”

Adobe Flash Player 9 con soporte para Video h.264 o de alta definición (HD)

Publicado por LeoBaraldi el 6th Abr, 2008

Adobe flash 9.0.115.0 que ya se encuentra disponible para descargar trae como novedad el soporte de video en alta resolución bajo el estándar h.264 o MPEG-4 parte 10. Este formato de compresión está diseñado para mejorar notablemente la calidad del video y su compresión con relación a la calidad / peso, logrando una excelente imagen, sea a modo ventana como fullscreen. En versiones anteriores de Flash Player cuando usábamos un componente de video o la clase netStream estábamos limitados a solo poder llamar archivos FLV, pero ya en esta nueva versión podremos llamar y cargar archivos FLV, MOV, MP4 y 3GP.
Lamentablemente el Flash Video Encoder no codifica en h.264 y por lo tanto lo deberemos hacer desde otros programas como por ejemplo Adobe Premier.
A continuación les dejo un ejemplo como siempre para que puedan verlo funcionar y puedan descargárselo. Recuerda que sino ves el video es porque tu Flash Player es antiguo.
IMPORTANTE: Cuando usen video h.264 en sus proyectos recuerden que para pre visualizarlos lo deben hacer desde su navegador web.
Action:

Actionscript:
  1. //url del video, en este caso lo levantamos de apple
  2. var URLvideo:String = "http://movies.apple.com/movies/disney/wall-e/wall-e-vignette_h480p.mov";
  3. //definimos variables
  4. var duracion:Number = 0;
  5. var ancho:Number = 0;
  6. var alto:Number = 0;
  7. var anchoInicial:Number = Stage.width;
  8. var anchoMax:Number = System.capabilities.screenResolutionX;
  9. //escuchador para nuestro Stage
  10. var escuchador:Object = new Object();
  11. var escala:Number = 100;
  12. //nuestro campo de texto y posicion
  13. datos_txt.html = true;
  14. datos_txt.wordWrap = true;
  15. datos_txt._x = datos_txt._y=10;
  16. //creamos un objeto para la recepcion del flujo de video
  17. var mi_nc:NetConnection = new NetConnection();
  18. mi_nc.connect(null);
  19. //creamos un controlador para el video
  20. var stream_ns:NetStream = new NetStream(mi_nc);
  21. stream_ns.setBufferTime(10);
  22. //
  23. mi_video.attachVideo(stream_ns);
  24. //suavizamos el video
  25. mi_video.smoothing = true;
  26. //posicionamos al centro de la pantalla el video
  27. mi_video._x = (Stage.width/2)-(mi_video._width/2);
  28. mi_video._y = (Stage.height/2)-(mi_video._height/2);
  29. stream_ns.play(URLvideo);
  30. //leemos la duracion del video, ancho y alto del video
  31. stream_ns.onMetaData = function(infoObject:Object) {
  32. duracion = Number(Math.floor(infoObject.duration));
  33. ancho = Number(Math.floor(infoObject.width));
  34. alto = Number(Math.floor(infoObject.height));
  35. };
  36. //calculamos buffer, tiempo, fps y segundos reproducidos
  37. var bufferInterval:Number = setInterval(checkBufferTime, 100, stream_ns);
  38. function checkBufferTime(stream_ns:NetStream):Void {
  39. var bufferPorc:Number = Math.min(Math.round(stream_ns.bufferLength/stream_ns.bufferTime*100), 100);
  40. datos_txt.htmlText = "<font color="#ff0000"><strong><u>ESTADISTICAS</u></strong></font>";
  41. datos_txt.htmlText += "<strong>Tiempo de buffer: </strong>"+stream_ns.bufferTime+"''";
  42. datos_txt.htmlText += "<strong>Porcentaje en buffer: </strong> "+bufferPorc+"%";
  43. datos_txt.htmlText += "<strong>FPS: </strong>"+Math.floor(stream_ns.currentFps);
  44. datos_txt.htmlText += "<strong>Segundos transcurridos: </strong>"+Math.floor(stream_ns.time)+"'' de "+duracion+"''";
  45. datos_txt.htmlText += "<strong>Ancho: </strong>"+ancho+"px | <strong>Alto: </strong>"+alto+"px";
  46. }
  47. //accion para el boton pantalla completa
  48. full_btn._x = Stage.width-(full_btn._width+10);
  49. full_btn._y = 10;
  50. full_btn.onRelease = function() {
  51. Stage.displayState = Stage.displayState == "normal" ? "fullScreen" : "normal";
  52. };
  53. //acciones si se cambio el estado de la pantalla
  54. escuchador.onResize = function() {
  55. //porcentaje de escala para el video
  56. escala = Math.floor((Stage.width/848)*100);
  57. //
  58. if (Stage.displayState == "normal") {
  59. mi_video._width = ancho;
  60. mi_video._height = alto;
  61. } else {
  62. mi_video._width = (ancho*escala)/100;
  63. mi_video._height = (alto*escala)/100;
  64. }
  65. reacomodar();
  66. };
  67. Stage.addListener(escuchador);
  68. //reacomodar los elementos segun el estado de la pantalla
  69. function reacomodar() {
  70. full_btn._x = Stage.width-(full_btn._width+10);
  71. full_btn._y = 10;
  72. mi_video._x = (Stage.width/2)-(mi_video._width/2);
  73. mi_video._y = (Stage.height/2)-(mi_video._height/2);
  74. }

Ver ejemplo funcionando
Descargar archivos

Hacer formulario Whois para dominios .com.ar

Publicado por LeoBaraldi el 11th Mar, 2008

Bueno mirando y mirando no encontré nada, como saben mi herramienta preferida es flash y como esto lo necesitaba de urgencia para un trabajo que estoy armando dio como resultado en unas horitas un Whois para saber la disponibilidad de nombres de dominios .com.ar.
Bueno se los dejo porque vi muchas consultas sobre el tema, espero que sirva!

Actionscript:
  1. //simple proto para buscar una cadena
  2. String.prototype.findstring = function(string) {
  3.     if (this.indexOf(string) != -1) {
  4.         return true;
  5.     } else {
  6.         return false;
  7.     }
  8. };
  9. //aca si queremos definir un dominio donde esta nuestro swf
  10. var dominio:String = "";
  11. //el php que hace la consulta
  12. var file:String = "whois.php";
  13. //almaceno el resultado
  14. var resultado:String = "";
  15. //compruebo si esta disponible
  16. function comprobar(nombre) {
  17.     resultado_txt.text = "";
  18.     loading_mc._visible = true;
  19.     //
  20.     var my_lv:LoadVars = new LoadVars();
  21.     my_lv.nombre = nombre;
  22.     my_lv.sendAndLoad(dominio+file,my_lv,"GET");
  23.     my_lv.onLoad = function() {
  24.         resultado = unescape(my_lv.toString());
  25.         if (_root.resultado.findstring("disponible")) {
  26.             resultado_txt.text = ">> SI esta disponible!";
  27.         } else {
  28.             resultado_txt.text = ">> NO disponible!";
  29.         }
  30.         comprobar_btn.enabled = true;
  31.         loading_mc._visible = false;
  32.     };
  33. }
  34. //accion del boton
  35. comprobar_btn.onRelease = function() {
  36.     if (dominio_txt.text != "") {
  37.         this.enabled = false;
  38.         comprobar(dominio_txt.text);
  39.     } else {
  40.         resultado_txt.text = ">>indica un dominio";
  41.     }
  42. };
  43. loading_mc._visible = false;

PHP:
  1. <?php
  2. $nombre = $_GET['nombre'];
  3. $dominio='.com.ar';
  4. $consulta='nombre='.urlencode($nombre).'&'.'dominio='.urlencode($dominio);
  5. $ch = curl_init ("http://www.nic.ar/consdom.html");
  6. curl_setopt($ch, CURLOPT_REFERER, "http://www.nic.ar/consdom.html");
  7. curl_setopt($ch, CURLOPT_POSTFIELDS, $consulta);
  8. curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
  9. $salida = curl_exec ($ch);
  10. echo $salida;
  11. ?>

Archivos utilizados
Ejemplo funcionando

Que es un archivo XML y como crear archivos XML

Publicado por LeoBaraldi el 9th Mar, 2008

Sin dudas la mejor definición de XML nos la da el mata burros de wikipedia que dice así:

“La tecnología XML busca dar solución al problema de expresar información estructurada de la manera más abstracta y reutilizable posible. Que la información sea estructurada quiere decir que se compone de partes bien definidas, y que esas partes se componen a su vez de otras partes. Entonces se tiene un árbol de pedazos de información. Ejemplos son un tema musical, que se compone de compases, que están formados a su vez con notas. Estas partes se llaman elementos, y se las señala mediante etiquetas.
Una etiqueta consiste en una marca hecha en el documento, que señala una porción de éste como un elemento. Un pedazo de información con un sentido claro y definido. Las etiquetas tienen la forma <nombre>, donde nombre es el nombre del elemento que se está señalando.”
Teniendo en cuenta esta definición podríamos definir un XML para una lista de temas musicales de esta manera:

XML:
  1. <MUSICA>
  2.  
  3. <tema titulo=”la dormida” autor=”Kevin Chuca” interprete=”Esteban Quito”>
  4. </tema>
  5. <tema titulo=”Cuesta arriba” autor=”Juan Cito” interprete=”Kadorna”>
  6. </tema>
  7.  
  8. </MUSICA>

Como pueden observar la información está fragmentada pero a su vez está organizada de manera secuencial y en un orden jerárquico, digamos que <MUSICA> es el padre de <tema> porque cada uno de los <tema> que son nodos se encuentra dentro de la etiqueta <MUSICA> que agrupa todos los hijos o nodos tema.
Pero para que un archivo realmente cumpla con las normas de XML no solo debe respetar esta estructura jerárquica sino también debe incluir elementos obligatorios como es el tipo de codificación de lenguaje o prólogo.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <MUSICA>
  3. <tema titulo="la dormida" autor="Kevin Chuca" interprete="Esteban Quito">
  4. </tema>
  5. <tema titulo="Cuesta arriba" autor="Juan Cito" interprete="Kadorna">
  6. </tema>
  7. </MUSICA>

Como pueden observar se agrego una nueva línea en la parte superior del XML que cumple con la función de indicar el tipo de versión “1.0” y el tipo de codificación de lenguaje “utf-8” que en este caso es para poder nosotros usar alfabeto español dentro de la estructura del XML (ñ)
Otro elemento importante de un XML son sus atributos y estos son elementos que estan indicado dentro de una etiqueta y anteponiéndose al signo igual (=), estos atributos nos son de gran utilidad si es que queremos incluir información extenza, si observan en ejemplo verán que titulo="la dormida" es un atributo y su contenido es “la dormida”. La manera correcta de escribir un atributo es no usar letras como ñ o acentuadas como nombre de atributo. Posterior al signo igual (=) entre comillas ya sean dobles o simples indicamos el valor del atributo “la dormida”.
El valor del atributo si puede tener espacios, ñ o acentos lo que si deben tener cuidado con el uso de las comillas, si para encerrar el valor del atributo usando comillas dobles y necesitamos volver a utilizar comillas, en este caso dentro del valor pondremos comillas simple, o viceversa.
Los atributos son usados en la mayoría de los casos para representar información corta, por ejemplo duración del tema, nombre del tema, autor pero si quisiéramos almacenar una descripción sea del tema o del disco ya no es para nada aconsejable usar un atributo para dicho fin, en ese caso nos haremos uso de una nueva etiqueta llamada CDATA.
CDATA nos permite dentro de ella colocar todo el texto que queramos y el XML ignorara todos los caracteres internos de este, cosa que ninguna palabra que este allí sea confundida por una etiqueta.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <MUSICA>
  3. <tema titulo="la dormida" autor="Kevin Chuca" interprete="Esteban Quito">
  4. <![CDATA[Este tema lo realizo un amigo que vivía en rio cuarto mientras hablaba por su celu y ....]]>
  5. </tema>
  6. <tema titulo="Cuesta arriba" autor="Juan Cito" interprete="Kadorna">
  7. <![CDATA[Cada vez que escucho este tema me recuerda a mi primo 'tucho' que es un atorrante....]]>
  8. </tema>
  9.  
  10. </MUSICA>

Como pueden observar las etiquetas CDATA están dentro del cuerpo de cada <tema> por lo tanto seguimos respetando el orden jerárquico de orden de padres a hijos. También es importante respetar la sintaxis de escritura del CDATA de la siguiente manera:
<![CDATA[ aquí el texto ]]>
Conclusión:
indispensable nunca olvidarse:

1º Prólogo: <?xml version="1.0" encoding="utf-8"?>
Siempre al principio de nuestro XML y solo lo indicamos 1 vez
2º Cuerpo: <MUSICA>…..</MUSICA>
Es la etiqueta superior que abarcara todas las sub etiquetas y no abra ni existirá ninguna fuera de ella, esta se declara y se cierra una sola vez.
3º Nodos: <tema>……</tema>
Pueden existir cuanta cantidad de nodos necesiten pero siempre cuando se abre uno <tema> se deben cerrar en alguna parte </tema>, estos nodos pueden tener el mismo nombre de nodo <tema> y cada uno será interpretado como elementos diferentes.
4º Atributos: <tema nombre=”Kevin Chuca”>……</tema>
Los atributos deben ir dentro del nodo y utilizar un nombre lo mas descriptivo posible y corto, su contenido se escribe a continuación del signo = y entre comillas sean simples o dobles. Si usan comillas dobles deberán usar dobles para el resto de sus atributos o viceversa.
5º CDATA: <![CDATA[ …..]]>
Por cada nodo puede existir un CDATA y este se debe abrir con <![CDATA[ y debe cerrarse en algún momento con ]]>
XML según Wikipedia:
XML según w3schools
XML finalizado:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <MUSICA>
  3. <tema titulo="la dormida" autor="Kevin Chuca" interprete="Esteban Quito">
  4. <