PROYECTO FINAL DE CARRERA

Transcripción

1 PROYECTO FINAL DE CARRERA EVALUACIÓN DE ENTORNOS DE DESARROLLO WEB BASADO EN COMPONENTES: CINE EN 8MM AUTOR: FRANCISCO JAVIER CORBÍN SÁNCHEZ DIRECTOR: FÉLIX BUENDÍA GARCÍA

2 ÍNDICE 1. INTRODUCCIÓN Objetivos y motivaciones Descripción y solución Estructura del proyecto ESPECIFICACIÓN DE REQUISITOS INTRODUCCIÓN Propósito Ámbito Definiciones, acrónimos y abreviaturas Referencias Visión global DESCRIPCIÓN GENERAL Perspectiva del producto Funciones del producto Características del usuario Asunciones y dependencias REQUISITOS ESPECÍFICOS Requisitos de interfaces externas Requisitos funcionales Restricciones de diseño ANÁLISIS Y DISEÑO ANÁLISIS DIAGRAMAS DE CASOS DE USO Visitante Miembro Editor Administrador DIAGRAMA DE CLASES DIAGRAMAS DE SECUENCIA DISEÑO DIAGRAMA NAVEGACIONAL DIAGRAMA ENTIDAD-RELACIÓN... 30

3 DISEÑO LÓGICO DE LA BASE DE DATOS DICCIONARIO DE DATOS IMPLEMENTACIÓN PATRONES DE TRADUCCIÓN ESQUEMA DE CLASES TECNOLOGÍAS UTILIZADAS DESCRIPCIÓN DE LA IMPLEMENTACIÓN EVALUACIÓN ESTÁNDAR XHTML ESTÁNDAR CSS PRUEBA DE NAVEGADORES CONCLUSIONES BIBLIOGRAFÍA ANEXO A.- DISEÑO FÍSICO DE LA BASE DE DATOS... 47

4 1.- INTRODUCCIÓN Objetivos y motivaciones Los objetivos de este proyecto es la creación de un portal web, donde se podrán leer y comentar las últimas noticias y críticas del mundo del cine. Además de contener una base de datos con todas sus películas, actores y directores. Los usuarios tendrán la capacidad de hacer búsquedas del contenido y ponerse en contacto con el administrador vía entre otras cosas. La motivación de este proyecto es la centralización de la vasta información que existe en diversas páginas web sobre cine pero sin tener que depender de todas ellas. Además de la creación de una web realizada con php y mysql desde cero Descripción y solución Para la realización del portal hubo un estudio previo de otros portales muy conocidos con los que inspirarse y acoger algunos de sus servicios, tales como y Filmaffinity cuenta con una muy buena base de datos de películas con puntuaciones de los usuarios registrados, además de recortes de las valoraciones de las revistas más importantes. Blogdecine (Figura 1) cuenta con opiniones de editores amateurs en muchas categorías, manteniendo al lector informado de todo lo que sucede. Además a los usuarios se les da la opción de comentar las entradas para exponer su punto de vista.

5 Figura 1 - Portal Blogdecine Al final se optó por un portal vertical buscando la esencia de las webs anteriores para realizar una sola que contenga lo mejor de ambas. Para la realización del proyecto se optó por una solución práctica y sencilla como es php y mysql. Partiendo desde cero con todo y basándose en una estética de dos columnas ya que hace más visible y rápido el acceso a todo el contenido que cualquier otra distribución. Además opté por la inclusión de un menú superior para cada una de las secciones y servicios que se ofrecen Estructura de la memoria La estructura de esta memoria esta compuesta por cada uno de los estudios previos hasta la implementación del mismo proyecto. Los apartados que se han seguido para la elaboración de esta memoria son los siguientes: a. Especificación de requisitos Requerimientos específicos y necesidades del proyecto tanto software como hardware y sus funcionalidades. b. Análisis y diseño

6 En el análisis se estudia las funcionalidades y contenidos además de su estructura. Mientras que en el diseño se da una visión más técnica orientada al desarrollador. c. Implementación d. Evaluación e. Conclusiones f. Bibliografía Esta será la parte más extensa, donde se explicará como esta desarrollado el portal desde un punto global, hasta adentrarse en funciones, partes específicas y la interconexión con la base de datos. En la evaluación se describirán las diferentes pruebas a las que se someterá el portal para comprobar su buen funcionamiento. Además en este apartado se incluirá el mantenimiento de la web. En las conclusiones se resumirá el trabajo realizado durante todo el proyecto y la comparación con los objetivos definidos al principio. Contendrá, como toda bibliografía, las principales referencias que ayudaron a desarrollar este proyecto. También contará con una webgrafía con todos los enlaces que ayudaron en cosas muy concretas.

