Desarrollo de videojuegos orientados a la comunicación publicitaria

1 ÍNDICE I. FASE DE ESTUDIO 3 1. Gestión de alcance 3 1.1. Base de partida.... Estudio de comunidades virtuales 3 1.2. Objetivo 10 1.3. Público objetivo. Perfiles de usuario 10 1.4. Contenidos y servicios 10 1.5. Aspectos legales 12 2. Tecnologías involucradas 15 II. GUIÓN MULTIMEDIA 16 1. Estructura de navegación e interacción 16 1.1. Zona de usuarios 16 1.2. Zona de administración 17 2. Descripción de pantallas 18 2.1. Descripción de pantallas de la zona de usuarios 18 2.2. Descripción de pantallas de la zona de administración 28 2.3. Elementos comunes 43 3. Lenguaje de color 43 3.1. Descripción de estilos estandar de la zona de usuarios 43 3.2. Descripción de estilos estandar de la zona de administración 44 3.3. Descripción de colores 44 4. Imágenes de ejemplo 45 4.1. Imágenes de ejemplo de la zona de usuarios 45 4.2. Imágenes de ejemplo de la zona de administración 47 III. IMPLEMENTACIÓN DE LA PLATAFORMA 55 1. Definición de la base de datos 55 1.1. Presentación de la base de datos Oceanográfico 55 1.2. Descripción de los atributos de cada relación 56 1.3. Esquema relacional de la base de datos 57 2. Implementación de la zona de usuarios 59 2.1. index.php 59 2.2. login.php 62 2.3. crear_conexion_bd.php 63 2.4. registro.php 63 2.5. enviando_datos.php 67 2.6. acreditado.php 69 2.7. mensajes.php 71 2.8. mensajes2.php 77 2.9. comentario_escribir.php 78 2.10. comentario_escribir_envio.php 80 2.11. comentario_leer.php 80 2.12. acreditado2.php 81 2.13. usuario_modificar_usuario_2.php 88 3. Implementación de la zona de administración 91 3.1. admin.php 91 3.2. administrador2.php 92 2 3.3. administrador3.php 93 3.4. administrador_opcion_crear_administrador.php 95 3.5. administrador_opcion_listar_administradores.php 97 3.6. administrador_opcion_borrar_administrador.php 99 3.7. administrador_creacion_cuenta.php 101 3.8. administrador_opcion_listar_usuarios.php 101 3.9. administrador_opcion_listar_usuarios_impresion.php 106 3.10. administrador_opcion_listar_puntuaciones.php 108 3.11. administrador_opcion_listar_puntuaciones_impresion.php 112 3.12. administrador_opcion_modificar_usuario.php 115 3.13. administrador_modificar_usuario.php 117 3.14. administrador_modificar_usuario_2.php 123 3.15. administrador_opcion_borrar_usuario.php 124 3.16. administrador_borrar_usuario.php 126 3.17. administrador_opcion_crear_bases_de_datos.php 126 3.18. creacion_base_de_datos.php 128 3.19. administrador_opcion_destruir_bases_de_datos.php 130 3.20. destruir_base_de_datos.php 132 4. Implementación de los mapas 134 4.1. mapa_sin_usuarios.swf 134 4.2. mapa_usuario_activo.swf 135 4.3. juego1.php 135 4.4. juego2.php 136 4.5. juego3.php 136 4.6. ranking1.php 136 4.7. ranking2.php 138 4.8. ranking3.php 140 IV. DESARROLLO E IMPLEMENTACIÓN DE LOS JUEGOS 142 1. Scott, el pájaro que no sabe volar 142 1.1. Fase de estudio 142 1.2. Fase de implementación 146 2. Igor, el pingüino defensor 152 2.1. Fase de estudio 152 2.2. Fase de implementación 153 3. Bill, el cazador de estrellas 160 3.1. Fase de estudio 160 3.2. Fase de implementación 162 V. BIBLIOGRAFÍA 181 ANEXO I. FICHAS DE LOS JUEGOS ANALIZADOS DURANTE EL ESTUDIO DE LAS COMUNIDADES VIRTUALES 182 ANEXO II. GUÍA DE INSTALACIÓN 191 3 I. FASE DE ESTUDIO 1. Gestión de alcance 1.1 Base de partida... Estudio de comunidades virtuales Nuestro proyecto consiste en el desarrollo de videojuegos orientados a la comunicación publicitaria en la web. Para ello hemos desarrollado una plataforma de juegos, creados en Flash, basada en el Oceanográfico de la Ciudad de las Artes y las Ciencias, desarrollando un juego para cada una de las zonas que forman el parque. Esta plataforma irá orientada hacia un público infantil, tal y como explicaremos detenidamente más adelante. Para ello, previamente hemos realizado un estudio sobre las comunidades virtuales de juegos existentes en la red. Existen multitud de comunidades virtuales de juegos, por lo que podemos observar existe una multitud de tendencias dentro de este amplio abanico. Queda claro que uno de los logros de la red ha sido crear un punto de encuentro en el que no importa el lugar desde el que se conecta el internauta. Este es uno de los motivos que ha propiciado el éxito de los juegos on-line. Se trata de una diversión que consiste en jugar simultáneamente, desde cualquier lugar del planeta, a un juego concreto. Al final, pueden consultarse unas extensas estadísticas que recogen todo tipo de datos de cada participante. Estas comunidades virtuales son numerosas y para suscribirse, normalmente de manera gratuita, tan sólo hay que rellenar un formulario que, habitualmente, podemos encontrarlo en la propia web. Después, lo lógico es tenerse que bajar un programa determinado para hacer posible la conexión en la que se realizará el juego. Por otro lado, muchas comunidades virtuales de juegos se han creado con la intención de publicitar unos productos comerciales que la misma marca dueña de la comunidad ofrece en las tiendas. A este tipo de juegos, encargados de publicitar un producto se les conoce por el nombre de advergames. El término “advergame” deriva de la fusión de las palabras “advertising” (publicidad) y “videogame” (videojuego). Según cuenta la historia oficial, sus inventores son Dan Ferguson y Mike Bielinski, dos jóvenes norteamericanos que, en 1998, para demostrar su capacidad como diseñadores web, crearon un videojuego que tenía como protagonista al ex presidente norteamericano Bill Clinton y lo hicieron circular por correo electrónico. Fue un éxito: los usuarios de Internet se mandaban el juego por email, en un ejemplo perfecto de marketing contagioso. Hoy, Ferguson y Bielinski se dedican a hacer “advergames” para el gigante de las telecomunicaciones Nokia. Según la consultora “Forrester Research”, de aquí al 2005, sólo en Europa, los negocios vinculados a los “advergames” generarán unos 5.000 millones de euros. Un boom que se explica así: el “advergame” hipnotiza al consumidor y lo vuelve fiel a una marca. Un estudio de la Universidad de Michigan reveló que la memorización de información cuando se juega a un videojuego es 10 veces mayor que cuando se mira televisión. Una marca presente en un videojuego, entonces, se graba en la memoria con mayor velocidad y más a fondo que si aparece en un anuncio de televisión. Muchas veces, para jugar, es necesario registrarse. Así, las compañías adquieren una base de datos de clientes a los que después les pueden mandar mensajes mucho más 4 acordes a sus gustos y necesidades. Los “advergames”, además, prenden entre los consumidores particularmente apetecibles, como son los jóvenes y los profesionales. De hecho, dicen los expertos, los picos de acceso se registran a la hora del almuerzo. Lo cual significa que los “advergames” se juegan en la oficina, en un momento de descanso. Por ese motivo es que atrajeron la atención de los grandes inversores. Estos empiezan a prestarle atención a un medio que, hasta ahora, estaba reservado a los banners de los casinos online y los sitios para adultos. Lorenzo Montagna, experto en marketing, explica: “Un buen ejemplo es la firma Ferrero. Desde hace dos años viene insertando en sus clásicos bombones de chocolate un código que les permite a los chicos jugar online. Hoy ese sitio está disponible en 22 idiomas. Así pues, hemos realizado el análisis de diferentes comunidades virtuales que presentaban juegos publicitarios, y a partir de ahí hemos obtenido las siguientes conclusiones: Una de las páginas webs que más nos ha llamado la atención ha sido la de la firma deportiva Nike http://www.nike.com , por el hecho de que no solo era una única comunidad de juegos, sino que englobaba varias comunidades diferentes, agrupadas por deportes. Nos hemos centrado en la sección de fútbol, que contenía seis juegos. Uno de los que más llaman la atención es “Houseball”, el cual combinaba elementos de balompié con el clásico juego del pinball (los tacos eran zapatillas, la bola un balón, y jugadores de fútbol aparecían por el escenario en el centro del cual aparecía el símbolo de la marca). Por otro lado, este juego era el único de la comunidad que no exigía al usuario registrarse. De manera negativa, encontrábamos el juego “V.I.P.”, el cual presentaba un proceso de registro excesivamente largo y una alta tasa de injugabilidad. La firma Nabisco (conocida marca de galletas), ofrece una gran cantidad de juegos en su página web, divididos en tres categorías (arcade, deporte, puzzle). Destaca el hecho de que los juegos más populares aparecen en un top games, en el cual aparecen los seis juegos más populares independientemente de la categoría a la que pertenecen. Unos de los juegos más destacables son el “Mini Mini Golf” y el “Mah Jongg”. El primero de ellos es un atractivo y adictivo juego de mini golf, en el cual jugamos en reducidos escenarios que se pueden encontrar en cualquier hogar (por ejemplo, una mesa de escritorio) y sobre los cuales aparecen cajas y galletas de los productos ofertados por esta marca. Es un claro ejemplo de advergame, ya que combina a la 5 perfección elementos propios de un juego clásico con la marca que patrocina. El “Mah Jongg” es mucho más simple. Es la sencilla recreación del clásico juego de mesa japonés, donde los símbolos que aparecen sobre las fichas han sido sustituidos por imágenes de galletas y logotipos de la marca, introduciendo de esta manera tan hábil, el componente publicitario dentro del videojuego. También encontramos juegos de mayor sencillez. Uno de ellos era “Dunking Game” el cual consistía en ir cazando galletas con un vaso de leche antes de que cayeran al suelo. 6 Otra de las comunidades que nos llamaron la atención fue la de la conocida marca de juguetes Lego http://www.lego.com . En esta comunidad encontramos tres juegos en la pantalla principal, destacando uno de ellos por encima de los demás, y a través de un enlace podemos llegar a una gran cantidad de juegos. El juego al que le daban mayor importancia era el llamado “Lego Racer”, un juego de carreras de coches a la antigua usanza, pero que no tenía mucho que ver con la marca, ya que no encontrábamos ninguna referencia a los juguetes que vende la empresa. Este sería un ejemplo de un juego advergame que no cumple su objetivo primordial, ya que no aparece ninguna referencia al producto y podría encajar perfectamente en cualquier portal en el que aparezcan juegos en flash sin ningún tipo de afiliación comercial. También encontramos juegos como el “World Builder”, consistente en construir escenarios con productos Lego. Este juego cumple claramente el objetivo propuesto de introducir los productos al cliente en el juego, pero su excesiva complejidad y su falta de un objetivo claro lo convierten en un juego aburrido. La empresa Nestle nos ofrece en su web http://www.nestle.es una serie de juegos. Lo primero que observamos fue la asociación existente entre Nestle y Dreamworks, estando presente en todo momento los personajes de Shrek en la web de Nestle, a modo de publicidad de la película. Por otro lado, analizando detenidamente los juegos encontramos juegos como “Fotoquick de Quicky”, presentado por el 7 conocido personaje Quicky, máscota de Nesquick, en un juego falto de diversión pero aun así con cierta originalidad. El juego consistía simplemente en ir haciendo fotos con un objetivo a un personaje evitando fotografiar focos y otros elementos no acordes con el escenario. Los elementos de la marca que aparecían en el juego eran la presentación realizada por la mascota de la firma y los colores utilizados, los cuales son los que componen el envase del producto publicitado. A través de Nestle también podemos acceder a otro de sus productos como es la Fabada Litoral, la cual presenta una web muy original, con una navegabilidad compleja pero divertida. En esta web el usuario es representado en forma de lata de conservas, la cual se desplazará a lo largo de un mapa que representa Asturias y encontrará juegos sencillos a lo largo de este. Destaca por encima de ellos el juego de preguntas y respuestas, todas ellas relativas a la historia del producto, donde se nos ofrece para cada pregunta dos opciones de respuesta, una de ellas la correcta y la otra absolutamente incoherente, con lo cual todo aquel que juegue al juego aprenderá más sobre la marca. Es un claro ejemplo de juego advergame ya que hace total hincapié sobre el producto, pero que puede llegar a agotar al usuario debido precisamente al hecho de ser tan monotemático y la poca adicción que presentan sus pruebas. Para finalizar estuvimos observado una comunidad virtual de jugadores de juegos en Flash sin ningún tipo de afiliación comercial clara. Es decir, los juegos simplemente se desarrollaron con el único objetivo de entretener al usuario, sin ningún 8 tipo de intención de publicitar un producto. Una de las webs que más nos gustó fue http://www.minijuegos.com , en la cual aparecían juegos de todo tipo, ordenados por categorías (acción, deportes, clásicos, coches, estrategia, etc.) así como un listado de los últimos juegos incorporados a la web, otro listado con los juegos de mayor popularidad y otro listado con los mejores juegos, los cuales han sido puntuados por los usuarios registrados. También se nos ofrece la posibilidad de registrarnos en el portal para poder puntuar estos juegos. Tras realizar el análisis de las comunidades virtuales, hemos observado la gran importancia que tienen los juegos a la hora de comercializar un producto en su web, ya que es una buena manera de mantener entretenido al usuario mientras de manera indirecta se le intenta despertar el interés por el producto. Una buena forma para que este objetivo se cumpla del modo más exitoso posible es la representación de elementos del entorno del juego con elementos característicos de la marca y el producto, así como la importancia de que el juego presente un amplio grado de atracción y adicción hacia el usuario. No es recomendable la realización de juegos con un argumento muy complicado y de un manejo poco intuitivo así como excesivamente difícil. Tampoco es recomendable el hecho de sobresaturar el juego con elementos de la marca comercial de modo que el juego se acerque más a ser un anuncio interactivo que a ser un entretenimiento. En cuanto a la duración de las partidas de los juegos, cabría comentar que en la gran mayoría son partidas relativamente cortas, que rondan la duración entre uno y tres minutos a lo sumo, con lo cual, se intenta despertar el interés del jugador hacia el juego durante los primeros instantes de este. Un juego, con un largo proceso de aprendizaje y con una línea argumental excesivamente elaborada puede provocar la pérdida de interés de la mayor parte de los usuarios, por lo que el objetivo principal del juego (atraer la atención del usuario) quedaría incumplido. Los tiempos de carga de estos juegos deben ser muy pequeños para que posible usuario no cierre el juego durante su carga. Por ello, es más importante optimizar el juego para una carga rápida que para una espectacularidad gráfica y sonora. Los juegos suelen disponer de efectos de sonido pero no de música ambiental, ya que la inserción de banda sonora aumenta considerablemente el tamaño del juego en 9 bytes, y en consecuencia el tiempo de carga. El algunos juegos sería interesante el hecho de que apareciera una opción de modo de dificultad. Aquí podríamos definir tres tendencias. La primera de ellas sería la más simple y utilizada. Es el hecho de poder escoger la dificultad antes de comenzar a jugar (dificultad fácil, mediana o difícil...). El otro de modo, también muy utilizado, y en ocasiones en combinación con el anterior, se da en los juegos cuya dificultad incrementa conforme va incrementando el tiempo o a medida que el jugador va completando niveles o pantallas. Por último, sería interesante que en las comunidades virtuales en las que se permita el registro de usuarios, la dificultad venga dada por el historial del jugador. Esto quiere decir que si se observa que un jugador domina los niveles básicos y más sencillos, se le haga jugar inicialmente desde un nivel de dificultad más complicado. En algunas ocasiones se permite a dos usuarios jugar al mismo tiempo desde un mismo equipo. Esto es conocido coloquialmente como “jugar a dobles”. Esto no debería ser permitido ya que rompe con el concepto de un jugador que accede a una comunidad virtual y juega a los juegos, ya que únicamente uno de los dos jugadores podría estar conectado como usuario acreditado en ese momento en ese equipo, y la puntuación obtenida no vendría dada exclusivamente por el jugador registrado sino que intervendría un tercer elemento o elemento extraño en forma de usuario invitado. Sin embargo, si que es interesante la posibilidad de jugar de manera remota contra otros usuarios conectados al mismo tiempo al servidor de la comunidad virtual. Otro de los aspectos que cabe destacar es la existencia de un ranking con las mejores puntuaciones para cada uno de los juegos, pero en ningún caso los usuarios se benefician de ninguna ventaja (a excepción del orgullo personal). En las webs que no exigen registro se solicita el nombre únicamente al lograr una puntuación mayor que cualquiera de las existentes en el actual ranking. En las que requieren registro el nombre del usuario viene dado por el usuario activo. Consideramos que se debería dar mayor importancia a las puntuaciones, proporcionando ventajas a los usuarios con mayores puntuaciones y partidas jugadas, ofreciéndoles el acceso a juegos exclusivos, nuevos niveles y regalos de la marca a los mejores jugadores. Esta opción es un aliciente mayor para que el usuario juegue a los juegos, ya que a parte de entretenimiento puede obtener un beneficio material. Centrándonos detenidamente en lo que son las comunidades virtuales en si, cabría destacar el hecho de la cantidad de juegos que ofrece la comunidad. Existen comunidades virtuales que se centran en ofrecer pocos juegos pero de muy alta calidad, mientras que por otro lado existe la tendencia de ofrecer la mayor cantidad de juegos posibles, cuando la mayor parte de estos no llegan al mínimo de calidad exigido. Por lo tanto concluimos en que es más correcto centrarse en la calidad antes que en la cantidad. Es importante también mostrar las nuevas incorporaciones de juegos a la comunidad al usuario. Esto se puede hacer de muchas maneras. Una de ellas puede ser mostrar un enlace al juego desde la página principal de la comunidad o aumentando el tamaño o resaltando el enlace del juego nuevo dentro del listado de juegos disponibles. También es posible mantener una lista de correo desde la que se informe a los usuarios registrados de la incorporación de nuevos juegos a la comunidad. 16 II. GUIÓN MULTIMEDIA 1. Estructura de navegación e interacción 1.1. Zona de usuarios 1a: comprueba si el el usuario y la contraseña son correctos 1b: comprueba que todos los datos de registro son correctos 17 1.2. Zona de administración R1: En todo momento desde cualquier sección se puede saltar al resto 1a: comprueba si el el usuario y la contraseña son correctos 18 2. Descripción de pantallas 2.1. Descripción de pantallas de la zona de usuarios index.html Pantalla de inicio de la plataforma. E1 F1 M1 T1 M2 M6 M4 M3 M5 F1 Nombre F1login Descripción Formulario de entrada a la plataforma. Se solicitará el nombre de usuario y su contraseña. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M1 Nombre M1CrearUsuario Descripción Enlace a la página que permite que un usuario se de de alta en la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 19 T1 Nombre T1TextoError Descripción Mensaje de texto que únicamente aparecerá en caso de la existencia de algún error durante el uso de la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Heredado. M2 Nombre M2EnviarCorreo Descripción Enlace que permite enviar un e-mail al administrador. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. M3 Nombre M3MapaNoAcreditado Descripción Mapa del oceanográfico que posibilitará ver las ventajas de registrarse en la plataforma. Apariencia Específico. Comportamiento Específico. Origen de datos URL. M4 Nombre M4TagBoard Descripción Listado de los últimos mensajes escritos por los usuarios registrados de la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M5 Nombre M5Rankings Descripción Listado con las mejores puntuaciones de los tres juegos. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M6 Nombre M6TextoAleatorio Descripción Mensaje aleatorio sobre el estado de los usuarios de la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. 20 registro.php Página de registro de nuevos usuarios de la plataforma E1 T1 F1 T1 Nombre T1Registro Descripción Mensaje de texto que da la bienvenida a un nuevo usuario a la sección de registro de la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. F1 Nombre F1Registro Descripción Formulario para el registro de nuevos usuarios: nombre de usuario, contraseña, nombre, primer apellido, segundo apellido, edad, sexo, provincia y colegio. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 21 acreditado.php Página principal para los usuarios acreditados en la plataforma. E1 T1 M1 M2 M6 M4 M3 M5 T1 Nombre T1Bienvenida Descripción Mensaje de texto que da la bienvenida a un usuario que se acaba de acreditar en la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M1 Nombre M1ModificarDatos Descripción Botón que permite a un usuario acreditado acceder al área de modificación de datos personales. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. M2 Nombre M2CerrarSesión Descripción Botón que permite a un usuario acreditado cerrar su sesión. Apariencia Heredado. 22 Comportamiento Heredado. Origen de datos Texto estático. M3 Nombre M3MapaNoAcreditado Descripción Mapa del oceanográfico que posibilitará ver las ventajas de registrarse en la plataforma. Apariencia Específico. Comportamiento Específico. Origen de datos URL. M4 Nombre M4TagBoard Descripción Listado de los últimos mensajes escritos por los usuarios registrados de la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M5 Nombre M5Rankings Descripción Listado con las mejores puntuaciones de los tres juegos. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M6 Nombre M6TextoAleatorio Descripción Mensaje aleatorio sobre el estado de los usuarios de la plataforma. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. 23 acreditado2.php Página que permite a un usuario acreditado modificar sus datos de registro. E1 T1 F1 T1 Nombre T1ModificarDatos Descripción Mensaje de texto que da la bienvenida a un usuario registrado que desea modificar sus datos. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. F1 Nombre F1ModificarDatos Descripción Formulario que permite a un usuario acreditado modificar sus datos de registro: nombre de usuario, contraseña, nombre, primer apellido, segundo apellido, edad, sexo, provincia y colegio. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. 24 ranking1.php Página que muestra las máximas puntuaciones del juego “Scott, el pájaro que no sabe volar” E1 T1 M1 T2 T1 Nombre T1Juego1 Descripción Mensaje de texto que da la bienvenida a la pantalla de puntuaciones del juego “Scott, el pájaro que no sabe volar”. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. M1 Nombre M1CerrarVentana Descripción Botón que permite cerrar la ventana que nos muestra las puntuaciones. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. T2 Nombre T2Juego1 Descripción Máximas puntuaciones del juego “Scott, el pájaro que no sabe volar”. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. 25 ranking2.php Página que muestra las máximas puntuaciones del juego “Igor, el pingüino defensor” E1 T1 M1 T2 T1 Nombre T1Juego2 Descripción Mensaje de texto que da la bienvenida a la pantalla de puntuaciones del juego “Igor, el pingüino defensor”. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. M1 Nombre M1CerrarVentana Descripción Botón que permite cerrar la ventana que nos muestra las puntuaciones. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. T2 Nombre T2Juego2 Descripción Máximas puntuaciones del juego “Igor, el pingüino defensor”. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. 32 administrador_opcion_listar_administradores.php Opción para listar los administradores registrados en la plataforma. E2 E3 D1 D1 Nombre D1ListadoAdministradores Descripción Listado de todos los administradores de la plataforma. Apariencia Heredado. Comportamiento Unicamente se muestra el campo nick del administrador. Origen de datos Base de datos. 33 administrador_opcion_borrar_administrador.php Opción para eliminar administradores de la plataforma. E2 E3 T1 F1 T1 Nombre T1BorrarAdministrador Descripción Mensaje de explicación de esta opción. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. F1 Nombre F1BorrarAdministrador Descripción Formulario en el que introducir el nombre del administrador que se desea eliminar. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 34 administrador_opcion_listar_usuarios.php Opción para listar los usuarios que están registrados en la plataforma, con todos sus datos personales. E2 E3 D1 M1 D1 Nombre D1ListadoUsuarios Descripción Listado de todos los usuarios registrados en la plataforma. Apariencia Heredado. Comportamiento Se muestran todos los campos de todos los usuarios en forma de tabla: nick, contraseña, nombre, primer apellido, segundo apellido, edad, sexo, ciudad y colegio. Origen de datos Base de datos. M1 Nombre M1ImprimirListado Descripción Enlaza a un listado de todos los usuarios registrados en la plataforma en su versión para imprimir. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 35 administrador_opcion_listar_puntuaciones.php Opción para listar las puntuaciones obtenidas en los diferentes juegos. E2 E3 D1 M1 D1 Nombre D1ListadoPuntuaciones Descripción Listado de todos los usuarios registrados en la plataforma. Apariencia Heredado. Comportamiento Se muestran el campo nick y el campo puntuación de las 20 máximas puntuaciones de cada uno de los juegos. Además también se muestra el número total de partidas jugadas a cada uno de los juegos. Origen de datos Base de datos. M1 Nombre M1ImprimirListado Descripción Enlaza a un listado de todas las puntuaciones en su versión para imprimir. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 36 administrador_opcion_modificar_usuario.php Opción para modificar datos de los usuarios de la plataforma. E2 E3 T1 F1 T1 Nombre T1ModificarUsuario. Descripción Mensaje de explicación de esta opción. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. F1 Nombre F1ModificarUsuario Descripción Formulario en el que introducir el nombre del usuario del que se desea modificar los datos.. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 37 administrador_modificar_usuario_2.php Opción para modificar datos de los usuarios de la plataforma. E2 E3 F1 F1 Nombre F1ModificarUsuario2. Descripción Formulario que permite cambiar los datos del usuario y almacenar estos cambios en la base de datos. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. 38 administrador_opcion_borrar_usuario.php Opción para eliminar usuarios de la plataforma. E2 E3 T1 F1 T1 Nombre T1BorrarUsuario Descripción Mensaje de explicación de esta opción. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. F1 Nombre F1BorrarUsuario Descripción Formulario en el que introducir el nombre del usuario que se desea eliminar. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 39 administrador_opcion_crear_bases_de_datos.php Opción para generar las bases de datos necesarias en el sistema. E2 E3 T1 M1 T1 Nombre T1CrearBasesDeDatos Descripción Mensaje de explicación de esta opción. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. M1 Nombre M1CrearBasesDeDatos Descripción Botón que procede a generar las bases de datos del sistema. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 40 administrador_opcion_eliminar_bases_de_datos.php Opción para generar las bases de datos necesarias en el sistema. E2 E3 T1 M1 T1 Nombre T1EliminarBasesDeDatos Descripción Mensaje de explicación de esta opción. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. M1 Nombre M1EliminarBasesDeDatos Descripción Botón que procede a eliminar las bases de datos del sistema. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 41 administrador_opcion_listar_usuarios_impresion.php Listado preparado para la impresión de los usuarios registrados en la plataforma T1 M1 T1 Nombre T1ListadoUsuarios Descripción Listado de los usuarios registrados en la plataforma con todos sus datos personales. Apariencia Heredado. Comportamiento Heredado. Origen de datos Base de datos. M1 Nombre M1BotonImprimir Descripción Botón que permite imprimir la página actual y posteriormente cerrarla. Apariencia Heredado. Comportamiento Heredado. Origen de datos Texto estático. 48 4.2. Imágenes de ejemplo de la zona de administración admin.php administrador3.php 49 administrador_opcion_crear_administrador.php administrador_opcion_listar_administradores.php 50 administrador_opcion_borrar_administrador.php administrador_opcion_listar_usuarios.php 51 administrador_opcion_listar_usuarios_impresion.php administrador_opcion_listar_puntuaciones.php 52 administrador_opcion_listar_puntuaciones_impresion.php administrador_opcion_modificar_usuario.php 53 administrador_opcion_borrar_usuario.php administrador_opcion_crear_bases_de_datos.php 54 administrador_opcion_destruir_bases_de_datos.php 55 III. IMPLEMENTACIÓN DE LA PLATAFORMA 1. Definición de la base de datos 1.1. Presentación de la base de datos Oceanográfico Se desea mantener información de la plataforma que estamos desarrollando; para ello se ha definido una base de datos cuyo esquema se muestra a continuación. USUARIOS (nick: d_nck, nombre: d_nom, apellido1: d_ap1, apellido2: d_ap2, sexo: d_sex, edad: d_edad, provincia: d_prov, colegio: d_col, password: d_pswd) CP: {nick} VNN: {nombre} VNN: {apellido1} VNN: {apellido2} VNN: {sexo} VNN: {edad} VNN: {provincia} VNN: {password} ADMINISTRADOR (nick: d_nck, password: d_pswd) CP: {nick} VNN: {password} MENSAJES (id: d_id, nick: d_nck, mensaje: d_msj) CP: {id} JUEGO1 (id: d_id, nick: d_nck, puntuacion: d_punt) CP: {id} VNN: {nick} VNN: {puntuacion} JUEGO2 (id: d_id, nick: d_nck, puntuacion: d_punt) CP: {id} VNN: {nick} VNN: {puntuacion} JUEGO3 (id: d_id, nick: d_nck, puntuacion: d_punt) CP: {id} VNN: {nick} VNN: {puntuacion} 56 Definición de los dominios: Nombre Tipo de datos d_nck varchar(30) d_msj varchar(200) d_nom varchar(30) d_ap1 varchar(30) d_ap2 varchar(30) d_sex entero(1) d_edad entero(2) d_prov varchar(30) d_col varchar(30) d_pswd varchar(30) d_id entero(4) 1.2. Descripción de los atributos de cada relación Usuarios nick: nombre ficticio que adoptará el jugador al registrarse como usuario en nuestra plataforma, y a través del cual será identificado. nombre: nombre real del usuario que se registra en la plataforma. apellido1: primer apellido del usuario registrado. apellido2: segundo apellido del usuario registrado. sexo: determina si el usuario es niño o niña. edad: cuántos años tiene. provincia: nombre de la provincia en la que vive el usuario. colegio: nombre del colegio en el que estudia. password: contraseña que utiliza el usuario para poder acceder como usuario registrado a la plataforma. Administrador nick: nombre ficticio que adoptará cualquier usuario que haga las funciones de administrador y que le servirá para acceder a la zona restringida de administradores de la plataforma. password: contraseña que utiliza el usuario para poder acceder como administrador a la zona de administración de la plataforma. Mensajes id: núero de indentificación del mensaje. nick: identificador del usuario que ha escrito el mensaje. mensaje: texto que se mostrará en el tagboard de la plataforma. Juego1 id: número de identificación que permite que un usuario se pueda inscribir diferentes veces en la tabla de resultados o ranking. nick: identificador del usuario que ha puntuado en el juego. puntuación: número de puntos obtenidos por un usuario en el juego. Juego2 id: número de identificación que permite que un usuario se pueda inscribir 57 diferentes veces en la tabla de resultados o ranking. nick: identificador del usuario que ha puntuado en el juego. puntuación: número de puntos obtenidos por un usuario en el juego. Juego3 id: número de identificación que permite que un usuario se pueda inscribir diferentes veces en la tabla de resultados o ranking. nick: identificador del usuario que ha puntuado en el juego. puntuación: número de puntos obtenidos por un usuario en el juego. 1.3. Esquema relacional de la base de datos El esquema relacional anterior se ha definido en MySQL de la manera siguiente: CREATE TABLE usuarios ( nick varchar(30) NOT NULL PRIMARY KEY, nombre varchar(30) NOT NULL, apellido1 varchar(30) NOT NULL, apellido2 varchar(30) NOT NULL, sexo INT(1) NOT NULL, edad INT(2) NOT NULL, provincia varchar(30) NOT NULL, colegio varchar(30), puntos int(6), password varchar(30) NOT NULL ); CREATE TABLE administrador ( nick varchar(30) NOT NULL PRIMARY KEY, password varchar(30) NOT NULL ); CREATE TABLE mensajes ( id int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, nick varchar(30), mensaje varchar(200) ); CREATE TABLE juego1 ( id int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, nick varchar(30) NOT NULL, puntuacion int(6) NOT NULL ); CREATE TABLE juego2 ( id int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, nick varchar(30) NOT NULL, puntuacion int(6) NOT NULL ); 64 <html> <head> <link rel="stylesheet" href="oceanografico.css" type="text/css" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591"><title>¡Regístrate!</title></head> <body bgcolor="#0099FF" text="#000000"> <p class="Estilo9"> </p> <p class="Estilo9"> </p> <div id="Layer3" style="position:absolute; width:864px; height:76px; z-index:3; left: 9px; top: 23px; font-size: 9px;"> <p><img src="imagenes/cabecera.jpg" width="889" height="110"> </p> </div> <p> </p> <p> </p> <p> </p> <div id="Layer1" style="position:absolute; width:849px; height:34px; z-index:5; left: 30px; top: 157px; background-color: #0033CC; layer-background-color: #0033CC; border: 1px none #000000; background-image: url(imagenes/water-texture-blue.jpg); layer-background-image: url(imagenes/water-texture-blue.jpg);"> <span style="fontsize: 9px"></span></div> <div id="Layer2" style="position:absolute; width:834px; height:31px; z-index:4; left: 36px; top: 133px; background-color: #0000CC; layer-background-color: #0000CC; border: 1px none #000000; font-size: 9px; font-weight: bold;" class="EstiloFormulario"> ¡Bienvenido a la página de registro ! </div> // Esta capa únicamente nos muestra el mensaje de bienvenida. <p> </p> <p> </p> <div id="Layer4" style="position:absolute; width:200px; height:115px; z-index:6; left: 78px; top: 198px;"> // Aquí comenzamos una capa que dibujará un formulario en el cual solicitaremos al usuario los datos que necesitamos para su registro. <p><?php echo $mensaje_de_error_2 ?></p> // Lo primero de todo es indicar si el usuario ha accedido a traves de login.php, el cual se habrá encargado de darle un valor a la variable $mensaje_de_error_2. 65 <form action="enviando_datos.php" method="post" enctype="multipart/form-data" name="form1"> // El formulario enviará los datos al servidor a traves de enviando_datos.php mediante el método post. <table width="893" border="0"> <tr> <td width="157" valign="top"><span class="Estilo9">Escoge tu nombre de usuario:</span></td> <td width="158" valign="top"><span class="Estilo9"> <input name="nick" type="text" id="nick2"> </span></td> <td width="564" valign="top"> <?php $mensaje_de_error_2 = '<p class="EstiloError">'; $mensaje_de_error_2 .= $nick_error; $mensaje_de_error_2 .= '</p>'; echo $mensaje_de_error_2; ?> // Para cada uno de los posibles errores en el registro (Campos vacios) indica la existencia de un error en forma de mensaje. En caso de que un error no se haya dado su variable estará vacia y no escribirá nada. Estos mensajes de error los enviará la página enviando_datos.php. </td> </tr> <tr> <td><span class="Estilo9">Escoge tu contraseña:</span></td> <td><span class="Estilo9"> <input name="password" type="password" id="password2"> </span></td> <td><?php $mensaje_de_error_2 = '<p class="EstiloError">'; $mensaje_de_error_2 .= $password_error; $mensaje_de_error_2 .= '</p>'; echo $mensaje_de_error_2; ?></td> </tr> <tr> <td><span class="Estilo9">Nombre:</span></td> <td><span class="Estilo9"> <input name="nombre" type="text" id="nombre2"> </span></td> <td><?php $mensaje_de_error_2 = '<p class="EstiloError">'; $mensaje_de_error_2 .= $nombre_error; $mensaje_de_error_2 .= '</p>'; echo $mensaje_de_error_2; ?></td> </tr> <tr> <td><span class="Estilo9">Primer apellido:</span></td> <td><span class="Estilo9"> <input name="apellido1" type="text" id="apellido12"> 66 </span></td> <td><?php $mensaje_de_error_2 = '<p class="EstiloError">'; $mensaje_de_error_2 .= $apellido1_error; $mensaje_de_error_2 .= '</p>'; echo $mensaje_de_error_2; ?></td> </tr> <tr> <td><span class="Estilo9">Segundo apellido:</span></td> <td><span class="Estilo9"> <input name="apellido2" type="text" id="apellido22"> </span></td> <td><?php $mensaje_de_error_2 = '<p class="EstiloError">'; $mensaje_de_error_2 .= $apellido2_error; $mensaje_de_error_2 .= '</p>'; echo $mensaje_de_error_2; ?></td> </tr> <tr> <td><span class="Estilo9">Edad:</span></td> <td><span class="Estilo9"> <select name="edad" id="select"> <option value="3">3 años</option> <option value="4">4 años</option> <option value="5">5 años</option> <option value="6">6 años</option> <option value="7">7 años</option> <option value="8">8 años</option> <option value="9">9 años</option> <option value="10">10 años</option> <option value="11">11 años</option> <option value="12">12 años</option> <option value="13">13 años</option> <option value="14">14 años</option> </select> </span></td> <td> </td> </tr> <tr> <td class="Estilo9">Sexo:</td> <td><span class="Estilo9"> <select name="sexo" id="select2"> <option value="1">Chico</option> <option value="0">Chica </option> </select> </span></td> <td> </td> </tr> 67 <tr> <td class="Estilo9">Provincia:</td> <td><span class="Estilo9"><a href="index.html"> </a> <select name="provincia" id="select3"> </select> </span></td> <td> </td> </tr> <tr> <td class="Estilo9">Colegio</td> <td><input name="colegio" type="text" id="colegio2"></td> <td> </td> </tr> <tr> <td class="Estilo9"><a href="index.html">Volver</a> </td> // Incluimos la posibilidad de volver a la página principal, para aquellos usuarios que realmente no quiera registrarse (por ejemplo si han escrito mal el nombre de usuario accidentalmente) <td><span class="Estilo9"><a href="index.html"> <input type="submit" name="Submit" value="Enviar"> </a></span></td> <td> </td> </tr> </table> <p class="Estilo9"></p> </form> </div> <p> </p> </body> </html> 2.5. enviando_datos.php Este fichero sirve para dar de alta a usuarios en la base de datos. Recibe los datos de registro.php y se encarga de conectar con la base de datos y efectuar el registro. En caso de encontrar algún error en los datos recibidos desde registro.php volverá a esta página indicando estos errores. <?php include('crear_conexion_bd.php'); // Tomamos los datos obtenidos a traves de registro.php y los almacenamos para su posterior uso $nick = $_POST["nick"]; $password = $_POST["password"]; $nombre = $_POST["nombre"]; $apellido1 = $_POST["apellido1"]; 68 $apellido2 = $_POST["apellido2"]; $edad = $_POST["edad"]; $sexo = $_POST["sexo"]; $colegio = $_POST["colegio"]; $localidad = $_POST["localidad"]; $aceptar_envio_datos = '1'; // $aceptar_envio_datos valdrá 1 siempre que no se encuentre ningun error en los datos recibidos anteriormente. Presuponemos que los datos son correctos, y despues verificamos si algún campo estaba en blanco. En caso de que se localice algun campo en blanco, ponemos $aceptar_envio_datos a 0. if ($nick ==''){$aceptar_envio_datos = '0'; $nick_error = 'El campo NICK no puede estar en blanco';} // Para cada campo que se encuentre en blanco le definimos un mensaje de error, cada uno en una variable diferente. if ($password ==''){$aceptar_envio_datos = '0'; $password_error = 'El campo PASSWORD no puede estar en blanco';} if ($nombre ==''){$aceptar_envio_datos = '0'; $nombre_error = 'El campo NOMBRE no puede estar en blanco';} if ($apellido1 ==''){$aceptar_envio_datos = '0'; $apellido1_error = 'El campo APELLIDO1 no puede estar en blanco';} if ($apellido2 ==''){$aceptar_envio_datos = '0'; $apellido2_error = 'El campo APELLIDO2 no puede estar en blanco';} if ($aceptar_envio_datos == '0'){include ('registro.php');} // En este caso no podemos aceptar el registro, y volvemos a llevar al usuario a la página de registro, que se cargará poniendo los mensajes de error encontrados en el intento de registro anterior. if ($aceptar_envio_datos == '1'){ // En caso de que no haya problemas en los datos, se añade el usuario a la base de datos. $sql = "INSERT INTO usuarios SET nick='$nick', nombre='$nombre', apellido1='$apellido1', apellido2='$apellido2', sexo='$sexo', edad='$edad', colegio='$colegio', password='$password'"; if (@mysql_query($sql)) { $nombre_variable = $nick; include('acreditado.php'); // Al realizar la consulta correctamente se envia al usuario a acreditado.php, y ya estará dado de alta en la base de datos y dentro de la zona para los usuarios. } else { $nick_error = '<p class="EstiloError">'; $nick_error .= 'El nombre de usuario ya existe, elige otro'; $nick_error .= '</p>'; include('registro.php'); // Puede darse el caso de que el nick con el que el usuario se quiere registrar ya exista. Al ser el campo nick la clave primaria el acceso a la base de datos dará un error y el código nos llevará a este punto, donde lo 69 devolveremos a la página de registro con el mensaje de error del nick indicando este hecho. } } ?> 2.6. acreditado.php Cuando un usuario tiene cuenta de usuario y accede a la zona privada para los usuarios registrados es aquí donde viene. <body bgcolor="#0099CC"> <div id="Layer3" style="position:absolute; width:864px; height:76px; z-index:3; left: 9px; top: 23px; font-size: 9px;"> <p><img src="imagenes/cabecera.jpg" width="889" height="110"> </p> </div> <p> </p> <p> </p> <p> </p> <div id="Capajuego" style="position:absolute; width:561px; height:295px; z-index:2; left: 165px; top: 251px; font-size: 9px;"> <p> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve rsion=6,0,29,0" width="585" height="328"> <?php $temp = '<param name="movie" value="imagenes/mapa_usuario_activo.swf?nick='; $temp .= $nombre_variable; $temp .= '">'; echo $temp; ?> // El mapa en flash se cargará pasandole la variable $nombre_variable, para que sepa cual es el usuario que hay activo en el sistema. <param name="quality" value="high"> <?php $temp = '<embed src="imagenes/mapa_usuario_activo.swf?nick='; $temp .= $nombre_variable; $temp .= ' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" width="322" height="269"></embed>'; echo $temp; ?> </object> <font color="#FFFFFF"> </font></p> </div> <div id="Layer1" style="position:absolute; width:849px; height:45px; z-index:5; left: 30px; top: 161px; background-color: #0033CC; layer-background-color: #0033CC; border: 1px none #000000; background-image: url(imagenes/water-texture-blue.jpg); layer-background-image: url(imagenes/water-texture-blue.jpg);"> <span style="font-size: 9px"></span></div> 70 <div id="Layer2" style="position:absolute; width:834px; height:31px; z-index:4; left: 36px; top: 133px; background-color: #0000CC; layer-background-color: #0000CC; border: 1px none #000000;"> <table width="830" border="0"> <tr> <td width="577" class="EstiloFormulario"><?php if ($usuario_activo != NULL){ $nombre_variable = $usuario_activo; } if ($nombre_variable != NULL){ $texto = '<p class="EstiloFormulario">Bienvenido, '; $texto .= $nombre_variable; $texto .= '</p>'; echo $texto; // Este script saluda al usuario y le sirve para saber que ha accedido correctamente al sistema. } else { echo ('<p class="EstiloError">ERROR</p>'); } // Al acceder a la página directamente indicando su dirección no hay usuario activo, y nos indica un error. ?> <span class="Estilo9"> </span></td> <td width="145"><span class="Estilo9"> <?php $texto2 = '<a href="acreditado2.php?usuario_activo='; $texto2 .= $nombre_variable; $texto2 .= '" class="EstiloFormulario">Modificar datos usuario</a> </p>'; echo $texto2; ?> // Hay un enlace a acreditado2.php, al que se le pasa el nombre del usuario de forma explícita. Desde esta página podrá modificar sus datos. </span></td> <td width="94"><span class="Estilo9"> <?php $texto3 = '<a href="index.html" class="EstiloFormulario">Cerrar sesión</a></p>'; // Cerrar sesión únicamente será ir a la página principal, con lo que se perderan todas las variables activas y dejará de haber un usuario activo en el sistema. echo $texto3; ?> </span></td> </tr> </table> </div> <?php include('mensajes2.php'); // Se incluye un fichero que muestra las mejores puntuaciones. ?> </div> <div id="Layer4" style="position:absolute; width:413px; height:29px; z-index:16; left: 44px; top: 209px;"> <?php 71 include('mensajes.php'); // Se incluye un fichero que muestra un mensaje aleatorio con datos sobre los usuarios de la plataforma. ?> </div> <div id="Layer5" style="position:absolute; width:604px; height:35px; z-index:7; left: 146px; top: 601px;"> <div align="center"><a href="privacidad.php" class="Estilo9">Política de privacidad / Condiciones de uso</a></div> // Enlace a un texto con la política de privacidad de la plataforma. </div> <div id="Layer6" style="position:absolute; width:168px; height:26px; z-index:8; left: 14px; top: 59px;"> <?php include('comentario_ver.php'); // Se incluye un fichero que muestra el tagboard $texto2 = '<a href="comentario_escribir.php?usuario_activo='; $texto2 .= $nombre_variable; $texto2 .= '" class="Estilo9">Escribir comentario</a></p>'; echo $texto2; // Se enlaza a un fichero que permite escribir un nuevo mensaje al usuario activo. ?> </div> </body> 2.7. mensajes.php Este fichero muestra por pantalla un mensaje seleccionado al azar con datos sobre los usuarios de la plataforma. <?php include('crear_conexion_bd.php'); $provincias[0] = 'Alava'; // Se crea un vector con el nombre de las provincias de españa para su uso a la hora de mostrar datos por pantalla, ya que en la base de datos estas provincias estan asociadas a un número. $provincias[1] = 'Albacete'; $provincias[2] = 'Alicante'; $provincias[3] = 'Almeria'; $provincias[4] = 'Asturias'; $provincias[5] = 'Avila'; $provincias[6] = 'A Coruña'; $provincias[7] = 'Badajoz'; $provincias[8] = 'Barcelona'; $provincias[9] = 'Burgos'; $provincias[10] = 'Caceres'; $provincias[11] = 'Cadiz'; $provincias[12] = 'Cantabria'; $provincias[13] = 'Castellon'; $provincias[14] = 'Ceuta'; $provincias[15] = 'Ciudad Real'; $provincias[16] = 'Cordoba'; 72 $provincias[17] = 'Cuenca'; $provincias[18] = 'Girona'; $provincias[19] = 'Granada'; $provincias[20] = 'Guadalajara'; $provincias[21] = 'Guipuzkoa'; $provincias[22] = 'Huelva'; $provincias[23] = 'Huesca'; $provincias[24] = 'Jaen'; $provincias[25] = 'La Rioja'; $provincias[26] = 'Leon'; $provincias[27] = 'Lleida'; $provincias[28] = 'Lugo'; $provincias[29] = 'Madrid'; $provincias[30] = 'Malaga'; $provincias[31] = 'Melilla'; $provincias[32] = 'Murcia'; $provincias[33] = 'Navarra'; $provincias[34] = 'Ourenese'; $provincias[35] = 'Palencia'; $provincias[36] = 'Pontevedra'; $provincias[37] = 'Salamanca'; $provincias[38] = 'Segovia'; $provincias[39] = 'Sevilla'; $provincias[40] = 'Soria'; $provincias[41] = 'Tarragona'; $provincias[42] = 'Teruel'; $provincias[43] = 'Toledo'; $provincias[44] = 'Valencia'; $provincias[45] = 'Valladolid'; $provincias[46] = 'Vizcaya'; $provincias[47] = 'Zamora'; $provincias[48] = 'Zaragoza'; $provincias[49] = 'Mallorca'; $provincias[50] = 'Ibiza'; $provincias[51] = 'Menorca'; $provincias[52] = 'Formentera'; $provincias[53] = 'Las Palmas'; $provincias[54] = 'Gran Canaria'; $provincias[56] = 'Lanzarote'; $provincias[57] = 'Tenerife'; $provincias[58] = 'La Gomera'; $provincias[59] = 'La Palma'; $provincias[60] = 'El Hierro'; srand ((float) microtime() * 10000000); // Se inicializa el generador de números aleatorios utilizando el tiempo del microprocesador. $frase = rand(1,16); // Se escoge un número al azar entre 1 y 16, que será el número del mensaje a representar. if ($frase == '1'){ 73 $sql = "SELECT provincia, count(provincia) as cuenta FROM usuarios GROUP BY provincia"; // Consulta que selecciona de que provincia hay más usuarios. $salida_sql = @mysql_query($sql); $row = mysql_fetch_array($salida_sql); $temp = $row['cuenta']; $temp2 = $row['provincia']; while($row = mysql_fetch_array($salida_sql)) { if($temp <= $row['cuenta']){ $temp = $row['cuenta']; $temp2 = $row['provincia']; } } $mensaje = "Hay más usuarios de $provincias[$temp2] que de ningún otro lado"; } else if ($frase == '2'){ $sql = "SELECT count(id) FROM juego1"; // Selecciona el número de partidas jugadas en el juego 1 $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $juego1 = $salida_sql_vector[0]; $sql = "SELECT count(id) FROM juego2"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $juego2 = $salida_sql_vector[0]; $sql = "SELECT count(id) FROM juego3"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $juego3 = $salida_sql_vector[0]; if($juego1 >= $juego2){ if(juego1 >= $juego3){ $mensaje = "El juego más jugado es Scott, el pájaro que no sabe volar"; } else if ($juego2 >= $juego3){ $mensaje = "El juego más jugado es Igor, el pingüino defensor"; } else { $mensaje = "El juego más jugado es Bill, el cazador de estrellas"; } } // Muestra el juego del que se ha jugado mayor número de partidas. } else if ($frase == '3'){ $sql = "SELECT * FROM juego1 ORDER BY puntuacion DESC LIMIT 1"; // Se selecciona al usuario con mayor puntuación del juego de Scott $salida_sql = @mysql_query($sql); $row = mysql_fetch_array($salida_sql); $nick = $row[nick]; $mensaje = "El que mejor ha enseñado a volar a Scott es $nick"; } else if ($frase == '4'){ $sql = "SELECT * FROM juego2 ORDER BY puntuacion DESC LIMIT 1"; // Se selecciona al usuario con mayor puntuación del juego de Igor $salida_sql = @mysql_query($sql); 80 <td width="715"><span class="EstiloFormulario">Desde aquí podras escribir algún comentario para que todo aquel que entre en la web lo lea. </span></td> <td width="84"><span class="Estilo9"><a href="acreditado.php" class="EstiloFormulario">Volver</a></span></td> </tr> </table> </form> <span style="font-size: 9px"> </span></div> <p> </p> <p><span style="font-size: 9px"> </span></p> </body> 2.10. comentario_escribir_envio.php El fichero comentario_escribir_envio.php se encarga de almacenar en la base de datos el mensaje recibido por comentario_escribir.php <?php include('crear_conexion_bd.php'); $nick = $_POST["nick"]; // Se recibe el nick del usuario, enviado de forma oculta $mensaje = $_POST["limitedtextarea"]; // Se recibe el mensaje del usuario. $sql = "INSERT INTO mensajes SET nick='$nick', mensaje='$mensaje'"; if (@mysql_query($sql)) { $nombre_variable = $nick; } else { echo "error: "; echo mysql_error(); } // Se inserta el mensaje en la base de datos. include('acreditado.php'); ?> 2.11 comentario_leer.php Mostramos por pantalla una tabla en la que se verán los 10 últimos mensajes escritos en el tagboard. <body> <table width="134" border="0"> <tr bgcolor="#0000CC"> <td class="EstiloFormulario">Últimos comentarios</td> // Nombre de la tabla. </tr> <tr> 81 <td> <?php include('crear_conexion_bd.php'); $sql = "SELECT * FROM mensajes ORDER BY id DESC LIMIT 10"; $salida_sql = @mysql_query($sql); while($row = mysql_fetch_array($salida_sql)){ $texto = '<tr><td class="EstiloMensaje" bgcolor="#B4D5E9"><strong class="Estilo9">'; $texto .= $row["nick"]; $texto .= ': </strong><span class="Estilo9bis">'; $texto .= $row["mensaje"]; $texto .= '</span></td></tr><br>'; echo $texto; } ?> </td> </tr> </table> </body> 2.12. acreditado2.php Desde acreditado2.php un usuario podrá modificar sus datos personales. <body bgcolor="#0099CC"> <p> </p> <p> </p> <div id="Layer3" style="position:absolute; width:864px; height:76px; z-index:3; left: 9px; top: 23px; font-size: 9px;"> <p><img src="imagenes/cabecera.jpg" width="889" height="110"> </p> </div> <div id="Layer2" style="position:absolute; width:834px; height:31px; z-index:4; left: 36px; top: 133px; background-color: #0000CC; layer-background-color: #0000CC; border: 1px none #000000;"> <?php 82 $nombre_variable = $_GET["usuario_activo"]; if ($nombre_variable != NULL){ $texto = '<p class="EstiloFormulario">¡Hola '; $texto .= $nombre_variable; $texto .= '!. En esta sección de la web podrás modificar tus datos personales'; $texto .= '</p>'; echo $texto; } else { echo ("ERROR"); } ?> </div> <div id="Layer1" style="position:absolute; width:849px; height:45px; z-index:5; left: 30px; top: 165px; background-color: #0033CC; layer-background-color: #0033CC; border: 1px none #000000; background-image: url(imagenes/water-texture-blue.jpg); layer-background-image: url(imagenes/water-texture-blue.jpg);"> <span style="fontsize: 9px"></span></div> <p> </p> <div id="Capajuego" style="position:absolute; width:561px; height:295px; z-index:2; left: 165px; top: 226px; font-size: 9px;"> <?php include('crear_conexion_bd.php'); $nick = $_GET["usuario_activo"]; $sql = "SELECT * FROM usuarios WHERE nick = '$nick'"; $salida_sql = @mysql_query($sql); while($row = mysql_fetch_array($salida_sql)) { $password = $row["password"]; $nombre = $row["nombre"]; 83 $apellido1 = $row["apellido1"]; $apellido2 = $row["apellido2"]; $edad = $row["edad"]; $sexo = $row["sexo"]; $colegio = $row["colegio"]; $localidad = $row["localidad"]; } // Almacenamos en tantas variables como datos almacenamos del usuario los datos actuales del usuario. A partir de aquí creamos un formulario completamente en php (imprimiendo las etiquetas html mediante echo) para mostrar estos datos y permitir al usuario que cambie los datos que desee cambiar. También mpedimos que el usuario pueda cambiar el campo nick. $texto = '<form name="form1" id="form1" method="post" action="usuario_modificar_usuario_2.php?usuario_activo='; // El formulario recién creado llamará al script usuario_modificar_usuario_2.php, que se encargará de la actualización de la base de datos. $texto .= $nick; $texto .= '">'; echo $texto; echo ('<table width="200" border="0">'); echo ('<tr>'); echo ('<td>'); echo '<span class="Estilo9">Nombre de usuario</span>'; echo ('</td>'); echo ('<td>'); echo ('<span class="Estilo9">'); echo $nick; $nick2 = $nick; echo ('</span>'); 84 echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Contraseña:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="password2" type="password"" id="password2" value="'; echo $password; echo '";/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Nombre:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="nombre2" type="text" id="nombre2" value="'; echo $nombre; echo '";/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Primer apellido:</span>'; 85 echo ('</td>'); echo ('<td>'); echo ' <input name="apellido12" type="text" id="apellido12" value="'; echo $apellido1; echo '"/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Segundo apellido:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="apellido22" type="text" id="apellido22" value="'; echo $apellido2; echo '"/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Sexo:</span>'; echo ('</td>'); echo ('<td>'); echo ' <select name="sexo2" id="sexo2" value="'; echo $sexo; 86 echo '">'; echo '<option value="1">Chico</option>'; echo '<option value="0">Chica </option>'; echo '</select>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Edad:</span>'; echo ('</td>'); echo ('<td>'); echo '<input name="edad2" type="text" id="edad2" value="'; echo $edad; echo '"/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Localidad:</span>'; echo ('</td>'); echo ('<td>'); echo ' <select name="localidad2" id="localidad2" value="'; echo $localidad; echo '">'; echo '<option value="1">Valencia</option>'; 87 echo '<option value="0">Resto del mundo</option>'; echo '</select>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Colegio</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="colegio2" type="text"" id="colegio2" value="'; echo $colegio; echo '";/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<input name="modificar" type="submit" id="modificar" value="Enviar" /> '; echo ('</td>'); echo ('<td>'); $texto2 = '<a href="acreditado.php?nombre_variable='; $texto2 .= $nick2; $texto2 .= '" class="Estilo9">Volver</a> </p>'; echo $texto2; // Añadimos un botón volver, para el usuario que haya entrado aquí por error. echo ('</td>'); 88 echo ('<tr>'); echo ('<td>'); echo ('</table>'); echo '</form>'; ?> <p><font color="#FFFFFF"> </font></p> </div> <p> </p> <p> </p> <p> </p> </body> 2.13. usuario_modificar_usuario_2.php El último fichero que forma parte de la zona de los usuarios, encargado de efectuar la conexión a la base de datos a la hora de modificar los datos de un usuario. <?php include ('crear_conexion_bd.php'); $nick = $usuario_activo; $password = $_POST["password2"]; $nombre = $_POST["nombre2"]; $apellido1 = $_POST["apellido12"]; $apellido2 = $_POST["apellido22"]; $edad = $_POST["edad2"]; $sexo = $_POST["sexo2"]; $colegio = $_POST["colegio2"]; $localidad = $_POST["localidad2"]; 89 // En $sql creamos una consulta a la base de datos en la que se actualizan sus datos con los nuevos valores que hayamos puesto. $sql = "UPDATE usuarios SET password = '"; $sql .= $password; $sql .= "', nombre = '"; $sql .= $nombre; $sql .= "', apellido1 = '"; $sql .= $apellido1; $sql .= "', apellido2 = '"; $sql .= $apellido2; $sql .= "', colegio = '"; $sql .= $colegio; $sql .= "', provincia = '"; $sql .= $localidad; $sql .= "', sexo = '"; $sql .= $sexo; $sql .= "', edad = '"; $sql .= $edad; $sql .= "'"; $sql .=" WHERE nick = '"; $sql .= $nick; $sql .= "';"; if (@mysql_query($sql)) { $nombre_variable = $nick; 96 href="administrador_opcion_listar_administradores.php" class="Estilo9">Listar administradores</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_administrador.php" class="Estilo9">Borrar administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_puntuaciones.php" class="Estilo9">Listar puntuaciones</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:455px; height:215px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <form name="form1" method="post" action="administrador_creacion_cuenta.php"> // Se crea un formulario en el que pondremos el nick y la contraseña de un nuevo administrador. <p align="center" class="Estilo9"> </p> <p align="center" class="Estilo9 Estilo14">Rellena los siguientes campos para crear un nuevo administrador:</p> <table width="200" border="0" align="center"> <tr> <td><div align="center"><span class="Estilo9 Estilo14">Nombre:</span></div></td> <td><span class="Estilo9"> <input name="nick" type="text" id="nick"> </span></td> </tr> <tr> <td><div align="center"><span class="Estilo9 Estilo14">Contraseña:</span></div></td> <td><span class="Estilo9"> <input name="password" type="password" id="password2"> </span></td> </tr> <tr> 97 <td><div align="center"></div></td> <td><span class="Estilo9"> <input name="enviar" type="submit" id="enviar2" value="Enviar"> </span></td> </tr> </table> <?php $imprimir_mensaje = '<p align="center" class="EstiloError">'; $imprimir_mensaje .= $mensaje; $imprimir_mensaje .= '</p>'; echo $imprimir_mensaje; ?> <p align="center" class="Estilo9"> </p> <p class="Estilo9"> </p> </form> </div> <div id="Layer4" style="position:absolute; width:732px; height:26px; z-index:4; left: 29px; top: 119px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"></div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> </html> 3.5. administrador_opcion_listar_administradores.php Opción que permite listar los usuarios existentes en el sistema con todos sus datos personales, y la opción para imprimir estos resultados. <body> <div id="Layer2" style="position:absolute; width:223px; height:191px; z-index:2; left: 38px; top: 142px; background-color: #FF3300; layer-background-color: #FF3300;" class="Estilo9"> <blockquote> <p align="left" class="Estilo13"><a href="administrador_opcion_crear_administrador.php" class="Estilo9"> Crear administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_administradores.php" class="Estilo9">Listar administradores</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_administrador.php" class="Estilo9">Borrar administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a></p> 98 <p align="left" class="Estilo13"><a href="administrador_opcion_listar_puntuaciones.php" class="Estilo9">Listar puntuaciones</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:704px; height:350px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <div id="Layer5" style="position:absolute; width:200px; height:115px; z-index:6; left: 173px; top: 34px;"> <?php include('crear_conexion_bd.php'); $sql = "SELECT count(nick) FROM administrador"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $numero_usuarios = $salida_sql_vector[0]; $sql = "SELECT * FROM administrador"; $salida_sql = @mysql_query($sql); echo '<table width="500" border="0">'; echo '<tr>'; echo '<td class="EstiloMensaje">Administrador</td>'; echo '<tr>'; echo '<td class="EstiloMensaje">------------------</td></tr>'; while($row = mysql_fetch_array($salida_sql)) { echo '<tr>'; echo '<td class="EstiloMensaje2">'; echo $row["nick"]; echo '</td>'; echo '<td>'; echo '<form name="form4" method="post" action="administrador_borrar_administrador.php">'; $temp = '<input name="nick" type="hidden" value="'; 99 $temp .= $row["nick"]; $temp .= '">'; echo $temp; echo '<input name="enviar" type="submit" id="enviar" value="Borrar"></form>'; echo '</td>'; echo '</tr>'; } echo '<tr>'; echo '</table>'; ?> </div> </div> <div id="Layer4" style="position:absolute; width:731px; height:26px; z-index:1; left: 30px; top: 113px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"> <table width="100%" height="32" border="0"> <tr> <td width="65%"> </td> <td width="35%"><a href="admin.php" class="Estilo9">Cerrar sesión</a></td> </tr> </table> </div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> 3.6. administrador_opcion_borrar_administrador.php Opción que nos permite borrar un administrador. <body> <div id="Layer2" style="position:absolute; width:223px; height:191px; z-index:2; left: 38px; top: 142px; background-color: #FF3300; layer-background-color: #FF3300;" class="Estilo9"> <blockquote> <p align="left" class="Estilo13"><a href="administrador_opcion_crear_administrador.php" class="Estilo9"> Crear administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_administradores.php" class="Estilo9">Listar administradores</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_administrador.php" class="Estilo9">Borrar 100 administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_puntuaciones.php" class="Estilo9">Listar puntuaciones</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:495px; height:322px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <form name="form4" method="post" action="administrador_borrar_administrador.php"> <p align="center" class="Estilo9 Estilo14"> </p> <p align="center" class="Estilo9 Estilo14">Introduce el nombre del administrador que deseas eliminar:</p> <p align="center" class="Estilo9"> <span class="Estilo14">Administrador:</span> <input name="nick" type="text" id="nick"> </p> <p align="center" class="Estilo9"> <input name="enviar" type="submit" id="enviar" value="Enviar"> </p> </form> </div> <div id="Layer4" style="position:absolute; width:731px; height:26px; z-index:1; left: 30px; top: 113px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"> <table width="100%" height="32" border="0"> <tr> <td width="65%"> </td> <td width="35%"><a href="admin.php" class="Estilo9">Cerrar sesión</a></td> </tr> </table> </div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; 101 background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> 3.7. administrador_creacion_cuenta.php Este fichero realiza una conexión con la base de datos proporcionándole un nuevo administrador y su contraseña. <?php include('crear_conexion_bd.php'); $nick = $_POST["nick"]; $password = $_POST["password"]; $sql = "INSERT INTO administrador SET nick='$nick', password='$password'"; if (@mysql_query($sql)) { $mensaje = "Se ha creado un nuevo administrador"; include('administrador3.php'); // Cuando creas un nuevo administrador, te lleva a la página principal con el mensaje pertinente. } else { $mensaje = "El administrador "; $mensaje .= $nick; $mensaje .= " ya existe, elige otro nombre"; include('administrador_opcion_crear_administrador.php'); // En caso de ya existir el administrador que se pretendia crear, se obtiene un error y se da la posibilidad de crear uno nuevo. } ?> 3.8. administrador_opcion_listar_usuarios.php Este fichero nos muestra por pantalla a todos los usuarios registrados en la plataforma, junto con todos los datos solicitados en la fase de registro. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zona del administrador de ¡Un chapuzón de diversión!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="oceanografico.css" type="text/css" /> <script language="JavaScript" type="text/JavaScript"> <!-- 102 function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> <!-- .Estilo13 {color: #FFFFFF} --> </style> </head> <body> <div id="Layer2" style="position:absolute; width:223px; height:191px; z-index:2; left: 38px; top: 142px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(haciaabajo.jpg); layer-backgroundimage: url(haciaabajo.jpg);" class="Estilo9"> <blockquote> <p align="left" class="Estilo13"><a href="administrador_opcion_crear_administrador.php" class="Estilo9"> Crear administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_usuario.php" class="Estilo9"> Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:704px; height:215px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <?php include('crear_conexion_bd.php'); 103 $sql = "SELECT count(nick) FROM usuarios"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $numero_usuarios = $salida_sql_vector[0]; $sql = "SELECT * FROM usuarios"; $salida_sql = @mysql_query($sql); // En la variable $salida_sql almacenamos todos los datos de todos los usuarios de forma vectorial, de modo que utilizaremos mysql_tetch_array para leer estos datos en orden. echo '<table width="500" border="0">'; echo '<tr>'; echo '<td class="EstiloMensaje">Nick</td><td class="EstiloMensaje">Password</td><td class="EstiloMensaje">Nombre</td><td class="EstiloMensaje">Apellido 1</td><td class="EstiloMensaje">Apellido 2</td><td class="EstiloMensaje">Edad</td><td class="EstiloMensaje">Sexo</td><td class="EstiloMensaje">Ciudad</td><td class="EstiloMensaje">Colegio</td>'; // Mostramos en la primera linea de una tabla que valor va a contener cada columna. echo '<tr><td class="EstiloMensaje">-----</td><td class="EstiloMensaje">------ ------</td><td class="EstiloMensaje">----------</td><td class="EstiloMensaje">---------- ---</td><td class="EstiloMensaje">-------------</td><td class="EstiloMensaje">------ </td><td class="EstiloMensaje">------</td><td class="EstiloMensaje">---------</td><td class="EstiloMensaje">---------</td></tr>'; // Añadimos un separador en forma de guiones. while($row = mysql_fetch_array($salida_sql)) { // Recorremos el vector de datos hasta que no queden usuarios echo '<tr>'; echo '<td class="EstiloMensaje">'; echo $row["nick"]; // Para cada usuario, imprimimos el valor correspondiente a cada columna de la tabla echo '</td>'; echo '<td class="EstiloMensaje">'; echo $row["password"]; echo '</td>'; echo '<td class="EstiloMensaje">'; echo $row["nombre"]; echo '</td>'; echo '<td class="EstiloMensaje">'; echo $row["apellido1"]; echo '</td>'; echo '<td class="EstiloMensaje">'; echo $row["apellido2"]; echo '</td>'; echo '<td class="EstiloMensaje">'; echo $row["edad"]; echo '</td>'; echo '<td class="EstiloMensaje">'; if ($row["sexo"] == '1') {echo 'Chico';} else {echo 'Chica';} // En el caso 104 del sexo y de la provincia el valor estará almacenado de forma numérica, y tendremos que averiguar cual es el nombre correspondiente a ese número, ya que cada posible nombre tiene asignado un valor exclusivo. Por ejemplo la provincia Albacete tiene asociado el valor 1. echo '</td>'; echo '<td class="EstiloMensaje">'; if ($row["provincia"] == '0') {echo 'Alava';} else if ($row["provincia"] == '1') {echo 'Albacete';} else if ($row["provincia"] == '2') {echo 'Alicante';} else if ($row["provincia"] == '3') {echo 'Almeria';} else if ($row["provincia"] == '4') {echo 'Asturias';} else if ($row["provincia"] == '5') {echo 'Avila';} else if ($row["provincia"] == '6') {echo 'A Coruña';} else if ($row["provincia"] == '7') {echo 'Badajoz';} else if ($row["provincia"] == '8') {echo 'Barcelona';} else if ($row["provincia"] == '9') {echo 'Burgos';} else if ($row["provincia"] == '10') {echo 'Caceres';} else if ($row["provincia"] == '11') {echo 'Cadiz';} else if ($row["provincia"] == '12') {echo 'Cantabria';} else if ($row["provincia"] == '13') {echo 'Castellon';} else if ($row["provincia"] == '14') {echo 'Ceuta';} else if ($row["provincia"] == '15') {echo 'Ciudad Real';} else if ($row["provincia"] == '16') {echo 'Cordoba';} else if ($row["provincia"] == '17') {echo 'Cuenca';} else if ($row["provincia"] == '18') {echo 'Girona';} else if ($row["provincia"] == '19') {echo 'Granada';} else if ($row["provincia"] == '20') {echo 'Guadalajara';} else if ($row["provincia"] == '21') {echo 'Guipuzkoa';} else if ($row["provincia"] == '22') {echo 'Huelva';} else if ($row["provincia"] == '23') {echo 'Huesca';} else if ($row["provincia"] == '24') {echo 'Jaen';} else if ($row["provincia"] == '25') {echo 'La Rioja';} else if ($row["provincia"] == '26') {echo 'Leon';} else if ($row["provincia"] == '27') {echo 'Lleida';} else if ($row["provincia"] == '28') {echo 'Lugo';} else if ($row["provincia"] == '29') {echo 'Madrid';} else if ($row["provincia"] == '30') {echo 'Malaga';} else if ($row["provincia"] == '31') {echo 'Melilla';} else if ($row["provincia"] == '32') {echo 'Murcia';} else if ($row["provincia"] == '33') {echo 'Navarra';} else if ($row["provincia"] == '34') {echo 'Ourense';} else if ($row["provincia"] == '35') {echo 'Palencia';} else if ($row["provincia"] == '36') {echo 'Pontevedra';} else if ($row["provincia"] == '37') {echo 'Salamanca';} else if ($row["provincia"] == '38') {echo 'Segovia';} else if ($row["provincia"] == '39') {echo 'Sevilla';} else if ($row["provincia"] == '40') {echo 'Soria';} else if ($row["provincia"] == '41') {echo 'Tarragona';} else if ($row["provincia"] == '42') {echo 'Teruel';} else if ($row["provincia"] == '43') {echo 'Toledo';} else 105 if ($row["provincia"] == '44') {echo 'Valencia';} else if ($row["provincia"] == '45') {echo 'Valladolid';} else if ($row["provincia"] == '46') {echo 'Vizcaya';} else if ($row["provincia"] == '47') {echo 'Zamora';} else if ($row["provincia"] == '48') {echo 'Zaragoza';} else if ($row["provincia"] == '49') {echo 'Mallorca';} else if ($row["provincia"] == '50') {echo 'Ibiza';} else if ($row["provincia"] == '51') {echo 'Menorca';} else if ($row["provincia"] == '52') {echo 'Formentera';} else if ($row["provincia"] == '53') {echo 'Las Palmas';} else if ($row["provincia"] == '54') {echo 'Gran Canaria';} else if ($row["provincia"] == '55') {echo 'Lanzarote';} else if ($row["provincia"] == '57') {echo 'Tenerife';} else if ($row["provincia"] == '58') {echo 'La Gomera';} else if ($row["provincia"] == '59') {echo 'La Palma';} else if ($row["provincia"] == '60') {echo 'El Hierro';} echo '</td>'; echo '<td class="EstiloMensaje">'; echo $row["colegio"]; echo '</td>'; echo '</tr>'; } echo '<tr>'; echo '</table>'; ?> <p><a TARGET = "_blank" href="administrador_opcion_listar_usuarios_impresion.php" class="Estilo9">Ver versión para imprimir</a></p> // Se permite el acceso a una versión de esta página para su impresión. </div> <div id="Layer4" style="position:absolute; width:732px; height:26px; z-index:4; left: 29px; top: 119px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"></div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> </html> 112 $sql = "SELECT * FROM juego3 ORDER BY puntuacion DESC LIMIT 20"; $salida_sql = @mysql_query($sql); echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Bill, el cazador de estrellas</td></tr><tr><td class="EstiloMensaje">------------------------------- -----------</td></tr><tr>'; $texto = '<td class="EstiloMensaje2">Número de partidas jugadas: '; $texto .= $numero_partidas; $texto .= '</td>'; echo $texto; echo '</tr></table>'; echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Nick</td><td class="EstiloMensaje">Puntuación</td></tr><tr><td class="EstiloMensaje">------ </td><td class="EstiloMensaje">--------------</td></tr>'; while($row = mysql_fetch_array($salida_sql)){ $texto = '<tr><td class="EstiloMensaje2">'; $texto .= $row["nick"]; $texto .= '</td><td class="EstiloMensaje2">'; $texto .= $row["puntuacion"]; $texto .= '</td></tr>'; echo $texto; } echo '</table>'; echo '<p></p><p></p>'; ?> </div> <div id="Layer4" style="position:absolute; width:732px; height:26px; z-index:4; left: 29px; top: 119px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"></div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> </html> 3.11. administrador_opcion_listar_puntuaciones_impresion.php Versión para imprimir de la página anterior. <body> <table width="75%" border="0"> <tr> <td width="6%"> <?php 113 include('crear_conexion_bd.php'); $sql = "SELECT max(id) FROM juego1"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $numero_partidas = $salida_sql_vector[0]; $sql = "SELECT * FROM juego1 ORDER BY puntuacion DESC LIMIT 20"; $salida_sql = @mysql_query($sql); echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Scott, el pájaro que no sabe volar</td></tr><tr><td class="EstiloMensaje">------------------------- -----------------</td></tr><tr>'; $texto = '<td class="EstiloMensaje2">Número de partidas jugadas: '; $texto .= $numero_partidas; $texto .= '</td>'; echo $texto; echo '</tr></table>'; echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Nick</td><td class="EstiloMensaje">Puntuación</td></tr><tr><td class="EstiloMensaje">------ </td><td class="EstiloMensaje">--------------</td></tr>'; while($row = mysql_fetch_array($salida_sql)){ $texto = '<tr><td class="EstiloMensaje2">'; $texto .= $row["nick"]; $texto .= '</td><td class="EstiloMensaje2">'; $texto .= $row["puntuacion"]; $texto .= '</td></tr>'; echo $texto; } echo '</table>'; echo '<p></p><p></p>'; ?> </td> <td width="6%"> <?php include('crear_conexion_bd.php'); $sql = "SELECT max(id) FROM juego2"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $numero_partidas = $salida_sql_vector[0]; $sql = "SELECT * FROM juego2 ORDER BY puntuacion DESC LIMIT 20"; $salida_sql = @mysql_query($sql); 114 echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Igor, el pingüino defensor</td></tr><tr><td class="EstiloMensaje">-------------------------------- </td></tr><tr>'; $texto = '<td class="EstiloMensaje2">Número de partidas jugadas: '; $texto .= $numero_partidas; $texto .= '</td>'; echo $texto; echo '</tr></table>'; echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Nick</td><td class="EstiloMensaje">Puntuación</td></tr><tr><td class="EstiloMensaje">------ </td><td class="EstiloMensaje">--------------</td></tr>'; while($row = mysql_fetch_array($salida_sql)){ $texto = '<tr><td class="EstiloMensaje2">'; $texto .= $row["nick"]; $texto .= '</td><td class="EstiloMensaje2">'; $texto .= $row["puntuacion"]; $texto .= '</td></tr>'; echo $texto; } echo '</table>'; echo '<p></p><p></p>'; ?> </td> <td width="88%"> <?php include('crear_conexion_bd.php'); $sql = "SELECT max(id) FROM juego3"; $salida_sql = @mysql_query($sql); $salida_sql_vector = mysql_fetch_array($salida_sql); $numero_partidas = $salida_sql_vector[0]; $sql = "SELECT * FROM juego3 ORDER BY puntuacion DESC LIMIT 20"; $salida_sql = @mysql_query($sql); echo '<table width="200" border="0"><tr><td class="EstiloMensaje">Bill, el cazador de estrellas</td></tr><tr><td class="EstiloMensaje">------------------------------- --</td></tr><tr>'; $texto = '<td class="EstiloMensaje2">Número de partidas jugadas: '; $texto .= $numero_partidas; $texto .= '</td>'; echo $texto; echo '</tr></table>'; echo '<table width="200" border="0"><tr><td 115 class="EstiloMensaje">Nick</td><td class="EstiloMensaje">Puntuación</td></tr><tr><td class="EstiloMensaje">------ </td><td class="EstiloMensaje">--------------</td></tr>'; while($row = mysql_fetch_array($salida_sql)){ $texto = '<tr><td class="EstiloMensaje2">'; $texto .= $row["nick"]; $texto .= '</td><td class="EstiloMensaje2">'; $texto .= $row["puntuacion"]; $texto .= '</td></tr>'; echo $texto; } echo '</table>'; ?> </td> </tr> </table> <SCRIPT LANGUAGE="JavaScript"> if (window.print) { document.write('<form>' + '<input type=button name=print value="Imprimir" ' + 'onClick="javascript:window.print(); javascript:window.close()"></form>'); } </script> </body> 3.12. administrador_opcion_modificar_usuario.php El administrador podrá cambiar los datos de cualquier usuario a traves de esta opción.En este fichero únicamente realizamos una llamada a administrador_modificar_usuario.php indicando el nick del usuario mediante un sencillo formulario. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zona del administrador de ¡Un chapuzón de diversión!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="oceanografico.css" type="text/css" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) 116 location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> <!-- .Estilo13 {color: #FFFFFF} --> </style> </head> <body> <div id="Layer2" style="position:absolute; width:223px; height:191px; z-index:2; left: 38px; top: 142px; background-color: #FF3300; layer-background-color: #FF3300;" class="Estilo9"> <blockquote> <p align="left" class="Estilo13"><a href="administrador_opcion_crear_administrador.php" class="Estilo9"> Crear administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_administradores.php" class="Estilo9">Listar administradores</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_administrador.php" class="Estilo9">Borrar administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_puntuaciones.php" class="Estilo9">Listar puntuaciones</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:496px; height:215px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <form name="form3" method="post" action="administrador_modificar_usuario.php"> 117 <p align="center" class="Estilo9 Estilo14"> </p> <p align="center" class="Estilo9 Estilo14">Inserta el nombre del usuario del que deseas modificar sus datos:</p> <p align="center" class="Estilo9"> <span class="Estilo14">Usuario:</span> <input name="nick" type="text" id="nick"> </p> <p align="center" class="Estilo9"> <input name="enviar" type="submit" id="enviar" value="Enviar"> </p> </form> </div> <div id="Layer4" style="position:absolute; width:732px; height:26px; z-index:4; left: 29px; top: 119px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"></div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> </html> 3.13. administrador_modificar_usuario.php Llegados a este punto tenemos un nombre de usuario a modificar, y se generará una tabla con todos sus datos para que los modifiquemos libremente, y despues mediante una llamada a administrador_modificar_usuario_2.php se guardarán estos resultados en la base de datos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zona del administrador de ¡Un chapuzón de diversión!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="oceanografico.css" type="text/css" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> 118 </script> <style type="text/css"> <!-- .Estilo13 {color: #FFFFFF} --> </style> </head> <body> <div id="Layer2" style="position:absolute; width:223px; height:191px; z-index:2; left: 38px; top: 142px; background-color: #FF3300; layer-background-color: #FF3300;" class="Estilo9"> <blockquote> <p align="left" class="Estilo13"><a href="administrador_opcion_crear_administrador.php" class="Estilo9"> Crear administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_administradores.php" class="Estilo9">Listar administradores</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_administrador.php" class="Estilo9">Borrar administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_puntuaciones.php" class="Estilo9">Listar puntuaciones</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:496px; height:215px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <?php include('crear_conexion_bd.php'); $nick = $_POST["nick"]; $sql = "SELECT * FROM usuarios WHERE nick = '$nick'"; 119 $salida_sql = @mysql_query($sql); while($row = mysql_fetch_array($salida_sql)) { $password = $row["password"]; $nombre = $row["nombre"]; $apellido1 = $row["apellido1"]; $apellido2 = $row["apellido2"]; $edad = $row["edad"]; $sexo = $row["sexo"]; $colegio = $row["colegio"]; $localidad = $row["localidad"]; } // Creamos el formulario y lo imprimimos en pantalla con los resultados recién obtenidos de la consulta a la base de datos. $texto = '<form name="form1" id="form1" method="post" action="administrador_modificar_usuario_2.php?usuario_activo='; $texto .= $nick; $texto .= '">'; echo $texto; echo ('<table width="200" border="0">'); echo ('<tr>'); echo ('<td>'); echo '<span class="Estilo9">Nombre de usuario</span>'; echo ('</td>'); echo ('<td>'); echo ('<span class="Estilo9">'); echo $nick; $nick2 = $nick; echo ('</span>'); echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Contraseña:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="password2" type="password"" id="password2" value="'; echo $password; echo '";/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Nombre:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="nombre2" type="text" id="nombre2" value="'; echo $nombre; 120 echo '";/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Primer apellido:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="apellido12" type="text" id="apellido12" value="'; echo $apellido1; echo '"/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Segundo apellido:</span>'; echo ('</td>'); echo ('<td>'); echo ' <input name="apellido22" type="text" id="apellido22" value="'; echo $apellido2; echo '"/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Sexo:</span>'; echo ('</td>'); echo ('<td>'); echo ' <select name="sexo2" id="sexo2" value="'; echo $sexo; echo '">'; echo '<option value="1">Chico</option>'; echo '<option value="0">Chica </option>'; echo '</select>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Edad:</span>'; echo ('</td>'); echo ('<td>'); echo '<input name="edad2" type="text" id="edad2" value="'; echo $edad; echo '"/>'; echo ('</td>'); echo ('<tr>'); echo ('<td>'); echo '<br>'; echo '<span class="Estilo9">Localidad:</span>'; 121 echo ('</td>'); echo ('<td>'); echo ' <select name="localidad2" id="localidad2" value="'; echo $localidad; echo '">'; echo '<option value="0">Alava </option>'; echo '<option value="1">Albacete </option>'; echo '<option value="2">Alicante </option>'; echo '<option value="3">Almeria </option>'; echo '<option value="4">Asturias </option>'; echo '<option value="5">Avila </option>'; echo '<option value="6">A Coruña </option>'; echo '<option value="7">Badajoz </option>'; echo '<option value="8">Barcelona </option>'; echo '<option value="9">Burgos </option>'; echo '<option value="10">Caceres </option>'; echo '<option value="11">Cadiz </option>'; echo '<option value="12">Cantabria </option>'; echo '<option value="13">Castellon </option>'; echo '<option value="14">Ceuta </option>'; echo '<option value="15">Ciudad Real </option>'; echo '<option value="16">Cordoba </option>'; echo '<option value="17">Cuenca </option>'; echo '<option value="18">Girona </option>'; echo '<option value="19">Granada </option>'; echo '<option value="20">Guadalajara </option>'; echo '<option value="21">Guipuzkoa </option>'; echo '<option value="22">Huelva </option>'; echo '<option value="23">Huesca </option>'; echo '<option value="24">Jaen </option>'; echo '<option value="25">La Rioja </option>'; echo '<option value="26">Leon </option>'; echo '<option value="27">Lleida </option>'; echo '<option value="28">Lugo </option>'; echo '<option value="29">Madrid </option>'; echo '<option value="30">Malaga </option>'; echo '<option value="31">Melilla </option>'; echo '<option value="32">Murcia </option>'; echo '<option value="33">Navarra </option>'; echo '<option value="34">Ourenese </option>'; echo '<option value="35">Palencia </option>'; echo '<option value="36">Pontevedra </option>'; echo '<option value="37">Salamanca </option>'; echo '<option value="38">Segovia </option>'; echo '<option value="39">Sevilla </option>'; echo '<option value="40">Soria </option>'; echo '<option value="41">Tarragona </option>'; echo '<option value="42">Teruel </option>'; echo '<option value="43">Toledo </option>'; echo '<option value="44">Valencia </option>'; 128 Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:496px; height:215px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> <p align="center" class="Estilo9 Estilo14"> </p> <p align="center" class="Estilo9 Estilo14">Desde aquí podrás regenerar las bases de datos, para que esto suceda no deben existir en el sistema, utiliza esta opción solo si acabas de instalar el sistema.</p> <p align="center" class="Estilo9 Estilo14"><a href="creacion_bases_de_datos.php">Crear bases de datos</a> </p> </div> <div id="Layer4" style="position:absolute; width:732px; height:26px; z-index:4; left: 29px; top: 119px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"></div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> </html> 3.18. creacion_base_de_datos.php Despues de decidir las tablas que se requerirían para almacenar los datos de los usuarios y de los juegos, para crearlas se optó por la creación de un script php que las creará una tras otra sin necesidad de la interacción de ningún usuario, de forma que para cada ordenador en el que se instale el sistema no haya posibilidad de error humano al crear estas tablas. <title>Zona del administrador de ¡Un chapuzón de diversión!</title><?php $conexion = mysql_connect('localhost', 'root', ''); if (!$conexion) { echo( '<p>Imposible conectar a la base de datos</p>' ); exit(); } 129 $sql = 'create database oceanografico'; @mysql_query($sql); // Debemos crear una base de datos llamada oceanográfico, donde almacenaremos las tablas que la compondrán, y esta es la instrucción encargada de ello. @mysql_select_db('oceanografico'); // Seleccionamos la base de dato recién creada para proceder a añadirle las tablas que la componen. $mensaje = "Tablas creadas: "; $sql = 'CREATE TABLE usuarios ( nick varchar(30) NOT NULL PRIMARY KEY, nombre varchar(30) NOT NULL, apellido1 varchar(30) NOT NULL, apellido2 varchar(30) NOT NULL, sexo INT(1) NOT NULL, edad INT(2) NOT NULL, provincia varchar(30) NOT NULL, colegio varchar(30), password varchar(30) NOT NULL )'; // Creamos la tabla usuarios con los campos necesarios. if ( @mysql_query($sql) ) { $mensaje .= "Usuarios "; } else { echo('<p>Error creando la tabla de usuarios: ' . mysql_error() . '</p>'); // En caso de algún error en la creación de la tabla se nos indicará por pantalla. } $sql = 'CREATE TABLE administrador ( nick varchar(30) NOT NULL PRIMARY KEY, password varchar(30) NOT NULL )'; // Creamos la tabla administrador con los campos necesarios. if ( @mysql_query($sql) ) { $mensaje .= "Administradores "; } else { echo('<p>Error creando la tabla de administrador: ' . mysql_error() . '</p>'); } $sql = "INSERT INTO administrador SET nick='root', password='root'"; if ( @mysql_query($sql) ) { // Al crear la tabla administrador crearemos automaticamente un usuario con nick root y contraseña root, el cual será el primer administrador de nuestro sistema. $mensaje .= "(root/root) "; } else { echo('<p>Error creando al adminbistrador: ' . mysql_error() . '</p>'); 130 } $sql = 'CREATE TABLE juego1 ( id int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, nick varchar(30) NOT NULL, puntuacion int(6) NOT NULL )'; // Creamos la tabla del primer juego con los campos necesarios. if ( @mysql_query($sql) ) { $mensaje .= "Juego1 "; } else { echo('<p>Error creando la tabla de puntuaciones del juego 1: ' . mysql_error() . '</p>'); } $sql = 'CREATE TABLE juego2 ( id int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, nick varchar(30) NOT NULL, puntuacion int(6) NOT NULL )'; // Creamos la tabla del segundo juego con los campos necesarios. if ( @mysql_query($sql) ) { $mensaje .= "Juego2 "; } else { echo('<p>Error creando la tabla de puntuaciones del juego 2: ' . mysql_error() . '</p>'); } $sql = 'CREATE TABLE juego3 ( id int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY, nick varchar(30) NOT NULL, puntuacion int(6) NOT NULL )'; // Creamos la tabla del tercer juego con los campos necesarios. if ( @mysql_query($sql) ) { $mensaje .= "Juego3 "; } else { echo('<p>Error creando la tabla de puntuaciones del juego 3: ' . mysql_error() . '</p>'); } include ('administrador3.php'); ?> 3.19. administrador_opcion_destruir_bases_de_datos.php En caso de que el sistema haya sufrido un contratiempo (corrupción de la base 131 de datos, entrada de usuarios no deseados o simplemente si se desea purgar los datos, será conveniente destruir las tablas para volver a generarlas posteriormente. A traves de la opción Destruir bases de datos podremos realizar esta tarea. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zona del administrador de ¡Un chapuzón de diversión!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="oceanografico.css" type="text/css" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> <!-- .Estilo13 {color: #FFFFFF} --> </style> </head> <body> <div id="Layer2" style="position:absolute; width:223px; height:191px; z-index:2; left: 38px; top: 142px; background-color: #FF3300; layer-background-color: #FF3300;" class="Estilo9"> <blockquote> <p align="left" class="Estilo13"><a href="administrador_opcion_crear_administrador.php" class="Estilo9"> Crear administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_administradores.php" class="Estilo9">Listar administradores</a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_borrar_administrador.php" class="Estilo9">Borrar administrador </a></p> <p align="left" class="Estilo13"><a href="administrador_opcion_listar_usuarios.php" class="Estilo9"> Listar usuarios</a></p> <p align="left" class="Estilo13"><a 132 href="administrador_opcion_listar_puntuaciones.php" class="Estilo9">Listar puntuaciones</a> </p> <p align="left" class="Estilo13"><a href="administrador_opcion_modificar_usuario.php" class="Estilo9"> Modificar usuario</a> </p> <p align="left" class="Estilo13"> <a href="administrador_opcion_borrar_usuario.php" class="Estilo9">Borrar usuario</a> </p> <p class="Estilo13"><a href="administrador_opcion_crear_bases_de_datos.php" class="Estilo9"> Crear bases de datos</a> </p> <p><span class="Estilo13"><a href="administrador_opcion_destruir_bases_de_datos.php" class="Estilo9"> Destruir bases de datos</a></span> </p> </blockquote> </div> <div id="Layer3" style="position:absolute; width:496px; height:215px; z-index:3; left: 239px; top: 145px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;" class="EstiloMensaje"> <div align="center"> <p> </p> <p>Solo debes destruir las bases de datos en el caso de que desees reiniciar el sistema, todos los datos almacenados se perderán y habrá que crear de nuevo las bases de datos.</p> <p><a href="destruir_base_de_datos.php">Destruir bases de datos</a> </p> </div> </div> <div id="Layer4" style="position:absolute; width:732px; height:26px; z-index:4; left: 29px; top: 119px; background-color: #FF3300; layer-background-color: #FF3300; border: 1px none #000000; background-image: url(tira.jpg); layer-background-image: url(tira.jpg);"></div> <div id="Layer1" style="position:absolute; width:740px; height:81px; z-index:5; background-image: url(cabecera%20administracion.jpg); layer-background-image: url(cabecera%20administracion.jpg); border: 1px none #000000; left: 25px; top: 25px;"></div> </body> </html> 3.20. destruir_base_de_datos.php El script destruir_base_de_datos.php se encargará de eliminar las bases de datos, dejando el sistema inutil con la necesidad de una regeneración de estas bases de datos mediante la opción crear bases de datos o siguiendo el último punto de la instalación del sistema en un servidor. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> 133 <title>Zona del administrador de ¡Un chapuzón de diversión!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <?php include('crear_conexion_bd.php'); $sql = ('DROP DATABASE oceanografico'); mysql_query($sql); $mensaje = "Las bases de datos han sido destruidas, a continuación debes ir a la opción Crear bases de datos y regenerarlas, o el sistema permanecerá inservible"; include('administrador3.php'); ?> </body> </html> 134 4. Implementación de los mapas 4.1. mapa_sin_usuarios.swf Mapa_sin_usuarios.swf nos ofrece la posibilidad de ver en que consiste cada uno de los juegos de la plataforma, ver sus máximas puntuaciones y registrarnos en la plataforma. Está estructurado de forma que el frame 1 corresponde a la carga inicial y los frames posteriores a los diferentes juegos de los que componen nuestra plataforma, siendo el número de juego correspondiente a cada frame el número de frame en el que está situado menos dos. Así, juego 1 irá al frame 3, juego 2 al frame 4 y juego 3 al frame 5. El frame 2 estará reservado a los botones que carezcan de juego, a pesar de que en un futuro es posible que se cree un juego para ellos. Encontramos un stop(); como código único de _root en cada frame, sin embargo cada botón tiene un código asociado de gran sencillez que se utilizará para navegar dentro del mapa. Este código es el siguiente: on (release) { gotoAndStop(2); } Dentro de cada frame de los juegos ya existentes existen dos nuevos elementos, que son la mascota animada que corresponde al botón sobre el que el usuario ha pinchado y un clip animado de gran atractivo visual con 4 capas. La capa inferior muestra un bocadillo al estilo de los comics que se hace grande hasta alcanzar un tamaño adecuado y en el cual se va a mostrar toda la información y nuevos botones. Las otras 3 capas pertenecen cada una a un botón, el primero de ellos es CERRAR, y consiste en una X en la esquina superior derecha del bocadillo cuyo único código es: _root.gotoAndPlay(1); y simula efectivamente al clásico botón cerrar de las aplicaciones windows. El botón REGISTRATE cumple el propósito de permitir al usuario darse de alta en la plataforma llevandolo a la página de registro. Al igual que sucedía con el botón anterior, su código es de gran sencillez y facil entendimiento. on (release) { url = "registro.php"; getURL(url); } 135 4.2. mapa_usuario_activo.swf La estructura de este fichero es exactamente igual a la del fichero anterior, con una única diferencia, el botón REGISTRATE es sustituido por el botón JUGAR, y su código es ligeramente más complejo, pero igualmente de facil comprensión. on (release) { url = “./juegos/juego1.php?usuario_activo="+_root.nick; getURL(url, "_blank"); } En este caso concatenamos la url q solicitamos tiene un argumento llamado usuario_activo, que será utilizado para enviarle al juego que estamos cargando el nick del usuario activo en el sistema, para que se almacene su resultado en la base de datos, y la instrucción getURL incluye el argumento opcional “_BLANK” gracias al cual la página es cargada en un nuevo explorador, para así no cerrar la ventana donde el usuario se encuentra. Vemos que estamos llamando al fichero juego1.php. Cada uno de los juegos tiene su propio fichero de juego, consistente en una variante modificada del fichero autogenerado por el flash al exportar el proyecto. 4.3. juego1.php Las modificaciones que se han realizado sobre el fichero exportado por el flash (ademas de cambiarle la extensión para mantener coherencia) son las siguientes: <?php $temp = '<param name="movie" value="juego1.swf?nick='; $temp .= $usuario_activo; $temp .= '">'; echo $temp; ?> <?php $temp = '<embed src="juego1.swf?nick='; $temp .= $usuario_activo; $temp .= ' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" width="322" height="269"></embed>'; echo $temp; ?> Estos dos fragmentos de código sustituyen a los inclusores de la película flash en el fichero por unos nuevos inclusores donde ademas de pasar el nombre de la película, añadimos la variable $usuario_activo, que todos los ficheros de juego aceptarán y utilizarán para almacenar la puntuación obtenida en la base de datos. 136 4.4. juego2.php Realiza exáctamente la misma función que el fichero juego1.php, pero actuando sobre el juego2 en lugar del juego1. El código será el siguiente. <?php $temp = '<param name="movie" value="juego2.swf?nick='; $temp .= $usuario_activo; $temp .= '">'; echo $temp; ?> <?php $temp = '<embed src="juego2.swf?nick='; $temp .= $usuario_activo; $temp .= ' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" width="322" height="269"></embed>'; echo $temp; ?> 4.5. juego3.php Realiza exáctamente la misma función que los ficheros juego1.php y juego2.php, pero actuando sobre el juego3 en lugar del juego1 o juego2. El código será el siguiente. <?php $temp = '<param name="movie" value="juego3.swf?nick='; $temp .= $usuario_activo; $temp .= '">'; echo $temp; ?> <?php $temp = '<embed src="juego3.swf?nick='; $temp .= $usuario_activo; $temp .= ' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" width="322" height="269"></embed>'; echo $temp; ?> 4.6. ranking1.php Fichero encargado de mostrar en una ventana nueva las diez mejores puntuaciones del juego 1, con un pequeño código en Javascript para salir de ella. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Un chapuzón de diversión</title> 137 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <link rel="stylesheet" href="oceanografico.css" type="text/css" /> </head> <body bgcolor="#0099CC"> <div id="Layer3" style="position:absolute; width:864px; height:76px; z-index:3; left: 9px; top: 23px; font-size: 9px;"> <p><img src="imagenes/cabecera.jpg" width="889" height="110"> </p> </div> <p> </p> <p> </p> <p> </p> <div id="Capapuntuaciones" style="position:absolute; width:561px; height:295px; zindex:2; left: 165px; top: 251px; font-size: 9px;"> <?php include('crear_conexion_bd.php'); $sql = "SELECT * FROM juego1 ORDER BY puntuacion DESC LIMIT 10"; $salida_sql = @mysql_query($sql); // Obtenemos las diez mejores puntuaciones del juego correspondiente. echo '<table width="200" border="0" align="center"><tr><td class="Estilo9">Máximas puntuaciones</td><td class="Estilo9"></td></tr>'; while($row = mysql_fetch_array($salida_sql)){ $texto = '<tr><td class="Estilo9">'; $texto .= $row["nick"]; $texto .= '</td><td class="Estilo9">'; $texto .= $row["puntuacion"]; $texto .= '</td></tr>'; echo $texto; } echo '</table>'; // Se creará una tabla donde se mostrarán los usuarios que han realizado las mejores puntuaciones con estas puntuaciones. ?> <p> <font color="#FFFFFF"> </font></p> </div> 144 básico pero no ser capaz de entender lo avanzado y no encontrar otra forma de entenderlo que pasarse horas intentando entenderlo sin que nadie te pueda prestar ayuda. Tambien destacar la poca cantidad de foros sobre Flash y la poca calidad de estos. Dentro de las características del Flash ya hemos destacado su gran facilidad de difusión de contenidos (Al ser via web, que la dirección sea publicada en alguna web con muchas visitas contribuirá a la rápida difusión de el juego o la animación), pero encontramos un defecto que afecta a los creadores de juegos con esta aplicación, como es no poder excederse demasiado en la complejidad del juego, ya que no es precisamente la herramienta que mejor administra los recursos de los que dispone (Por otra parte lógico, al ser genérica para todo tipo de procesadores). Le sucede lo mismo que al Java, al ser un lenguaje interpretado requiere de lo que llamamos una máquina virtual, es decir, el código no lo ejecutará directamente el computador, primero deberá ser convertido a código que el computador entienda, y esta es la función del plugín que instalamos. Hacer que el ordenador sepa que es un fichero de Flash y que lo adapte al ordenador que lo está ejecutando, con el consecuente gasto de recursos únicamente en la conversión. Sin embargo con el nivel tecnológico actual esto está empezando a dejar de ser un problema, ya que nos podemos permitir malgastar toda la memoria RAM que deseemos, pero debemos tener en cuenta que no todos los usuarios que accedan a los contenidos que creemos van a tener el mismo ordenador que nosotros e igual en algunos casos el juego les funciona mal, por lo que deberíamos testear el juego con diferentes ordenadores y siendo descargado con diferentes velocidades de conexión. Flash incluye un emulador de descarga, para que podamos ver cuanto tarda nuestra aplicación en ser descargada, pero este emulador peca de no ser realista, ya que desde un entorno real puede haber congestiones, y un exceso de uso de la linea, problemas en el servidor y una lista de problemas, pero para hacernos una idea si que nos sirve. Volviendo al tema principal, para la realización de un juego sobre el oceanográfico deberemos hacer un juego que atraiga a los niños, y no sea excesivamente complejo. Lo adecuado para esto es una simplicación de uno de los géneros existentes (en este caso de los juegos de ladrillos) para crear un juego que nada tiene que ver con este género (ni con ninguno) donde puedan mostrar su habilidad y en caso de derrota deseen volver a jugar para demostrarse a si mismos que eran capaces de más. Observando el mundo real vemos que a los niños les gusta el futbol, y siempre se desafían a ver quien es capaz de hacer más toques con el balon sin que este caiga al suelo, quizá este enfoque pueda parecer exclusivo del género masculino, pero en la actualidad las niñas disfrutan del futbol tanto como los niños. En base a esta idea vamos a hacer un juego que sea una especie de adaptación de esta idea a un mundo digital, donde tengamos una esfera que pueda caer a un lugar donde sea destruida y perdamos el juego, y tengamos varias plataformas donde esta esfera rebote y así no caiga al suelo. Para adaptar esta idea al oceanográfico la basaremos en la sección de los pájaros, consistente en una enorme jaula con diferentes aves y en la que en la parte inferior hay dos pequeños lagos (y un camino para que pasen los visitantes y las observen). A la hora de adoptar este concepto al juego, realizaremos una asociación directa de los elementos del juego con los elementos de la jaula, siendo el escenario en el que jugamos la propia jaula, delimitando por donde la pelota puede estar o no estar, la pelota será un pájaro que nos encontremos en la jaula y los elementos que controlaremos directamente serán unas ramas sobre las que el pájaro saltará y que impedirán que caiga al agua. 145 Objetivo Con este juego pretendemos que el usuario pase un rato divertido en el y por tanto asocie diversión con el oceanográfico, y el alto grado de adicción de un juego de estas características contribuye a que el usuario quiera volver a jugar, que es otro objetivo del juego. Público objetivo El público objetivo de nuestro juego serán los niños que se hayan registrado en la plataforma y busquen un juego donde puedan probar su habilidad y capacidad de concentración Contenidos y servicios El juego gozará de gran sencillez y toda la acción se desarrollará en una única pantalla con fondo selvático. Los elementos que podremos encontrar en el juego serán un pájaro llamado Scott, consistente en 4 fotogramas que unidos formarán una animación del pájaro volando y encontraremos una imagen de un nido, que será situada 3 veces a modo de plataformas sobre las que el pájaro saltará. El juego se controlará con los cursores, siendo la tecla izquierda utilizada para activar el nido izquierdo, la tecla abajo utilizada para el nido central y la tecla derecha para el nido derecho. El pájaro se moverá como una pelota siguiendo una física no excesivamente realista pero que le da mayor grado de diversión que el uso de una física realista. En la zona no visible del fichero swf se encuentra la zona en la que acaba el juego, si en algún momento el pájaro toca esa zona, la partida se acaba. No habrá posibilidad de continuar ni se darán vidas extra. La pantalla de entrada nos ofrecerá una imagen de la mascota del juego sobre un escenario similar (pero no igual) que el que encontraremos durante el juego. Es posible que se efectue algún cameo de los protagonistas de los otros juegos en esta pantalla. Encontraremos también un botón para comenzar a jugar y otro para ver las instrucciones y el nombre del juego: “Scott, el pájaro que no sabía volar”. Las instrucciones del juego estarán redactadas de forma muy directa explicando el problema de Scott (que no sabe volar) y la forma de ayudarle en sus intentos de aprender a volar, y existirá un único botón para comenzar a jugar. Se considera innecesaria la existencia de un segundo botón que lleve a la pantalla anterior. 146 1.2. Fase de implementación El fichero Flash generado para la realización del juego de Scott contiene 5 frames, cada uno de los cuales contiene una capa llamada Actionscript en la que se ha escrito todo el código correspondiente a ese frame. Así logramos un mayor orden a la hora de acceder al código fuente, pero por el contrario obtenemos una mayor cantidad de código con referencias a objetos que están en ese momento en pantalla en lugar de asignarle el código a los objetos de forma directa. Considero una forma más ordenada y sencilla de entender y actualizar la forma utilizada. A continuación encontramos el código fuente de todo el proyecto y los comentarios y explicaciones de las partes que puedan causar algún problema de comprensión. FRAME 1 (Pantalla de bienvenida) stop(); // Al inicio de cada frame nos detendremos en el, con lo que obtendremos un efectivo sistema para movernos a traves del fichero mediante la instrucción gotoAndPlay(frame); sin perder nunca el control de donde estamos. Las dos funciones siguientes son un ejemplo de desplazamiento dentro del fichero mediante botones. boton_jugar.onPress = function(){ gotoAndPlay(2); }; boton_instrucciones.onPress = function(){ gotoAndPlay(5); }; sonido_caida = new Sound (); // Definimos una nueva variable de sonido llamada sonido_caida sonido_caida.attachSound("caida.wav"); //Al sonido sonido_caida, inicialmente vacio, le insertamos el sonido "caida.wav", el cual se encuentra en nuestra biblioteca del Flash. sonido_pop = new Sound ();// Definimos una nueva variable de sonido llamada sonido_pop sonido_pop.attachSound("pop.wav");//Al sonido sonido_pop, inicialmente vacio, le insertamos el sonido "pop.wav", el cual se encuentra en nuestra biblioteca del Flash. FRAME 2 (Preeliminares del juego) stop(); puntuacion = ""; // Damos a la puntuación el valor nulo, para que no se muestre por pantalla. cuenta = 0; // Esta variable nos servirá para sincronizar el fichero flash en el tiempo con la animación que muestra la cuenta atrás para comenzar el juego, se basa en saltar al frame 3 (juego) 3 segundos despues de entrar en este frame. Al estar 147 configurado el fichero para ejecutarse a 25 frames por segundo, esto nos da un total de 75 frames, que serán los que permaneceremos en el frame 2 antes de saltar al frame 3, como se aprecia en la función siguiente. La animación aún permanece un segundo más en pantalla, pero únicamente por cuestiones estéticas, sin afectar a la marcha del juego. this.onEnterFrame = function(){ cuenta++; if (cuenta == 75){ gotoAndPlay(3); } }; FRAME 3 (Juego) stop(); puntuacion = 0; // Iniciamos la cuenta de la puntuación. vpelotita = Math.floor(Math.random()*10); // Indicamos la velocidad vertical inicial de la pelota (variable vpelotita), es escogida de forma aleatoria. vacel = 15; // Especificamos la aceleración inicial de la pelota (variable vacel). vpelotitax = Math.floor(Math.random()*10-5); //Indicamos la velocidad horizontal inicial de la pelota (variable vpelotitax); rebote = 2; // Variable que será utilizada durante el juego para darle variedad imagen_pelotita=0; // Por razones de lograr una perfecta animación del pájaro en todo momento, hemos creado una función que reproduce el frame correcto en cada momento y hace uso de la variable imagen_pelotita,inicializada a 0. pelotita.onEnterFrame = function(){ // Este código se repite en cada frame de la pelotita. imagen_pelotita++; // Aumentanos la variable imagen_pelotita en 1 if (imagen_pelotita >=7) { imagen_pelotita = 0}; // En caso de exceder el número total de frames partido dos (16/2 = 8) de la pelotita, volvemos al cero. if (vpelotitax>=0){ // Vemos si la velocidad de la pelota es mayor que 0 (se mueve a la derecha) o no (se mueve a la izquierda) pelotita.gotoAndPlay(1+imagen_pelotita);} // Si es mayor que 0 reproducimos los frames entro 1 y 8 del pájaro, correspondientes al movimiento hacia la derecha. else { pelotita.gotoAndPlay(9+imagen_pelotita);} // Caso opuesto al anterior, reproducimos los frames entre 9 y 16, correspondientes al movimiento hacia la izquierda. //Con las dos siguientes instrucciones movemos la pelotita en el espacio con la velocidad actual. this._y = this._y + vpelotita; this._x = this._x + vpelotitax; if(vpelotita <= vacel){vpelotita++;}; // Incrementamos la velocidad vertical de la pelotita en base a la aceleración actual. Realmente podemos apreciar que la variable vacel no es aceleración, es un limitador de velocidad máxima que será utilizado para simular aceleración. 148 // El siguiente bloque if sirve para alterar las propiedades de la pelotita en caso de contacto con algún nido (Botón), en los 3 botones se comporta de forma similar. if (this.hitTest(boton1)){ vpelotita = -1*vpelotita; // Al multiplicar por -1 vpelotita, logramos el cambio de dirección de la pelotita en el eje vertical. puntuacion++; // A cada rebote incrementamos la puntuación en 1 //Cada nido está dividido en 3 secciones, izquierda, centro y derecha, en base a donde rebote la pelotita el rebote será de una forma o otra, incrementando la velocidad de la pelotita mediante la variable rebote. if (pelotita._x <= boton1._x+20){ _root.sonido_pop.start(); // Al contacto de la pelota con un nido se reproducirá el sonido sonido_pop if (vpelotitax >= 0){ vpelotitax = vpelotitax - rebote; } else {vpelotitax = vpelotitax + rebote;} } else if(pelotita._x >= boton1._x + 50){ if (vpelotitax >= 0){ vpelotitax = vpelotitax + rebote; } else {vpelotitax = vpelotitax - rebote;} } } else if(this.hitTest(boton2)){ _root.sonido_pop.start(); vpelotita = -1*vpelotita; puntuacion++; if (pelotita._x <= boton2._x+20){ if (vpelotitax >= 0){ vpelotitax = vpelotitax + rebote; } else {vpelotitax = vpelotitax - rebote;} } else if(pelotita._x >= boton2._x + 50){ if (vpelotitax >= 0){ vpelotitax = vpelotitax + rebote; } else {vpelotitax = vpelotitax - rebote;} } } else if (this.hitTest(boton3)){ _root.sonido_pop.start(); vpelotita = -1*vpelotita; puntuacion++; if (pelotita._x <= boton3._x+20){ if (vpelotitax >= 0){ vpelotitax = vpelotitax - rebote; } else {vpelotitax = vpelotitax + rebote;} } else if(pelotita._x >= boton3._x + 50){ if (vpelotitax >= 0){ vpelotitax = vpelotitax + rebote; } else {vpelotitax = vpelotitax - rebote;} } } 149 // Los rebotes contra las paredes son mucho más sencillos, consistiendo simplemente en un cambio de dirección en el eje horizontal, y en un aumento de la velocidad en caso de que la pelotita viaje excesivamente despacio. if (this.hitTest(pared_izquierda)){ vpelotitax = -1*vpelotitax; if(vpelotitax<=5){ vpelotitax= 5 }; this._x = this._x + vpelotitax; } if (this.hitTest(pared_derecha)){ vpelotitax = -1*vpelotitax; if(vpelotitax>=-5){ vpelotitax= -5 }; this._x = this._x + vpelotitax; } // La última colisión a verificar es el rebote de la pelotita contra el suelo, elemento no visible, que consistirá en saltar al frame 4 (game over). if (this.hitTest(suelo)){ _root.sonido_caida.start(); // En caso de que la pelota caiga al suelo se reproducirá el sonido sonido_caida. gotoAndPlay("Game_over"); } }; this.onEnterFrame = function(){ // Al comienzo de cada frame hay que realizar una serie de tareas referentes a los nidos. Por razones de testeo se optó por hacer invisibles las plataformas no seleccionadas, y a pesar de que actualmente no es necesaria esta característica, se ha decidido mantener activa debido a su escaso uso de recursos y altas posibilidades en una actualización futura. boton1.gotoAndPlay(1); // Hacemos desaparecer el nido 1 (en su frame 1 es invisible, en el 2 es visible) boton2.gotoAndPlay(1); boton3.gotoAndPlay(1); boton1._y = 352.0; // Desplazamos el nido 1 a una zona fuera de la zona visible. boton2._y = 352.0; boton3._y = 352.0; // Para cada tecla pulsada, situamos el nido asociado a la zona visible de la pantalla y mostramos su frame visible (frame 2). if(Key.isDown(37)){ // Tecla izquierda boton1.gotoAndPlay(2); 150 boton1._y = 252.0; boton2._y = 352.0; boton3._y = 352.0; } else if(Key.isDown(40)){ // Tecla abajo boton2.gotoAndPlay(2); boton1._y = 352.0; boton2._y = 252.0; boton3._y = 352.0; } else if(Key.isDown(39)){ // Tecla derecha boton3.gotoAndPlay(2); boton1._y = 352.0; boton2._y = 352.0; boton3._y = 252.0; } // El siguiente conjunto de eventos tienen como única función el hacer el juego más variado, modificando la velocidad y aceleración de la pelotita en base al tiempo (de forma aleatoria) y a la puntuación actual, posibilitando el obtener alturas más altas a mayor puntuación y dandole un grado de aletoriedad al juego que hace que ninguna partida pueda ser exactamente igual a otra. velocidadx = velocidadx + Math.floor(Math.random()*8-4); yacel = yacel + Math.floor(Math.random()*8-4); if (yacel<= Math.floor(puntuacion/5)){ yacel = Math.floor(puntuacion/5) } if (velocidadx <= 2){velocidadx = 6;}; if (velocidadx >= -2){velocidadx = -6;}; if (yacel >= 35){yacel = 35;}; }; FRAME 4 (Game over) stop(); loadVariablesNum ("http://localhost/juegos/juego_guardar_datos.php?nick="+nick+"&puntuacion="+punt uacion+"&juego=juego1", 0); // Esta larga llamada a una función nos permite comunicar nuestra puntuación y el usuario activo en el sistema al servidor para su almacenamiento y posterior muestra en el caso de que el resultado sea uno de los 5 mejores resultados. boton_jugar2.onPress = function(){ gotoAndPlay("Juego"); }; FRAME 5 (Instrucciones) 151 stop(); boton_jugar.onPress = function(){ gotoAndPlay("Juego"); }; 152 2. Igor, el pingüino defensor 2.1. Fase de estudio Introducción Hemos decidido que el personaje principal de este juego sea un pingüino, ya que dentro de los animales pertenecientes a la zona del Océano Ártico, quizá sea el animal que puedan gustar más a los niños debido a las características que poseen. El pingüino protagonista hemos decidido llamarlo Igor. Esta es la imagen de Igor dentro del juego: Igor El tipo de publico objetivo al que va dirigido este juego son niños de hasta unos 12 años aproximadamente. Por tanto para que los niños mas pequeños puedan comprender el juego y su funcionamiento no podemos crear un juego con una mecánica de funcionamiento muy complicada o con unos controles demasiado complicados para niños de esta edad. Igor únicamente puede desplazarse de izquierda a derecha y disparar. Los movimientos de Igor se realizaran a través del teclado con las flechas de dirección y el disparo con la barra espaciadora. Los enemigos del juego son una especie de figuras mutantes, que desde una posición superior nos disparan. Deberemos esquivar sus disparos y a su vez dispararles para destruirlos. Los enemigos del juego son figuras ficticias, ya que hemos considerado lo mas correcto, evitando así utilizar otras figuras como animales. La imagen de fondo del juego es un paisaje con nieve para crear una atmósfera mas real. En esta imagen hemos puesto a modo de guiño o referencia una imagen de Bill, otro de los personajes que integra esta plataforma, con esto lo que se quiere obtener es una integración de distintos juegos dentro de una plataforma común. 153 Fondo del juego Objetivo El objetivo del juego es obtener el máximo numero de puntos. Para ello deberás destruir todos los mutantes que hay volando por la pantalla, cada uno tiene una puntuación distinta y existe un mutante que aparece unos segundos en pantalla, siendo la puntuación de este la mayor de todas. 2.2. Fase de implementación Una vez que hayamos accedido al juego, podremos ver en pantalla una precarga para hacer la espera más amena y que el usuario no se desespere y piense que el juego falla. // Precarga loaded = getBytesLoaded(); total = getBytesTotal(); if (loaded == total) gotoAndStop("Loaded"); pc = int(100 * loaded / total) + "%"; código frame 1 gotoAndPlay(1); código frame 3