Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 MÁSTER UNIVERSITARIO EN INFORMÁTICA APLICADA A LAS COMUNICACIONES MÓVILES (UNIVERSIDAD DE MÁLAGA)

Presentación del tema: "Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 MÁSTER UNIVERSITARIO EN INFORMÁTICA APLICADA A LAS COMUNICACIONES MÓVILES (UNIVERSIDAD DE MÁLAGA)"— Transcripción de la presentación:

1 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 MÁSTER UNIVERSITARIO EN INFORMÁTICA APLICADA A LAS COMUNICACIONES MÓVILES (UNIVERSIDAD DE MÁLAGA) TRABAJO PRÁCTICO MÓDULO 1 MASTERAUTO.HTML Jesús Fernández Fernández-Luengo Manuel Grijuela Brenes Noviembre 2004

2 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 INTRODUCCIÓN.- El trabajo realizado consiste en una web de venta y asesoría en coches. El Cliente puede:  Ver un catálogo con los coches que tenemos.  Pedir consejo y en función de unas preguntas que le hacemos le podemos recomendar el coche que mejor se ajusta a sus necesidades.  Puede enviarnos sus comentarios con el aliciente de participar en un sorteo y llevarse un bonito regalo.  Podemos ver los comentarios que hemos recibido. Hemos intentado utilizar diversas opciones estudiadas durante el curso, como:  Html: marcos, imágenes, mapas sensibles, gif animados, sonidos, formularios, envío de correo.  Html dinámico: hojas de estilo, imagen asociada a ratón.  Javascript: array multidimensional para almacenar los datos de los coches, funciones para buscar los coches que cumplen con los requisitos del Cliente y otras funciones para cálculo de número aleatorio y comprobación de dirección de e-mail.  PHP y MySQL para tratar y almacenar los comentarios recibidos.

3 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 PÁGINA INICIAL (masterauto.htm).- La página inicial consiste en 3 frames realizadas con con enlace a las principales páginas:

4 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 CABECERA (cabecera.htm).- Consiste en una imagen sensible que, al pulsar, en la zona elegida ejecuta el html correspondiente en el marco principal: FICHAS DE LOS ACCIONISTAS (Ficha_jfernan0.htm y Ficha_mgrijue.htm).- En estas fichas hemos implementado DHTML dinámico para poner una imagen acompañando al movimiento del ratón. Para ello hemos: Asignado una función JavaScript al evento de movimiento del ratón que guarda su posición actual en cada movimiento. function MovimientoRaton() { xRaton = event.x; yRaton = event.y; } document.onmousemove = MovimientoRaton; Lanzado una función que se ejecuta constantemente posicionando la “capa” (div) en la posición guardada del ratón. Tras reposicionar la imagen se “duerme” durante un tiempo para no sobrecargar el proceso. function SigueRaton() { LogoRaton.style.left = xRaton; LogoRaton.style.top = yRaton; setTimeout('SigueRaton()',100); } window.onload = SigueRaton;

5 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 PRESENTACIÓN: Hemos empleado una ventana de texto en movimiento del siguiente modo: Colocamos el texto en una “capa” (div) con una altura (numero de lineas) superior al espacio del que disponemos para mostrarlo. Establecemos con la propiedad “clip” de la capa el rectangulo visible de la misma con el número de lineas que podemos mostrar....clip: rect(0 500 100 0);"> Para conseguir el efecto de desplazamiento del texto movemos el rectangulo hacia abajo (avanzando a las siguientes lineas) a la vez que movemos la “capa” completa con el texto hacia arriba. De esta forma el texto visible esta siempre en la misma posición, pero este va cambiando. function DesplazaTexto() { pos_sup = pos_sup + Pixel_Desplazamiento; pos_inf = pos_inf + Pixel_Desplazamiento; yTop = yTop - Pixel_Desplazamiento; if (pos_inf >= Alto_Ventana) { pos_sup = 0; pos_inf = Alto_Recuadro; yTop = pos_inicial_capa; } Texto.style.top = yTop; Texto.style.clip = "rect("+pos_sup+", "+pos_der+", "+pos_inf+", 0)"; setTimeout('DesplazaTexto()',Mseg_Desplazamiento); }

6 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 ACONSÉJAME (aconsejame.htm).- Solicitamos al Cliente qué preferencias tiene en cuanto a marca de coche (de momento tiene que elegir todas las marcas) y en cuanto a precio (en este caso le dejamos elegir entre <6.000, entre 6.000 y 12.000 y más de 12.000). Según lo que indique en el precio, al pulsar el botón de “Busca mi coche” hay una función que se recorre los coches que tenemos y presenta en una nueva ventana las fichas de los coches que cumplen con las preferencias marcadas. Cómo lo hemos hecho: La base de datos de coches la hemos implementado en un array multidimensional, en la forma: var coche = new Array(3); coche[0]= new Array ("Seat", "600", "Ocasión", 1500, "Turismo", "gif/C_Seat600.jpg", "Seat 600") Para buscar los coches que cumplen con lo indicado creamos otro array donde se van a ir almacenando estos coches. Utilizamos sentencias switch, for e if en javascript para recorrer el array. Una muestra es: case 2: //Es la opción Entre 6000 y 12000 for (i=0; i 6000)&&(coche[i][3] < 12000)) { m_elegidos[i_elegidos]=i; elegidos++; i_elegidos++;}} break;