7 2.- ESPECIFICACIÓN DE REQUISITOS INTRODUCCIÓN Propósito Esta especificación de requisitos servirá para saber de antemano cuales van a ser los requerimientos de la página web sobre cine montada sobre php y mysql Ámbito Se desarrollará un portal sobre cine, en el que los usuarios podrán calificar las películas criticadas y escribir opiniones sobre ellas. De esta manera se podrá determinar que películas son las que mejor puntuación obtienen. El portal contará con un apartado de noticias sobre cine, críticas y biografías de los actores Definiciones, acrónimos y abreviaturas Noticias: Contará las novedades más importantes del mundo del cine. Críticas: Crónicas de las últimas películas estrenadas en el cine. Entrevistas: Entrevistas a distintos actores, directores, etc Referencias Se ha utilizado como referencia la Guía de Requerimientos de Software IEEE y como ejemplo a modo de orientativo el ejemplo ERS Visión global En el portal se dará información actualizada entorno a los acontecimientos más importantes en el mundo del cine, películas de estreno o a estrenar y críticas de diversas películas en DVD DESCRIPCIÓN GENERAL Perspectiva del producto El producto estará programado en Php junto con MySql por lo que para la

8 ejecución se necesitará de un servidor Apache junto con un módulo de Php y MySql Funciones del producto Se podrá añadir películas junto con su imagen en una base de datos. Se mostrará enlaces a otras páginas web de cine. Mostrará una página con los últimas críticas y la nota del usuario de cada película. Se mostrará una página principal para cualquier visitante con las últimas noticias de cine. Se permitirá enviar artículos a los editores del portal. Los usuarios registrados podrán escribir comentarios y puntuar las críticas. Las opciones buscar y enviar correo electrónico estarán disponibles para cualquier visitante Características del usuario Se estima que el usuario que visite la página web pueda comprender cualquier rango de edad aunque se espera obtener una audiencia superior a los 18 años. Usuarios anónimos: Estos usuarios tan sólo podrán leer el contenido de cualquier sección, pero no participar. Usuarios registrados: Estos usuarios tendrán la capacidad de comentar en las noticias y en las películas, además de votarlas. Administrador: será el encargado de administrar la página web, podrá borrar y modificar usuarios, para darles permisos de editor. Editores: Serán los encargados de escribir, modificar y borrar tanto las noticias como las críticas de las películas Asunciones y dependencias Para la implementación de este portal se necesitará un servidor Apache en Windows, Linux o Mac OS X Server, con soporte para Php (4.1.2). Además de un servidor de bases de datos MySql. Para el cliente no habrá restricciones a la hora de visualizar correctamente la página web respecto a su sistema operativo o navegador. Se recomienda Mozilla Firefox o compatible.

9 2.3.- REQUISITOS ESPECÍFICOS Requisitos de interfaces externas Al cualquier usuario que se conecte a la página principal se le mostrará con las últimas noticias y últimas críticas escritas. Además el usuario registrado podrá, una vez seleccionada la noticia o crítica, comentarla y darle una puntuación a las críticas. Al administrador se le mostrará su panel donde podrá borrar y/o modificar usuarios. A los usuarios registrados podrá convertirlos en editores, modificando sus cuentas de usuario registrado. Los editores se le mostrará su panel en el que podrán crear, borrar y modificar cualquier noticia o crítica Requisitos funcionales a. Requisito funcional 1 Los usuarios registrados tendrán un nombre de usuario único y una contraseña con la que podrán conectarse al sistema para poder acceder a los servicios prestados por el portal, dependiendo de sus privilegios. b. Requisito funcional 2 En el registro de nuevos usuarios estos deberán introducir cual es el nombre de usuario deseado y su contraseña, además de su nombre e . Se comprobará que el usuario y el no existen el la base de datos. c. Requisito funcional 3 Insertar noticias y críticas. Los editores serán los encargados de escribir estos apartados de la página web. Para ello deberán proporcionarle un título a la noticia, una categoría y su contenido. Para los críticas será similar exceptuando el título de la crítica que será el título de la película a comentar y su género. d. Requisito funcional 4 Modificar noticias y críticas. Cualquier editor, desde su panel, podrá modificar tanto críticas como noticias. e. Requisito funcional 5 Borrar noticias y críticas. Podrán borrar noticias y críticas desde su panel de editores.

10 f. Requisito funcional 6 Crear categorías y géneros. Se podrán crear categorías y géneros para poder asignárselas a las noticias y críticas. g. Requisito funcional 7 Cualquier visitante tendrá la posibilidad de enviarle un correo electrónico al administrador para sugerir alguna cosa. h. Requisito funcional 8 Cualquier visitante podrá realizar una búsqueda de los contenidos de la web simplemente poniendo la coincidencia a buscar Restricciones de diseño a. Limitaciones de software Podría darse que algún cliente utilizara una resolución de pantalla no apropiada para la completa visualización de la página web por lo que aparecerían barras de desplazamiento. Para una total compatibilidad con la página web se recomienda Firefox. b. Limitaciones de hardware Estas serán las limitaciones propias del cliente o servidor respecto a los ordenadores utilizados. Aunque en principio no tiene por que existir ninguna limitación de hardware.

