PROGRAMA DE COMPUTACION E INFORMTICA

GUIA DE PRCTICAS # 18

DISEO DE PORTALES WEB

Prof. Gonzalo Anchante Hurtado

Docente

(Gonzalo.anchante@gmail.com)

EJERCICIO APLICADO
Temas
Cmo funciona?
En el ejemplo tenemos tres noticias. Cuando el archivo de Flash se ejecuta, se carga la primera noticia (titulo, mensaje e imagen) y posteriormente podemos pasar a la siguiente y/o anterior haciendo uso de los botones ubicados en la parte superior (flechas de color verde). Los textos (titulo y mensaje) y el nombre de la imagen, son recuperados del archivo noticias.xml, seguidamente la imagen es cargada de forma externa (archivos jpg).

Interfaz en flash
Crear la interfase de usuario en una capa llamada elementos: (dos botones, un clip de pelcula y una cuadro de texto):

Prof. Gonzalo Anchante Hurtado :: diseo de portales web.

Pgina 1 de 4

A) Botones de navegacin: son utilizados para navegar por las noticias cargadas desde el documento xml (son dos copias de una instancia y una de ellas reflejada). Es importante asignar a ambos elementos el nombre de instancia: anterior_btn y siguiente_btn Propiedades de instancias:

B) Clip de pelcula: es utilizado como soporte para mostrar o cargar en el la imagen correspondiente a cada noticia. (nombre de instancia pantalla_mc) Propiedades de instancia:

C) Cuadro de Texto dinmico: es utilizado para mostrar el titulo y resumen de la noticia previamente formateada: Propiedades de instancia:

Nota alumno: Para este EJERCICIO es importante guardar todos los archivos en una misma carpeta as tambin como verificar los nombres de instancias de cada elemento.

Cdigo
Colocar el cdigo ActionScript en una capa llamada codigo o "Acciones". Pon atencin a los comentarios, ahi est la explicacin del cdigo:

//Permite caracteres tradicionales como letras con tilde la , etc. System.useCodepage = true; Prof. Gonzalo Anchante Hurtado :: diseo de portales web. Pgina 2 de 4

//Se declara la variable indice de tipo nmero (utilizada para referencia la noticia a mostrar) var indice:Number; //Se declara la variable noticias_xml de tipo XML (utilizada para almacenar el documento xml) var noticias_xml:XML; /* Funcion cargarDatos (utilizada para cargar y cambiar las noticias en el documento) Esta funcin recibe un parmetro "_indice" que corresponde al elemento noticia a mostrar */ function cargarDatos(_indice:Number) { //Se inicializan variables utilizadas para almenar los datos de una noticia var fecha:String; var titulo:String; var mensaje:String; var imagen:String; //Recuperando datos del objeto xml //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha] fecha = noticias_xml.firstChild.childNodes[_indice].attributes.fecha; //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo] titulo = noticias_xml.firstChild.childNodes[_indice].firstChild.firstChild.nodeValue ; //Se accede al segundo hijo de elemento [noticia] y se recupera el valor del primer elemento de [mensaje] mensaje = noticias_xml.firstChild.childNodes[_indice].firstChild.nextSibling.firstChi ld.nodeValue; //Se accede al ltimo hijo de elemento [noticia] y se recupera el valor del primer elemento de [imagen] imagen = noticias_xml.firstChild.childNodes[_indice].lastChild.firstChild.nodeValue; //Mostrando los datos recuperados en el cuado de texto mensaje_txt y cargando la imagen en pantalla_mc _root.mensaje_txt.htmlText = ""; _root.mensaje_txt.htmlText += "<p align='center'><font color='#006633' size='12'><b>"+titulo+"</b></font></p>"; _root.mensaje_txt.htmlText += "<p><font size='10'>"+mensaje+"</font>"; _root.mensaje_txt.htmlText += "<font color='#666666' size='10'>Publicado: "+fecha+"</font></p>"; //Cargado la imagen JPG externa en el clip pantalla_mc con el valor recuperado del objeto xml _root.pantalla_mc.loadMovie(imagen); } //Funcin que permite avanzar a la [noticia] siguiente almacenada en el objeto xml siguiente_btn.onPress = function() { //comprobando si existe el siguiente elemento [noticia] if (noticias_xml.firstChild.childNodes[indice+1] != null) { //retringue a avanzar solo si hay una [noticia] siguiente indice++; //incrementado en uno el indice cargarDatos(indice); //recuprando y mostrando los datos y la imagen en la pantalla } Prof. Gonzalo Anchante Hurtado :: diseo de portales web. Pgina 3 de 4

}; //Funcin que permite retroceder a la noticia anterior almacenada en el objeto xml anterior_btn.onPress = function() { //comprobando si existe una elemento [noticia] anterior if (noticias_xml.firstChild.childNodes[indice-1] != null) { //retringue a avanzar solo si hay una [noticia] anterior indice--; //reducciendo en uno el indice cargarDatos(indice); //recuprando y mostrando los datos y la imagen en la pantalla } }; //Inicializaciones indice = 0; //inicializando indice en 0 para mostrar la primera noticia //creando el objeto noticias_xml de typo XML noticias_xml = new XML(); //Permite que el objeto XML ignore los espacios en blanco entre marca y marca del documento XML noticias_xml.ignoreWhite = true; //El mtodo load() permite cargar el documento xml "noticias.xml" noticias_xml.load("noticias.xml"); //El evento onLoad de activa cuado se haya cargado el documento noticias.xml noticias_xml.onLoad = function() { //Se llama a la funcion cragarDatos para mostar la primera noticia (esto por la variable indice en 0) cargarDatos(indice); };
Una vez terminado y con los archivos arriba mencionados (XML e Imagenes) en la misma carpeta de nuestra pelicula .FLA, ejecutamos usando CTRL+ENTER y podemos verlo en funcionamiento.

Cmo mejorarlo?
Como se comento al inicio este es un ejemplo sencillo, lo ideal sera que a partir de este ejemplo podamos adicionar mejoras, como por ejemplo: un pre cargador para las imgenes, hacer que las noticias e imgenes cambien de forma automtica pasado un tiempo, etc. Siemrpe mejorando.

Prof. Gonzalo Anchante Hurtado :: diseo de portales web.

Pgina 4 de 4