7 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 ACONSÉJAME (continuación).- Para la presentación de los resultados también usamos funciones javascript. Nota: para que te presente una imagen con un document.write hay que ponerlo en la forma: for (i=0; i "); resultado.document.write(" Marca: "+coche[m_elegidos[i]][0]+" ");.... También hemos utilizado en esta página una función javascript para hacer un “marque” (desplazamiento de texto en horizontal) para desearos felices fiestas.

8 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 CATÁLOGO (catalogo.htm).- Presenta un visor donde se van mostrando las imágenes de los coches que tenemos. Hay botones para ir delante, atrás, principio, final, reproducción automática con un retardo o una select para elegir directamente la imagen del coche. Pulsando en “Ver Ficha” podemos ver la ficha completa del coche. Cómo lo hemos hecho: La base de datos de coches está implementada en un array multidimensional. Para presentar la imagen adecuada llevamos un contador que es el que se va modificando, con funciones javascript, según pulsamos los diferentes botones. Como comentario indicar que en la select del visor no están puestos los valores “a pelo”, sino que se hace de forma dinámica, recorriendo la matriz de coches, en la forma: "+coche[i][6]); //-->

9 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 OPINA (opina.htm).- Pedimos al Cliente que nos envíe sus comentarios sobre la web mediante un formulario. Respecto a la dirección de correo que introduce el Cliente comprobamos mediante javascript que pueda ser una dirección válida (que contenga el símbolo @, que tenga un “.” y que éste vaya detrás de la @. Para ello empleamos la función indexOf): var indicador1 = mail.indexOf('@') var indicador2 = mail.indexOf('.') var indicador3 = mail.lastIndexOf('@') if ((indicador1<=0) || (indicador2<indicador1) || (indicador3 != indicador1)) {alert("Por favor, introduce una dirección de correo válida")} También le pedimos que introduzca un número del 1 al 5 para participar en un sorteo. Para elegir el nº aleatorio usamos el método random del objeto math y para quitarle los decimales usamos el método round. Esto lo comparamos con el nº indicado por el Cliente y, al enviar el formulario, saca una ventana indicando si ha ganado o no, con música y gif adecuados:...

10 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 OPINA (opina.htm).- Para recoger los datos del Cliente utilizamos un php (inserta_opiniones.php) que va a conectar con una base de datos (opiniones) realizada con MySQL y necesita que esté corriendo un servidor web. Para enlazar con la base de datos usamos: $enlace = mysql_connect("localhost", "master", "vodafone") or die(" LO SIENTO. No hemos podido guardar sus comentarios en la base de datos : ". mysql_error()); Y para insertar los datos: $sql= "INSERT INTO opiniones (Nombre, EMail, NumeroIndicado, NumeroSorteo, Comentarios) VALUES ('$Nombre','$EMail',$Numero,$NumeroSorteo,'$Comentarios')"; $resultado = mysql_query($sql) or die("La consulta falló: ". mysql_error()); echo (" Los hemos guardado con éxito en nuestra base de datos "); Nota: para poder insertar en la base de datos el número que ha salido en el sorteo, hemos tenido que incluirlo en el formulario como tipo=“hidden”. De esta forma podemos enviar al php este valor.

11 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 Ver opiniones (muestra_opiniones.php).- Para ver las opiniones que hemos recibido, utilizamos directamente un “php” que conecta con la base de datos (opiniones) y, mediante una select, extraemos los datos que tenemos. Esta es la consulta y listado de datos: /* Consulta SQL a la base de datos */ $sql ="SELECT * FROM opiniones"; $resultado = mysql_query($sql) or die("La consulta falló: ". mysql_error()); if ($row = mysql_fetch_array($resultado)) { echo " \n"; echo " Nombre E-Mail Numero Indicado Número sorteo Comentarios \n"; do { echo " ".$row["Nombre"]." ".$row["EMail"]." ".$row["NumeroIndicado"]." ".$row["NumeroSorteo"]." ".$row["Comentarios"]." \n"; } while ($row = mysql_fetch_array($resultado)); echo " \n"; }

12 Jesús Fernández y Manuel Grijuela. Práctica módulo1. Nov’04 ESPERAMOS QUE OS HAYA GUSTADO