11 3.- ANÁLISIS Y DISEÑO ANÁLISIS DIAGRAMAS DE CASOS DE USO En los diagramas de casos de uso veremos cada uno de los comportamientos del portal web dependiendo del tipo de usuario que se conecte. En este proyecto veremos 4 casos diferentes: visitante, usuario registrado, editor y administrador. A los que dependiendo del nivel de privilegios de cada uno se le mostrará unas opciones distintas a realizar dentro de su propio panel. En el caso del usuario registrado (llamado miembro) no dispondrá de ningún panel, simplemente estará capacitado para realizar las opciones que se le permitan dentro del portal Visitante Figura 2 - Casos de uso del visitante En la Figura 2 podemos ver como un visitante (no registrado) puede acceder a diversos servicios como registrarse, realizar una búsqueda o enviar un correo al administrador.

12 Para registrarse, el usuario deberá introducir un nombre de usuario, una contraseña, su nombre real, y un correo electrónico. En el caso del nombre de usuario y del correo electrónico deberán ser únicos. Para eso el portal comprobará que no exista ninguna coincidencia en la base de datos en cada uno de esos casos. La búsqueda también la podrá realizar cualquier usuario, aunque no esté registrado. Para ello deberá seleccionar si desea buscar entre las noticias o las críticas e introducir una palabra a buscar. El tercer servicio ofrecido para los visitantes es la posibilidad de enviarle un correo electrónico al administrador. Para se necesitará rellenar obligatoriamente su nombre, el correo y el texto a enviar.

13 Miembro Figura 3 - Casos de uso de un miembro Cualquier usuario puede convertirse en miembro, por lo que después de registrarse tendrá, además de las opciones del usuario no registrado, dos opciones más para interactuar con el portal. Estas opciones son, la posibilidad de comentar las noticias y criticas. Por lo que si eres un usuario registrado y autenticado en el sistema, automáticamente aparecerá la opción de comentar la noticia o crítica. Además de todo esto en las críticas aparecerá un campo especial con una numeración del 0 al 10 para puntuar la película criticada a la vez que enviamos un comentario.

14 Editor Figura Casos de uso del editor Para llegar a convertirse en editor, el administrador le tiene que dar permisos de editor a los usuarios registrados. Los editores tendrán la capacidad de generar contenido para la página web. Estos podrán crear noticias y criticas. Para ello rellenarán los campos correspondientes al título, texto y categoría, en el caso de las noticias. Para las críticas en vez de categoría, se seleccionará un género.

15 Para borrar, se seleccionará una de las críticas o noticias que aparecerán en una lista desplegable ordenadas por el título alfabéticamente. Otra de las opciones para los editores será la posibilidad de modificar una noticia o crítica. Para ello dentro de la opción de borrar crítica o noticia, la seleccionarán por el título, estando ordenadas por fecha para encontrarlas más fácilmente.

16 Administrador Figura 5 - Casos de uso del administrador Como es de suponer el administrador tendrá los mismos privilegios que cualquiera de los usuarios registrados, más los propios de administrador. En este caso el administrador no toma parte en el contenido de la página web, por lo que su función principal será la de mantenimiento de la página, borrar usuarios y modificarlos. Por lo que para borrar un usuario, se seleccionará desde una lista desplegable ordenada por el nombre de usuario y en orden alfabético. Para modificarlo la opción será parecida, se seleccionará un usuario y cambiaremos solamente los campos que queramos modificar, dejando en blanco el resto.

17 DIAGRAMA DE CLASES Figura 6 - Diagrama de clases Mediante este diagrama de clases podemos ver las distintas entidades que ofrece el portal web. En el diagrama podemos ver como a partir de la portada de la web podremos registrarnos, contactar con el administrador, buscar o autenticarnos. En la portada veremos las últimas noticias y críticas escritas por los editores. Entrando en cada una de las noticias y críticas podremos ver los comentarios de cada una de ellas. En el caso de las críticas, además, podremos ver la puntuación media total votada por cada uno de los comentarios de las críticas. Por otro lado tendremos la opción de registrarnos, con lo que introduciendo un usuario, nuestro nombre, correo electrónico y contraseña estaremos registrados en la página web. Desde la misma portada, o desde cualquier punto de la página en la barra lateral, tendremos la opción de validar nuestro usuario para poder comentar y votar las noticias y críticas respectivamente. En el caso de los editores y administradores, accederán a su panel correspondiente. En el panel de administrador, tendremos las opciones de administrador, que serán la posibilidad de borrar usuarios y modificarlos. Mientras que en el panel de los editores, estos tendrán la posibilidad de crear, modificar y borrar, noticias y criticas.

18 DIAGRAMAS DE SECUENCIA Figura 7 - Diagrama de secuencia identificación de usuario Para conectarse e interactuar con la página web los usuarios registrados deberán conectarse mediante un formulario. En este formulario tendrán que rellenar su usuario y la contraseña, entonces el servidor reconocerá al usuario y le mostrará un menú u otro dependiendo de los privilegios de cada uno.

19 Figura 8 - Diagrama de secuencia del registro de un usuario Para ser un usuario registrado previamente habrá que registrarse para poder acceder a ciertos privilegios que no tienen los usuario anónimos. Para ellos se hará la petición de la web con el formulario de registro, el usuario rellenará los campos necesarios y se enviarán todos los datos al servidor, registrándole y mostrándole un aviso de registro correcto.

20 Figura 9 - Diagrama de secuencia de añadir noticia El usuario que tenga privilegios de editor tendrá la posibilidad de crear noticias para que sean mostradas en el portal. Para eso desde el panel de editores hará la petición para añadir una nueva noticia, el servidor le devolverá la página con el formulario a rellenar. Una vez cumplimentado el formulario con el título de la noticia, el texto y su categoría, se enviará al servidor, validándola e insertándola en la base de datos. Al usuario se le mostrará un mensaje de confirmación de insertado.

21 Figura 10 - Diagrama de secuencia de insertar un comentario Cuando un usuario esta registrado tiene permitido realizar comentarios. Para ello seleccionando la noticia a comentar, al final de esta tiene un formulario para rellenar con el comentario correspondiente.

22 Figura 11 - Diagrama de secuencia de eliminar usuario Para poder eliminar un usuario se debe ser administrador. Una vez identificado y en el panel de administrador, se selecciona la opción de borrar usuario, se seleccionará el usuario de una lista desplegable y se borrará.

23 Figura 12 - Diagrama de secuencia de eliminar noticia Para eliminar una noticia la condición será el tener privilegios de editor. Después desde el panel de editores, seleccionar la opción de borrar noticias y eligiendo la noticia correspondiente de una lista desplegable se borrará la noticia.

24 Figura 13 - Diagrama de secuencia de modificar noticia Para poder modificar una noticia se deberá tener privilegios de editor. Una vez en el panel de editores seleccionar la opción de modificar noticia. Se selecciona la noticia de una lista desplegable y se cargará la noticia. Ahora tan sólo queda modificar lo que queramos cambiar de la noticia y enviar de nuevo el formulario.

25 3.2.- DISEÑO En el diseño se puede establecer una determinada arquitectura Web la cual definirá los diferentes componentes de la aplicación. Una de las más utilizadas es el modelo de tres capas. Estas tres capas son el nivel de presentación, el nivel lógico y el nivel de almacenamiento (o persistencia). El nivel de almacenamiento será el nivel más bajo de todos, sobre el que se sustentará todo. En el se establecerán los datos de la aplicación, como puede ser un gestor de base de datos, de donde se podrá almacenar y recuperar datos para ser mostrados por la aplicación. El nivel lógico es la capa intermedia que se encargará de comunicar la inferior, la capa de almacenamiento, y la superior, la capa de aplicación. Aquí es donde residirá la lógica de la aplicación, recibiendo peticiones y devolviendo respuesta a los visitantes. Por último la capa de presentación, que es la capa que interactúa con el usuario, la capa que proporciona interactividad visual de la información manejada en capas inferiores. El primer nivel en el que se profundizará será el nivel de presentación en el que estarán los diagramas navegacionales. Y el modelo Entidad-Relación, el diseño lógico y físico de la base de datos estará dentro del nivel de almacenamiento comentado anteriormente.

26 DIAGRAMAS NAVEGACIONALES Figura 14 - Diagrama navegacional del visitante El visitante anónimo, al no estar registrado será el que tendrá menos opciones de movilidad y servicios por la web. Desde la portada podrá acceder a buscar contenido en críticas y noticias. A su vez podrá meterse en las secciones de críticas y noticias. Además desde el panel lateral podrá seleccionar la categoría o genero para mostrarle todas las noticias y críticas con esas categorías y géneros. Incluso el visitante anónimo tendrá la opción de enviar un correo al administrador para sugerirle cualquier cosa.

27 Figura 15 - Diagrama navegacional de un miembro El usuario registrado en la web, una vez identificado, podrá hacer lo mismo que el usuario anónimo y además comentar críticas y noticias. En las críticas además, este podrá puntuarlas conforme sus gustos por las películas.

28 Figura 16 - Diagrama navegacional del editor El editor además de hacer lo que los usuarios registrados y los visitantes anónimos, este será capaz de borrar, modificar e insertar, tanto críticas como noticias desde su panel de editores.

29 Figura 17 - Diagrama navegacional del administrador El administrador que cumple meramente con una misión de administración de usuarios. Podrá borrar y modificar usuarios desde su panel de administrador. Además de los mismos privilegios que los usuarios registrados, pero no el de los editores.

30 DIAGRAMA ENTIDAD-RELACIÓN Figura 18 - Diagrama entidad-relación

31 En el diagrama de entidad-relación podemos visualizar los objetos pertenecientes a la base de datos como entidades relacionadas entre sí DISEÑO LÓGICO DE LA BASE DE DATOS Criticas ( critica_id: d_id, autor: d_id, genero: d_id, titulo: d_titulo, texto: d_texto, puntuacion: d_puntuacion, fecha: d_fecha ) CP: { critica_id } CAj: { critica_id } -> PELICULAS CAj: { autor } -> USUARIOS CAj: { genero } -> GENEROS VNN:{ autor, genero, titulo, texto, fecha } Noticias ( noticia_id: d_id, autor: d_id, categoria: d_id, titulo: d_titulo, texto: d_texto, fecha: d_fecha ) CP: { noticia_id } CAj: { autor } -> USUARIOS CAj: { categoria } -> CATEGORIAS VNN: { autor, categoria, titulo, texto, fecha } Categorias ( cat_id: d_id, nombre: d_nombre ) CP: { cat_id } VNN: { nombre } Generos ( genero_id: d_id, nombre: d_nombre ) CP: { genero_id } VNN: { nombre } Usuarios ( usuario_id: d_id, login: d_login, pass: d_pass, privilegios: d_privilegios, nombre: d_usunombre, d_ ) CP: { usuario_id } VNN: { login, pass, privilegios, nombre, } UNI: { , login } ComentariosR ( comenta_id: d_id, critica: d_id, texto: d_texto, fecha: d_fecha, autor: d_id ) CP: { comenta_id } VNN: { critica, autor, texto, fecha } CAj: { critica } -> CRITICAS CAj: { autor } -> USUARIOS

32 ComentariosN ( comenta_id: d_id, noticia: d_id, texto: d_texto, fecha: d_fecha, autor: d_id ) CP: { comenta_id } VNN: { noticia, autor, texto, fecha } CAj: { noticia } -> NOTICIAS CAj: { autor } -> USUARIOS Películas ( peli_id: d:_id, titulo: d_titulo, sipnosis: d_texto, actores: d_id, genero: d_id, f_estreno: d_fecha, director: d_id ) CP: { peli_id } VNN: { titulo, sipnosis, actores, genero, f_estreno, director } CAj: { actores } -> ACTORES CAj: { genero } -> GENERO CAj: { director } -> DIRECTORES Actores ( actor_id: d_id, f_nac: d_nac, nombre: d_nombre ) CP: { actor_id } VNN: { f_nac, nombre } Directores ( direct_id: d_id, nombre: d_nombre, f_nac: d_nac ) CP: { direct_id } VNN: { nombre, f_nac } Actuan ( actuan_id: d_id, actor: d_id, pelicula: d_id ) CP: { actuan_id } VNN: { PELICULA, ACTOR } DICCIONARIO DE DATOS d_id: entero autoincrementable. d_titulo: texto. d_texto: longtext. d_puntuacion: entero MAX(1). d_fecha: timestamp. d_nac: date. d_nombre: cadena MAX(30). d_login: cadena MAX(20). d_pass: cadena MAX(20). d_privilegios: cadena MAX(15). d_usunombre: cadena MAX(50). d_ cadena MAX(30).

33 4.- IMPLEMENTACIÓN En este apartado se describirá algunas de las funcionalidades internas de la aplicación web y su funcionamiento a grandes rasgos PATRONES DE TRADUCCIÓN Los patrones de traducción son una serie de reglas utilizadas para traducir todo aquello especificado en la fase de diseño, a la fase de implementación. En este caso, una vez llegado al punto de la implementación, los mapas navegacionales definidos en el diseño de la aplicación, se traducen aplicando los siguientes patrones de traducción (puesto que los mapas navegacionales corresponden al portal web de la aplicación, los patrones de traducción están aplicados a ellos, y por tanto, al portal web): Como ejemplo utilizaremos el diagrama navegacional de un miembro registrado en el portal web. Figura 19 - Diagrama navegacional de un miembro En la figura 20 podemos observar como un miembro del portal puede acceder directamente desde portada a los contextos de exploración, y desde ellos a sus correspondientes secuenciales.

34 Vemos un ejemplo en la siguiente figura, en el cual un usuario miembro puede acceder al contexto Noticias y desde este a Comentarios. O como un usuario no registrado accede mediante el contexto Buscar a la búsqueda de contenidos en la web. Figura 20 - Acceso desde portada a noticias y buscar contenido ESQUEMA DE CLASES En el esquema de clases podemos diferenciar las tres capas que componen la aplicación web, el nivel de presentación, el nivel lógico y el nivel de almacenamiento (o persistencia). El nivel de presentación, es la capa más alta de todas. La capa con la cual el usuario puede interactuar y ver. Para eso se ha utilizado php para crear el código html dinámicamente, su hoja de estilo css correspondiente para modelar el html a nuestro gusto e imágenes para mejorar el aspecto del portal.

35 En el nivel lógico nos encontraríamos también con diversos archivos php que son los que aplican la lógica para mostrar el portal dependiendo de unas condiciones dadas, como por ejemplo el tipo de usuario que seas. Tenemos también el código Javascript, encargado de que se introduzcan datos en los formularios antes de ser enviados y sobre todo el directorio "gestión" donde se encuentra el archivo funciones.php con todas las funciones utilizadas en el portal además de otros archivos php encargados de la gestión del portal. Por último, y en el nivel más bajo, tenemos la capa de almacenamiento donde se encontraría la base de datos para almacenar todos los datos que después va a poder mostrar nuestra aplicación. Y el archivo php necesario para la conexión, como es conectar_bbdd.php ubicado en el directorio gestión comentado anteriormente TECNOLOGÍAS UTILIZADAS Para la creación de esta aplicación se han utilizado diversas tecnologías, en nuestro caso libres. Html: Siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), predominante en páginas web. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). En Html, existen etiquetas que nos indican si la letras es negrita, centrada, etc. otras indican si el texto siguiente es un enlace de hipertexto a otra web. De todas estas etiquetas y su orden se hace servir los navegadores estándar para mostrar la aplicación web. Javascript: JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C. Al igual que Java, JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el paradigma de programación basada en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad. Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM. El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la que desarrolló los primeros navegadores web comerciales. Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.

36 Tradicionalmente, se venía utilizando en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación únicamente cliente, sin acceso a funciones del servidor. JavaScript se ejecuta en el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el código HTML. Css: Siglas de Cascading Style Sheet, hojas de estilo en cascada. son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. Php: Siglas de Php Hypertext Pre-processor. Es un lenguaje de programación interpretado, que nos permite crear páginas web dinámicas. Este puede ser incorporado dentro de código html. Se ejecuta normalmente en el servidor, interpretando el lenguaje php y mostrando como salida código en html, que es interpretado por el navegador. MySql: Es un sistema gestor de base de datos relacional, multihilo y multiusuario. Utiliza lenguaje Sql para el almacenamiento, actualización y acceso a la información DESCRIPCIÓN DE LA IMPLEMENTACIÓN Para la implementación partimos de un archivo index.php, en el cual lo primero que hacemos es incluir los archivos de conexión a la base de datos y el archivo donde se encuentran todas las funciones que utilizamos más a menudo. Así, mediante funciones iremos componiendo cada una de las páginas, con la ventaja de poder regenerar las partes que se repiten a menudo. <?php session_start(); include('gestion/conectar_bbdd.php'); include('gestion/funciones.php'); $title = "Cine"; getcabeceraindex($title);?> Podemos comprobar como lo primero que pedimos en cualquier página que generamos es la cabecera, enviando como atributo la variable con el nombre

37 de la página donde nos encontremos. Esta función está definida dentro del archivo funciones.php, que nos devuelve la cabecera con el código Html corrspondiente. Podemos comprobarlo en la Figura 21. function getcabeceraindex($title) {?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title><?php echo $title;?></title> <link rel="shortcut icon" href="/cine/favicon.ico" /> <link href="/cine/estilo.css" rel="stylesheet" type="text/css" />... </head> <body> <div id="envoltura"> <div id="cabecera"></div> <! fin de la cabecera > <div id="menu"> <ul> <li><a href="/cine/">inicio</a> </li><li> <a href="/cine/criticas.php">críticas</a> </li><li> <a href="/cine/noticias.php">noticias</a> </li><li> <a href="/cine/enviar_correo.php">enviar correo</a> </li><li> <a href="/cine/registro.php">registrarse</a> </li><li> <a href="/cine/buscar.php">buscar</a></li> </ul> </div> <! fin del menu > <?php } Css: #cabecera { background image: url(imagenes/cabecera.gif); background position: center; height: 80px; width: 840px; } #menu { font family: Geneva, Arial, Helvetica, sans serif; font size: 14px; font weight: bold;

38 color: #FFFFFF; background image: url(imagenes/menu.gif); background position: center top; height: 24px; width: 840px; text align: center; background repeat: no repeat; } Figura 21 - Cabecera En el mismo archivo index.php, después de la cabecera empezaremos a generar el esqueleto que tendrá la página, ayudándonos de la hoja de estilos Css y de las etiquetas correspondientes. <div id="contenido"> <div id="principal"> <h2 class="encuadrar">últimas noticias...</h2> <?php getultimasnoticias(2);?> <br /> <h2 class="encuadrar">últimas críticas...</h2> <?php getultimascriticas(2);?> </div> <! fin de principal > <?php getlateral();?> </div><! fin del contenido > <?php getpie();?> </div><! fin de la envoltura (empieza en la cabecera) > Podemos comprobar como nuevamente utilizamos funciones que utilizaremos varias veces para generar código, pasándole a la función como parámetro el número de noticias o críticas que queremos mostrar. Con las funciones getlateral() y getpie() obtendremos el lateral y el pie de página, que por supuesto irá en cualquier página generada. Esté lateral nos mostrará unos datos u otros dependiendo de quien sea el usuario conectado. function getlateral () {?> <div id="lateral"> <h3 class="categorias">categorías</h3> <ul>

39 <?php getcategorias();?> </ul> <h3 class="categorias">géneros</h3> <ul> <?php getgeneros();?> </ul> <?php if (!isset($_session['id']) ) {?> <form action="/cine/inicio_sesion.php" method="post" name="iniciar_sesion" id="iniciar_sesion"> Usuario<br /> <span id="sprytextfield1"> <input name="usuario" type="text" /> </span><br /> Contraseña<br /> <span id="sprytextfield2"> <input name="contrasenya" type="password" /> </span><br /> <input name="boton" type="submit" value="iniciar Sesión" /> </form> </div> <?php } else { $datos = getdatosusuario();?> Bienvenid@ <?php print $datos >nombre;?>. <form action="/cine/cerrar_sesion.php" method="post" name="cerrar_sesion"> <input name="boton" type="submit" value="cerrar Sesión" /></form> </div> <?php } } En la Figura 22 podemos comprobar en un resaltado en verde el contenido principal y en azul el resultado de la función que genera el código del lateral de la página.

40 Figura 22 - Bloque central y lateral de la página 5.- EVALUACIÓN Estándar XHTML Para comprobar que la aplicación web cumple con los estándares establecidos por el consorcio internacional de estándares para la World Wide Web, está World Wide Web Consortium (W3c), que nos proporciona una aplicación online para comprobar que nuestra aplicación web cumple todos los requisitos. Esta web se encuentra en Al comprobar si el portal cumplía con el estándar daba 14 errores en la página principal y varios más en diversas páginas.

41 Figura 23 - XHTML 1.0 no Transitional Después de corregirlos todos pasamos a tener un portal XHTML 1.0 Transitional. Figura 24 - XHTML 1.0 Transitional Estándar CSS Las hojas de estilo CSS nos permiten, mediante etiquetas, dotar a nuestro portal de una apariencia mucho más vistosa, además de una forma muy cómoda de trabajar. Al igual que hemos hecho con el estándar XHTML, hemos utilizado el mismo portal de la W3c ( para comprobar que nuestra hoja de estilo cumple con el estándar.

42 Figura 25 - Estándar CSS Prueba de navegadores En esta prueba comprobaremos que nuestro portal se ve perfectamente en los navegadores y plataformas más importantes. Para esto utilizaremos una aplicación web que se llama Las plataformas que comprobaremos serán Leopard, Linux y Windows XP. Y los navegadores comprobados son Firefox 3, Safari 3, Internet Explorer 7, Opera 9, Konqueror 4 y Chrome.

43 Figura 26 - Firefox 3 en Leopard Figura 27 - Internet Explorer 7 en Windows XP

44 Figura 28 - Chrome en Windows XP Figura 29 - Safari 3 en Leopard

45 Figura 30 - Opera 9 en Windows XP Figura 31 - Konqueror 4 en Linux

46 6.- CONCLUSIONES Después de estar demasiado tiempo arrastrando el proyecto por diversos problemas y por falta de tiempo, por fin llego a la conclusión del mismo. Personalmente, la implementación es con la parte que más he disfrutado, ya que me permitía aprender más sobre PHP y MySQL, mientras le daba forma con la hoja de estilo en CSS. Ya conocía estas tecnologías antes de empezar con el proyecto por eso me pareció que no resultaría demasiado complicado, cosa que conforme va avanzando el proyecto te das cuenta que no es así. La realización de este proyecto me ha permitido conocer la metodología para la creación de una aplicación Web empezando desde cero y estructurando la realización de todo el proyecto desde cero. Aunque también es cierto que desde la definición del proyecto que se iba a realizar hasta el proyecto final ha ido cambiando con el paso del tiempo. Una vez terminado te das cuenta de todo lo que has podido hacer tu solo y de las posibiliadades que te da todo esto. Por supuesto agradecer al tutor del proyecto, Félix Buendía, la paciencia que ha tenido desde el principio y el tiempo que ha tenido que mantener este proyecto para llegar hasta donde ha llegado. 7.- BIBLIOGRAFÍA Una guía para la realización y supervisión de proyectos web de Félix Buendía García. Ref: Editorial UPV. IEEE Std 830- IEEE Guide to Software Requeriments Specifications. IEEEStandards Board. Guía del IEEE para la Especificación de Requerimientos Software, de ejemplo. Pagina Web de Ingeniería del Software. Direcciones de páginas y portales consultados: Enviar correo electrónico con PHP (webtaller.com) Buscador con PHP y MySQL (desarrolloweb.com) Desconectarte de una sesion php (forosdelweb.com) Manual online php (php.net) Retorno de variables (desarrolloweb.com) Buscador web con php (tecnobot.com) Curso Adobe Dreamweaver CS3 (aulaclic.es) Variables predefinidas (php.net) Manual Dreamweaver, sitios dinámicos (mmug-ar.com.ar) Sesiones en php (webtaller.com)

47 Software utilizado para la realización del proyecto: Smultron. Adobe Dreamweaver CS3. Transmit. Firefox. Adobe Photoshop CS3. PhpMyAdmin. MAMP. 8.- ANEXO A.- Diseño físico de la base de datos. CREATE TABLE `ACTORES` ( `ACTOR_ID` INT(10) NOT NULL AUTO_INCREMENT, `NOMBRE` VARCHAR(50) NOT NULL, `F_NAC` DATE NOT NULL DEFAULT ' ', PRIMARY KEY (`ACTOR_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=3 ; CREATE TABLE `ACTUAN` ( `ACTUAN_ID` INT(10) NOT NULL AUTO_INCREMENT, `ACTOR` INT(10) NOT NULL, `PELICULA` INT(10) NOT NULL, PRIMARY KEY (`ACTUAN_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=3 ; CREATE TABLE `CATEGORIAS` ( `CAT_ID` INT(10) NOT NULL AUTO_INCREMENT, `NOMBRE` VARCHAR(30) NOT NULL, PRIMARY KEY (`CAT_ID`), UNIQUE KEY `NOMBRE` (`NOMBRE`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=6 ; CREATE TABLE `COMENTARIOS_N` ( `COMENT_ID` INT(10) NOT NULL AUTO_INCREMENT,

48 `NOTICIA` INT(10) NOT NULL DEFAULT '0', `TEXTO` TEXT NOT NULL, `FECHA` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, `AUTOR` INT(10) NOT NULL DEFAULT '0', PRIMARY KEY (`COMENT_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=20 ; CREATE TABLE `COMENTARIOS_R` ( `COMENT_ID` INT(10) NOT NULL AUTO_INCREMENT, `CRITICA` INT(10) NOT NULL DEFAULT '0', `TEXTO` TEXT NOT NULL, `FECHA` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, `AUTOR` INT(10) NOT NULL DEFAULT '0', PRIMARY KEY (`COMENT_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=35 ; CREATE TABLE `CRITICAS` ( `CRITICA_ID` INT(10) NOT NULL AUTO_INCREMENT, `TITULO` TEXT NOT NULL, `TEXTO` TEXT NOT NULL, `AUTOR` INT(10) NOT NULL DEFAULT '0', `GENERO` INT(10) NOT NULL DEFAULT '0', `FECHA` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, `PUNTUACION` DOUBLE NOT NULL DEFAULT '0', `NVOTOS` INT(11) NOT NULL DEFAULT '0', PRIMARY KEY (`CRITICA_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=26 ; CREATE TABLE `DIRECTORES` ( `DIRECT_ID` INT(10) NOT NULL, `NOMBRE` VARCHAR(50) NOT NULL, `F_NAC` DATE NOT NULL DEFAULT ' ', PRIMARY KEY (`DIRECT_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8; CREATE TABLE `GENERO` ( `GENERO_ID` INT(10) NOT NULL AUTO_INCREMENT, `NOMBRE` VARCHAR(30) NOT NULL, PRIMARY KEY (`GENERO_ID`), UNIQUE KEY `NOMBRE` (`NOMBRE`)

49 ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=6 ; CREATE TABLE `NOTICIAS` ( `NOTICIA_ID` INT(10) NOT NULL AUTO_INCREMENT, `TITULO` TEXT NOT NULL, `TEXTO` LONGTEXT NOT NULL, `AUTOR` INT(10) NOT NULL DEFAULT '0', `CATEGORIA` INT(10) NOT NULL DEFAULT '0', `FECHA` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`NOTICIA_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=43 ; CREATE TABLE `PELICULAS` ( `PELI_ID` INT(10) NOT NULL AUTO_INCREMENT, `TITULO` TEXT NOT NULL, `DURACION` DECIMAL(10,0) NOT NULL, `SIPNOSIS` LONGTEXT NOT NULL, `DIRECTOR` INT(10) NOT NULL, `GENERO` INT(10) NOT NULL, `ANYO` YEAR(4) NOT NULL DEFAULT '0000', PRIMARY KEY (`PELI_ID`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=2 ; CREATE TABLE `USUARIOS` ( `USUARIO_ID` INT(10) NOT NULL AUTO_INCREMENT, `USUARIO` VARCHAR(20) NOT NULL, `CONTRASENYA` VARCHAR(32) NOT NULL, `PRIVILEGIOS` ENUM('MIEMBRO','EDITOR','ADMINISTRADOR') NOT NULL DEFAULT 'MIEMBRO', `NOMBRE` VARCHAR(50) NOT NULL, `CORREO` VARCHAR(30) NOT NULL, PRIMARY KEY (`USUARIO_ID`), UNIQUE KEY `USUARIO` (`USUARIO`) ) ENGINE=MYISAM DEFAULT CHARSET=UTF8 AUTO_INCREMENT=29 ;