Source: https://www.scribd.com/doc/149357321/Memoria-Proyecto
Timestamp: 2017-01-21 15:56:41+00:00

Document:
BrowseInterestsBiography & MemoirBusiness & LeadershipFiction & LiteraturePolitics & EconomyHealth & WellnessSociety & CultureHappiness & Self-HelpMystery, Thriller & CrimeHistoryYoung AdultBrowse byBooksAudiobooksArticlesSheet MusicBrowse allUploadSign inJoin Universidad Politécnica de Valencia Escuela Técnica Superior de Ingeniería Informática Memoria del proyecto final de carrera: DISEÑO E IMPLEMENTACIÓN DE UNA TIENDA VIRTUAL Alumno: Antonio Macian Ruiz Director: Sergio Saez Barona PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 2 de 64 INDICE 1. Introducción.......................................................................................................................5 2. Especificación de requisitos ........................................................................................7 2.1. Introducción................................................................................................................7 2.1.1. Propósito ...............................................................................................................7 2.1.2. Ámbito ....................................................................................................................7 2.1.3. Definiciones, acrónimos y abreviaturas...................................................8 2.1.4. Referencias ...........................................................................................................9 2.2. Descripción general .................................................................................................9 2.2.1. Perspectiva el producto...................................................................................9 2.2.2 Funciones del producto ...................................................................................10 2.2.3. Características del usuario...........................................................................12 2.2.4. Restricciones generales..................................................................................12 2.3. Requerimientos específicos .................................................................................13 2.3.1. Requerimientos funcionales.........................................................................13 2.3.1.1. Cliente anónimo..........................................................................................13 2.3.1.2. Cliente registrado ......................................................................................15 2.3.1.3. Empleado de la Tienda Virtual ............................................................15 2.3.2. Requerimientos de interfaces externos ...................................................17 2.3.2.1. Interfaz de usuario....................................................................................17 2.3.2.2. Interfaz Hardware ....................................................................................17 2.3.2.3. Interfaz Software.......................................................................................18 2.3.2.4. Interfaces de comunicaciones ..............................................................18 2.3.3 Requerimientos de eficiencia........................................................................18 2.3.4. Obligaciones de diseño ...................................................................................19 2.3.4.1. Estándares cumplidos..............................................................................19 2.3.4.2. Limitaciones Hardware ..........................................................................20 2.3.5. Atributos...............................................................................................................20 2.3.5.1. Seguridad ......................................................................................................20 2.3.5.2. Facilidades de mantenimiento.............................................................21 2.3.6. Otros requerimientos ......................................................................................21 PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 3 de 64 2.3.6.1. Base de datos ...............................................................................................21 3. Análisis ................................................................................................................................22 3.1. Diagrama UML .........................................................................................................22 3.2. Casos de uso................................................................................................................24 3.3. Diagramas de secuencia .......................................................................................24 4. Diseño ..................................................................................................................................27 4.1. Nivel de interfaz .......................................................................................................28 4.1.1. Diagramas de navegabilidad.......................................................................30 4.1.1.1. Usuario anónimo/navegabilidad........................................................30 4.1.1.2. Empleado de la Tienda Virtual ............................................................39 4.2. Nivel lógico .................................................................................................................31 4.3. Nivel de persistencia...............................................................................................32 4.3.1. Diseño Entidad­Relación ...............................................................................32 4.3.2. Diseño lógico.......................................................................................................33 5. Implementación e integración..................................................................................35 5.1. Tecnologías.................................................................................................................35 5.2. Herramientas.............................................................................................................37 5.3. Detalles de la implementación...........................................................................39 5.3.1. Perfiles de usuario ............................................................................................39 5.3.2. Autenticación de los usuarios......................................................................39 6. Evaluación y pruebas....................................................................................................41 6.1. Evaluación .................................................................................................................... 41 6.2. Pruebas.........................................................................................................................41 6.2.1. Validación XHTML y CSS................................................................................42 6.2.2. Comprobación de enlaces rotos..................................................................43 6.2.3. Comprobación de resolución .......................................................................44 7. Conclusiones......................................................................................................................46 Biografía..................................................................................................................................47 Anexo A. Casos de uso ........................................................................................................48 Anexo B. Descripción de Tecnologías..........................................................................56 B.1. XHTML..........................................................................................................................56 ............60 B............................................................................................................. Apache............................................................................................................PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 4 de 64 B...................4......6.....................................62 B......7.....................3...................................................................63 B.......................... MySQL................. Mac OS X....... CSS (Hojas de estilo)...........................57 B..........2...5.. HTTP y la arquitectura Cliente­Servidor ....................64 .........................................................................64 B................................................ PHP ...................................
se facilita a los clientes la opción de realizar sus compras sin salir de casa o simplemente. la inserción de nuevos ítems en la base de datos o la corrección de los datos erróneos que puedan aparecer en el registro de algún cliente. ha generado a lo largo de todo el proyecto un interés y una motivación a cada paso que iba descubriendo nuevas posibilidades y formas de trabajo. es la primera vez que me enfrento a una aplicación real en este lenguaje. Por otra parte el personal autorizado (empleados de la tienda) podrá realizar acciones como el modificado de los pedidos realizados mediante esta vía. De esta manera. INTRODUCCION El Diseño y la Implementación de una Tienda Virtual tiene como resultado una aplicación Web desde la cual. .PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 5 de 64 1. una empresa pueda ampliar sus ventas mediante el comercio electrónico de manera fácil. rápida y sencilla. además de haber tenido la oportunidad de trabajar con plantillas CSS que hasta el momento era algo totalmente desconocido para mi. Por ultimo. visualizar los artículos disponibles o consultar el estado de algún pedido realizado anteriormente. Motivaciones El motivo principal por el cual he decidido implementar este Proyecto Final de Carrera ha sido adentrarme en la medida de lo posible en un sector que esta cada vez mas en auge como es el del comercio electrónico. además de adquirir los conocimientos necesarios para programar en un lenguaje orientado a paginas Web. En cuanto a la programación se refiere. que me permita ser mas competente a la hora de enfrentarme al mercado laboral una vez finalizada la carrera. el haber creado la base de datos en MySQL me ha permitido mas conocer mas a fondo el funcionamiento de este sistema de gestión de bases de datos La mezcla de las nociones que previamente tenia en estas tecnologías comentadas anteriormente y el motivación por ir aprendiendo cada vez mas acerca de las mismas. pese a haber hecho algún trabajo anterior en PHP podría decirse que.
no menos importante. tampoco se ha dejado de lado habiendo creado en la parte superior central un espacio dedicado por si en un futuro alguna empresa decidiera darse a conocer a través de nuestra Tienda Virtual mediante un Banner.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 6 de 64 El planteamiento técnico Tras decidir que la Tienda Virtual iba a ser una Web de artículos de ropa para chico y echar un vistazo a las paginas Web de ropa que podríamos considerar mas importantes (grupo Inditex . Gracias a que la información en el frame principal es información flotante que varía dependiendo del tamaño de la ventana del usuario y de que los menús no tienen un tamaño fijo sino que también dependen del tamaño de la ventana. Pull & Bear. hacen de esta pagina una pagina compatible con todos los navegadores. otras mas pequeñas que se van repitiendo a lo largo de la pagina dependiendo de la información que se esté mostrando en cada momento. he intentado llevar al cabo dichos conocimientos creando un interfaz agradable al aspecto visual y evitando la información “extra” que desvíe la atención del cliente y el motivo por el cual ha entrado en la Tienda Virtual. …) y de una tienda que personalmente me gusta a mi (Abercrombie & Fitch. También he tenido en cuenta el tamaño de las imágenes creando en lugar de imágenes de tamaño grande y fijo. de la cual he tomado las imágenes que formaran la Tienda Virtual). . Zara. El tema de la publicidad en las paginas Web. he tomado la decisión que los colores que formarán la Tienda van a ser tonalidades frías como son el gris y el azul. Habiendo realizado un curso en Edinburgh Napier University sobre como interactúan las nuevas tecnologías y su diseño sobre el usuario y conociendo que un portal Web eficaz es un portal que centraliza la información y simplifica al máximo las tareas a realizar por el usuario.
Otra de las funciones que ofrece este interfaz es la de permitir al personal de la TV la gestión de la base de datos de la forma mas sencilla posible. Esta especificación será útil para establecer unos prerrequisitos y una base sobre la que empezar un trabajo de realización. a gestionar la base de datos tanto para la modificación de los artículos a mostrar en la TV como para la gestión de los datos de los clientes que pueden acceder a la misma. . así como una fuente de información para cualquiera que desee conocer mas acerca de este proyecto. el empleado puede encontrar rápidamente al cliente sobre el cual desee hacer modificaciones. a los clientes de esta empresa a consultar el catalogo de ropa cada temporada así como sus ofertas y novedades y.1. 2. al personal de la tienda mediante una intranet.1. cualquier usuario podrá mantenerse informado de todos los artículos disponibles que ofrece la tienda cada temporada. Introducción 2. De esta manera.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 7 de 64 2. Estos estados serán modificados por el personal de la TV desde una de las opciones de su intranet. para aquellos usuarios que así lo deseen. Además. estos podrán visualizar en todo momento el estado en el cual se encuentran sus pedidos. ESPECIFICACION DE REQUISITOS 2. Por ultimo. mediante un registro muy sencillo podrán realizar sus compras desde cual quier terminal conectado Internet sin la necesidad de desplazarse físicamente hasta la TV.2. Ámbito La Tienda Virtual (en adelante simplemente “TV”) va a consistir en un interfaz Web dinámica que permita por una parte.1. Además existe la posibilidad de insertar artículos nuevos en la base de datos. mencionar también que una vez realizadas las compras por los usuarios. Propósito El propósito del siguiente apartado va a consistir en la especificación de requerimientos para el portal Web de la Tienda Virtual.1. Gracias a un buscador. por otra parte.
PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 8 de 64 2.1.3. Definiciones, acrónimos y abreviaturas TV: Abreviatura de Tienda Virtual Web: La World Wide Web (del ingles, Telaraña Mundial), la Web o WWW, es un sistema hipertexto que funciona sobre Internet. Para ver la información se utiliza una aplicación llamada navegador Web para extraer elementos de información (llamados “documentos” o “paginas Web”) de los servidores Web (o “sitios”) y mostrarlos en la pantalla del usuario. Web dinámica: Existen dos tipos de páginas Web, de contenido estático (HTML) y de contenido dinámico que se generan a partir de lo que el usuario introduce en un Web o formulario y que utiliza el servidor para construir una Web personalizada que envía al cliente. MySQL: MySQL es el servidor de datos relacionales mas popular, desarrollado y proporcionado por MySQL AB. MySQL AB es una empresa cuyo negocio consiste en proporcionar servicios en torno al servidor de bases de datos MySQL. Una de las razones para el rápido crecimiento de popularidad de MySQL, es que se trata de un producto Open Source, y por tanto, va de la mano con este movimiento. HTML: Acrónimo ingles de Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje informático diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web. CSS: Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal de ordenador usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión XHTML). La W3C (World Wide Web Consortium) es la encargada de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores. XHTML: Es el lenguaje de marcación pensado para sustituir a HTML como estándar para las paginas Web. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, mas estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una Web semántica, donde la información, y la forma de presentarla estén claramente separadas. PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 9 de 64 W3C: El World Wide Web Consortium (Consorcio de la Web o Telaraña Mundial), abreviadamente W3C, es una organización que produce estándares para la Telaraña Mundial o World Wide Web. PHP: Acrónimo de “PHP: Hypertext Processor”. Es un lenguaje de programación de scripts, concebido en el tercer trimestre de 1994 por Rasmus Lerdorf. Se utiliza principalmente para la programación de GGIs para paginas Web, destaca por su capacidad de ser embebido en el código HTML. HTTP: Es el protocolo de la Web (WWW), usado en cada transacción. Las letras significan Hyper Text Transfer Protocol, es decir, protocolo de transferencia hipertexto. Usuario/Cliente: Se llamará usuario o cliente a cualquier persona que acceda al portal, ya sea un navegante anónimo o un cliente registrado en la base de datos de la TV. Empleado: Se llamará empleado a todo aquel que pertenezca o forme parte de la empresa (TV) y por tanto tenga acceso autorizado a la intranet. 2.1.4. Referencias Las referencias utilizadas para la realizar este proyecto son las siguientes ‐ IEEE Recommended Practice for Software Requirements Specifications, IEEE Std 830‐1998. ‐ Foros del Web: http://www.forosdelweb.com ‐ Wikipedia la enciclopedia libre: http://es.wikipedia.org ‐ Manual de PHP: http://php.net/index.php ‐ Especificaciones de XHTML 1.0 http://www.w3c.org/TR/xhtml1 ‐ Especificaciones de CSS 2.1: http://www.w3c.org/TR/CSS21 ‐ Mamp: Mac, Apache, MySQL, PHP: http://www.mamp.info 2.2. Descripción general 2.2.1. Perspectiva del producto PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 10 de 64 El lenguaje utilizado para implementar la tienda virtual es PHP que como bien hemos mencionado antes, nos permitirá la creación de una pagina Web dinámica. Por otra parte, el sistema de gestión de bases de datos que contendrá toda la información necesaria para ser mostrada en la pagina Web es MySQL. Una vez decidido esto, necesitamos un servidor Web que nos permita ejecutar el código en PHP a la vez que nos permita acceder a la base de datos MySQL. El servidor Web utilizado es Apache. Con todo esto y añadiendo que el sistema operativo utilizado para la programación de la TV y la ejecución de su código es Mac OS X, usaremos MAMP para la ejecución de la misma. MAMP es el acrónimo de Mac OS X, Apache, MySQL y PHP. Esta plataforma Web de código abierto construida para Mac, es la solución perfecta para esta tarea ya que es un “todo en uno”. Lo único que nos falta ahora para poder ejecutar la TV e ir efectuando pruebas para corregir el código en caso que fuera necesario, es un navegador Web o explorador. Esta pagina ha sido diseñada para que no presente cambio alguno respecto de un navegador a otro (Mozilla Firefox, Internet Explorer, Safari, …). La información que contiene la pagina, también está diseñada de manera que, con una resolución normal o alta (a partir de 800 x 600) sea mostrada toda la pagina sin la necesidad de que el usuario tenga que desplazarse de arriba hacia abajo y/o de izquierda a derecha salvo cuando la respuesta a una consulta a la base de datos sea tan extensa que necesite mas espacio para ser listada. El protocolo utilizado para la transmisión de datos entre redes de computadoras es el protocolo TCP/IP. Además, el protocolo http será el que nos permita el acceso a la pagina Web. 2.2.2. Funciones del producto Las funciones que va a realizar la TV son las siguientes: ‐ Consultas sobre la colección · Consulta según categoría. · Consulta de los detalles de un articulo. · Consulta de novedades. · Insertar cliente en la base de datos. · Eliminar articulo del carrito. ‐ Modificación de la colección. . ‐ Modificación del carrito. · Inicio de sesión como usuario / empleado autentificado. · Mostrar información de los empleados. · Mostrar información para empleados. · Modificar cantidad en el carrito. · Búsqueda de pedidos por cliente. · Insertar articulo en la base de datos. ‐ Operaciones sobre los pedidos. ‐ Tratamiento sobre usuarios · Mostrar información de los usuarios.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 11 de 64 ‐ Consulta del carrito. · Modificación del estado de un pedido. · Insertar pedido en la base de datos. ‐ Tratamiento de usuarios. · Modificar datos del cliente en la base de datos. · Añadir articulo al carrito.
Una vez decida registrarse como cliente registrado.4. Estos problemas podrían solucionarse simplemente aumentando la potencia del servidor con nuevo . Como restricción general. se necesitará también una pequeña modificación en el software de la TV. también. a este usuario se le permitirá añadir artículos al carrito para que se vaya familiarizando con la pagina y se le facilite al máximo la tarea de realizar su compra. El cliente anónimo será un usuario que simplemente desee realizar consultas sobre el catalogo o los precios y no se haya registrado todavía como cliente. Este problema podría causar una saturación del servidor así como lentitud en el funcionamiento de la pagina. Como única modificación. Este cliente verá su nombre en el cuadro de la izquierda con la información actualizada de su carrito. Además tendrá la opción de visualizar sus pedidos anteriores y el estado de estos. mencionar que la posibilidad de modificar la base de datos por parte del personal de la TV es una modificación de nivel básico.3.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 12 de 64 2. el empleado podrá modificar el contenido de la base de datos pero nunca su estructura. Pese a no haberse registrado. todos los artículos añadidos al carrito previamente permanecerán ahí para poder finalizar la compra directamente. El empleado registrado tendrá acceso a la intranet de la TV para realizar las operaciones y gestiones que esta facilita. será llevada a cabo por parte del administrador de la base de datos ya que. Restricciones generales. El cliente registrado es un usuario que anteriormente ha introducido sus datos como cliente de la TV y ya cuenta con un código y una contraseña para registrarse. cliente registrado y empleado de la TV.2. en caso de ser necesario. 2. Características del usuario. Esta modificación. podrá finalizar su compra pasando por caja y realizar así el pedido de los artículos seleccionados. Vamos a separar los usuarios de la TV en tres grupos: cliente anónimo.2. Otra cosa a tener en cuenta es la posibilidad de que haya una gran afluencia de usuarios en la TV al mismo tiempo. en caso de modificarse la estructura. si así lo desea.
el cliente o usuario anónimo podrá ver una información mas detallada acerca del articulo que desee. además de realizar copias de seguridad periódicamente. Requerimientos funcionales 2. Consulta de novedades.1. cuentas de usuario.1. Con esta consulta. Este tipo de consulta consiste en una consulta SQL que retorna todas las diferentes categorías de la base de datos. Cliente anónimo Consulta según categoría.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 13 de 64 hardware. Requerimientos específicos 2. aplicando técnicas de trabajo distribuido. 2. La primera es desde la pagina principal. está acción devolverá un numero de referencia mediante el cual.3. Estas categorías aparecerán en el submenú de la TV desde el cual.. A esta consulta se puede acceder mediante dos vías. antivirus.3. etc. también tendremos en cuenta la seguridad dentro del servidor instalando cortafuegos. o construyendo un cluster de servidores. permisos. una vez se abre la pagina de inicio de la TV aparecen todos los artículos referenciados en la base de datos como novedad (Novedad = 0). Consulta de los detalles de un articulo. esta elección no debe obviarse como sencilla y realizarse correctamente. La segunda forma de ver las novedades es .3. La velocidad del ancho de banda del que dispone el servidor también puede ser un problema a tener en cuenta ya que. también debe existir una política de seguridad adecuada en toda la TV. Los accesos incorrectos a paginas de la TV sin haberse registrado es un problema que hay que evitar. Por tanto. una consulta SQL seleccionará todos los detalles del articulo con esa referencia y serán mostrados. el cliente podrá seleccionar la que desee y así serán mostrados todos y cada uno de los artículos pertenecientes a esa categoría. puede convertirse en el principal cuello de botella.1. Pinchando en la fotografía del articulo que se desee.
Consulta del carrito. existe otra variable con las cantidades que. Una vez cumplimentado este . Seleccionando el que se desee eliminar y haciendo click sobre el botón Actualizar. La tabla que muestra los artículos que hay en el carrito.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 14 de 64 pinchando en la pestaña Novedades del menú que realiza la misma opción. Desde la pagina de detalles del carrito. Cualquier usuario que entre a la pagina podrá añadir artículos en el carrito. El cliente podrá consultar en todo momento y se encuentre donde se encuentre los artículos que ha seleccionado para ser comprados. dispone de la columna “borrar” con un checkbox para cada artículo. el cliente no registrado rellenará todos los campos necesarios con sus datos personales. Añadir articulo al carrito. Eliminar articulo del carrito. Cuando se abre la pagina se crea automáticamente una variable sesión que será la que contendrá los artículos que el cliente desee adquirir. De igual manera que existe la columna borrar en la tabla q muestra los artículos del carrito. Insertar cliente en la base de datos. en caso de querer modificarse. el cliente puede eliminar todos los artículos que desee. Desde el marco situado en la izquierda de la pagina en el que aparece el resumen del carrito. está la columna “cantidad” que contiene un textbox para cada articulo indicando el numero de unidades que se desea comprar. se accederá a la pantalla que muestra la tabla con todos los artículos añadidos al carrito. pinchando en el botón “Ver – Editar”. el cliente tendrá que modificar el numero de cantidad que desea y pinchar sobre el botón Actualizar para modificarlas definitivamente. Mediante un formulario sencillo. Estos artículos se añaden simplemente desde la pantalla de los detalles del producto pinchando en el botón “Añadir a carrito”. Modificar cantidad en el carrito. se eliminarán todos los artículos marcados borrándolos de la variable sesión. Esta función la tendrá que realizar todo usuario que desee realizar una compra en la TV y no la haya realizado previamente. Independientemente de la variable sesión que contiene los artículos.
Esta opción genera un instert en la base de datos que introduce los datos en dos tablas de la base de datos. . 2.3.3. el estado y la fecha. Una vez registrado el usuario. Además. permite la opción de desconectarse en todo momento. Por una parte se introduce en la tabla pedidos el pedido con el código del cliente. este tendrá la opción de visualizar todos los pedidos realizados anteriormente así como el estado en el que estos se encuentran.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 15 de 64 paso. En caso de dejarse algún campo por rellenar. Mostrar información de los usuarios. Como hemos mencionado en el punto anterior. el sistema generará un error visual para el cliente que tendrá que rellenarlo de nuevo. Empleado de la TV Modificar datos del cliente en la base de datos. Insertar pedido en la base de datos. La columna pedido de esta tabla apunta a la columna pedido de la tabla pedidos. 2. Por otra parte otro insert en SQL introduce el pedido detallado con cada articulo y cantidad en la tabla detallepedidos. Una vez finalizada la compra por parte del cliente. también podrá desconectarse mediante la opción desconectar. Esta opción elimina la variable sesión dni. Todo usuario que se encuentre registrado en la TV verá su nombre en el marco izquierdo con toda la información actualizada del carrito.1. también podrán ser realizadas por clientes registrados. podrá identificarse introduciendo su dni y su contraseña. Esta función crea una variable sesión (dni) que será la que indique que ese usuario está autentificado. Mostrar información de los usuarios. siempre y cuando se haya registrado. Cliente registrado Cualquiera de las funciones mencionadas anteriormente para clientes anónimos.2. podrá finalizar su pedido pasando por caja.1.3. Todo usuario que previamente se haya registrado en la TV. Inicio de sesión como usuario autentificado. pinchará el botón Enviar datos que generará una consulta insert en SQL que insertará los datos del cliente en la tabla clientes de la base de datos. El empleado de la TV será el encargado de actualizar este estado.
El sistema comprobará que esos datos se encuentran en la tabla empleados de la base de datos. Entregado/Finalizado). deberá pulsar el botón enviar datos que ejecutará esta consulta y modificará los datos. Una consulta select en SQL buscará el pedido en cuestión lo mostrará en el listado inferior. permitirá la entrada del empleado a dicho espacio. Modificación del estado de un pedido. Todos los pedidos realizados por clientes en la TV disponen de un código de estado (Realizándose. existe un buscador para facilitar esta opción al empleado. el empleado seleccionará el pedido que desee o los pedidos que desee en el caso de que se vaya a realizar un envío con varios pedidos. el empleado podrá modificarlos como así se haya indicado. Para finalizar esta función. Cuando el empleado desee acceder a esta intranet. Búsqueda de pedidos por cliente. . se modificarán en la base de datos los estados de los pedidos que el empleado haya modificado. El empleado podrá buscarlo directamente en el listado o filtrarlo mediante este buscador. Enviado. Uno de los privilegios de los que disponen los empleados es el de tener acceso a la intranet de la TV. Haciendo uso del buscador mencionado en el punto anterior. Tras modificar los textboxes que aparecen en la columna estado de cada pedido y pulsar el botón actualizar. Un sencillo formulario permite a los empleados registrados en la TV dentro de su intranet agregar nuevos artículos en la base de datos. Insertar articulo en la base de datos. deberá introducir su dni y su contraseña.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 16 de 64 Un sencillo update en SQL permite a los empleados de la TV modificar los datos de cualquier cliente. Un insert guardará toda esta información en una tupla de la tabla stock en la base de datos. Dentro de la opción que permite cambiar el estado de los pedido. Mostrar información para empleados. En caso afirmativo. Además el empleado podrá subir la imagen de dicho articulo que será guardada en la carpeta correspondiente. Mostrar información de los empleados. Tras ser mostrados en textboxes los datos actuales que existen en la base de datos.
mediante una interfaz de red (Ethernet. Interfaz del usuario Puesto que la TV es una tienda online. tarjeta de video y monitor. Interfaz Hardware Para acceder a la TV los usuarios únicamente necesitarán un ordenador desde el cual. Para poder ser mostrado este interfaz Web del portal es necesario un navegador Web que permita al usuario conectarse con el servidor.3. modem ADLS. con una resolución minima de 800X600.2.) tengan acceso a la red de Internet. 2. el empleado registrado en la TV podrá ver su nombre en el marco que existe a la izquierda de la TV en todo momento. 2.3. Esta función creará una variable sesión (empleado) que será la que controle en todo momento que el empleado está registrado y se le permite el acceso a la intranet.1.2.2.3. Dentro de un diseño que se mantendrá para todas las funciones que la TV permite. La única parte de la Web que se irá modificando será el cuadro general en el que dependiendo de la información a mostrar tendrá un aspecto u otro. Todo empleado que desee acceder a la intranet deberá introducir su dni y su contraseña. ya sea cliente o empleado.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 17 de 64 Igual que ocurría con los clientes. . Además será necesario que disponga de un interfaz grafico.2. el acceso a la misma se realiza através de Internet. El resto se no sufrirá modificación alguna. Inicio de sesión como empleado autentificado. Requerimientos de interfaces externos 2. El diseño de esta Web será para todos los usuarios el mismo y debería ser también el mismo para todos los navegadores ya que el código fuente de la misma se ciñe a los estándares establecidos por el W3C. Este computador puede estar basado en cualquier arquitectura pero deberá disponer al menos de un procesador con capacidad suficiente para ejecutar un navegador Web moderno. se realizarán todas las consultas por parte del usuario. etc.
en cambio. El rendimiento de la TV podría verse afectado directamente por el numero de clientes que se encuentren conectados al mismo tiempo. Requerimientos de eficiencia Puesto que el fin de esta TV es la venta de artículos. etc. disponibles para diversos operativos: Linux. Macintosh. Los usuarios o clientes se conectarán a la TV mediante Internet. desde fuera de la red local. Por este motivo se desea asegurar un acceso optimo en condiciones de carga del servidor normales. Esta conexión la realizaran desde su casa o desde cualquier otro lugar con acceso a Internet pero en cualquier caso.4. Los clientes y el portal tendrán conexiones TCP/IP y el protocolo para comunicar a los navegadores con el servidor Web será el HTTP. En este caso se utilizará Mac OS X.2.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 18 de 64 2.3. el servidor que hospede la aplicación estará basado en Apache con PHP y MySQL. únicamente bastará con un navegador moderno para poder visualizarla. Interfaces de comunicaciones Existen dos tipos de conexión entre los clientes y el servidor de la TV.2.3. Los empleados. se pretende esta tenga un acceso simultaneo de varios clientes al mismo tiempo. Desde el propio Apache se podrá configurar este comportamiento así como el numero máximo de conexiones simultaneas que deseamos. además de tener acceso al igual que los clientes desde su hogar a través de Internet. . Interfaz Software Cualquier usuario que desee conectarse a la TV no necesitará ningún sistema operativo en concreto para poder acceder a ella. Por otra parte. Por lo que se podrá utilizar cualquiera de estos. 2. también podrán conectarse a través de la red interna de la TV.3. Cabe mencionar que en cualquiera de los dos casos mencionados anteriormente el mecanismo de comunicación será el mismo. Windows. El servidor Apache en el que se alojará la TV tiene que ser capaz de proporcionar un acceso concurrente a un numero considerable de clientes. 2.3.3.
PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 19 de 64 2. Esta información la separaremos del código XHTML en un archivo (estilo.1. Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario.3. Estándares cumplidos La TV ha sido diseñada siguiendo el estándar establecido por el World Wide Web Consortium (W3C). pudiendo incluso escogerse entre varios diseños para un mismo medio. Las ventajas de utilizar CSS son: •
Control centralizado de la presentación de un sitio Web completo con lo que se agiliza de forma considerable la actualización del mismo.4. Por •
. Facilidad de edición directa del código y de mantenimiento. Obligaciones de diseño 2.0 pueden potencialmente presentar mejor rendimiento en las actuales herramientas Web que aquellos escritos conforme a HTML.3. aunque sin formato. personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces. •
Por otra parte. Un mismo documento puede adoptar diseños radicalmente distintos en diferentes aparatos. Los documentos escritos conforme a XHTML 1. compatible con los nuevos estándares que actualmente está desarrollando el W3C como recomendación para futuros agentes de usuario o navegadores.css) aparte. en este caso XHTML y CSS. Por ejemplo. Los navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio Web. El W3C produce recomendaciones para el diseño y desarrollo de paginas Web. Formato abierto.4. Las principales ventajas del XHTML sobre otros formatos son: •
Compatibilidad parcial con navegadores antiguos: la información se visualiza. las hojas de estilo en cascada (CSS) nos permiten separar la estructura de la TV de su presentación. con lo que aumenta considerablemente la accesibilidad.
4. . El paso en los que el usuario introduce la contraseña en la TV también se encuentra cifrado. Cuando un usuario entra por primera vez en la TV se crean las variables necesarias para poder avanzar dentro de la pagina por lo que un acceso directo a otra no será permitido. Limitaciones Hardware Para poder ejecutar la TV bastaría con un sistema que al menos contara con un procesador Intel Pentium IV y 256 MB de memoria RAM. una conexión adecuada. 2.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 20 de 64 ejemplo. 2. ningún usuario podrá acceder a ninguna pagina de la TV sin haber pasado por el index o sin haberse registrado en las paginas en las que así se necesite.3.1. Seguridad En primer lugar.5. La información de los clientes se guardará en la base de datos y las contraseñas de estos tendrán un formato cifrado.2. Además del motor de este servidor. Desde este tipo de sistema hacia delante podría servirnos como servidor pero. Si un usuario quisiera entrar dentro de la intranet poniendo la dirección en la barra de direcciones se le denegará el acceso. como hemos comentado anteriormente. En segundo lugar. El resto del hardware no precisará de una configuración especial por lo que se pondrá el que mas se ajuste al presupuesto.3. el único requisito mas imprescindible para este sistema será una controladora de red que nos permita la conexión con Internet y por supuesto. como en cualquier empresa. o ser "leída" por un sintetizador de voz. Atributos 2.5. De esta forma se ha intentado reducir los riesgos al mínimo. para ser impresa. la información es privilegiada y por lo tanto debe almacenarse de una forma segura. •
El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño. mostrada en un dispositivo móvil. queremos que este servidor permita el acceso simultaneo a múltiples clientes sin problema alguno. Para su implantación final se utilizará un servidor con un procesador Intel Core 2 Duo con al menos 1 GB de Memoria RAM.3.
. Las consultas a la base de datos se realizarán por parte del servidor Web mediante PHP y su API de acceso a bases de datos MySQL. 2. Facilidades de mantenimiento La sencillez en el manejo de la TV permitirá a los propios empleados de la tienda a llevar un mantenimiento básico de la Web. la cual almacenará toda la información referente al catalogo.1. modificación del stock.2. 2. gestión de usuarios. a los usuarios.3. etc … Sin embargo.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 21 de 64 2.6.3. Otros requerimientos. Base de datos La TV utilizará una base de datos en MySQL. y toda la información de los pedidos efectuados por los clientes.3. la modificación en el diseño de la Web o cualquier modificación en la estructura de la base de datos tendrá que ser llevada a cabo por el administrador del portal.6.5.
Todas las consultas realizadas por el Usuario se harán a esta clase. Carrito representa uno de los motores principales de la aplicación. Contiene un numero indefinido de productos que son los que forman la clase Stock. Diagrama UML Para entender mejor todas las funciones que se pueden realizar con esta tienda virtual y los elementos y objetos de los cuales está compuesta se han realizado los diagramas UML. El Empleado dispondrá de otro tipo de privilegios y autoridades sobre los Usuarios. El Empleado y el Usuario serán las clases que interactúen con este a través del Stock. En base a este tipo se permitirán ciertos privilegios dentro de la aplicación como por ejemplo la realización de Pedidos.1. A continuación se detallan brevemente las características de la aplicación en base a este diagrama. Existen dos tipos de Usuario. La acción de realizar Pedido solo será permitida para el Usuario registrado. Stock es una clase que contiene todos los elementos de los que se compone la Tienda Virtual. Esta información será el nombre y la dirección donde se encuentra. El Usuario será el que lleve a cabo todas las funciones de búsqueda sobre el Stock.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 22 de 64 3. modificar el estado de un Pedido o varios y actualizar los datos del Usuario en caso de ser necesario. A su vez. Este dispone de toda la información de la sesión del Usuario y de los productos del Stock que finalmente se vayan a incluir dentro de los Detallepedido. anónimo y registrado. La Tienda Virtual como bien indica su nombre es la aplicación en si. Por ultimo mencionar que Tienda será un elemento que almacenará los datos de las tiendas físicas que la Tienda Virtual tiene. ANALISIS 3. se creará un Detallepedido que contendrá toda la información acerca del Pedido realizado por el Usuario. De esta manera será capaz de insertar un nuevo elemento dentro del Stock. entorno a la cual se realizan la mayoría de funciones. . Pedidos y Stock.
PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 23 de 64 Diagrama de clases UML .
Casos de uso Para un entendimiento mas intuitivo de las acciones que se pueden realizar.2. al menos las mas importantes. se adjunta una figura resumiendo dichas funciones.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 24 de 64 3.3. 3. En el Anexo A se han adjuntado varios casos de uso con una explicación mas detallada y casos reales. Se muestra un ejemplo para el empleado y otro para el usuario . Diagramas de secuencia A continuación se muestran varios ejemplos de interacción con el sistema representados mediante unos diagramas de secuencia que reflejan a nivel de ejecución los pasos que sigue la aplicación para llevar a cabo las acciones indicadas arriba de cada ejemplo.
PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 25 de 64 · Añadir articulo a la base de datos .
PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 26 de 64 · Añadir articulo al carrito. .
‐ Nivel lógico o de aplicación. El nivel de interfaz está formado por todos los documentos que envía el servidor portal al navegador y que éste presenta al usuario. los encargados de almacenar toda la información del portal y permitir el acceso a la misma de forma controlada y segura. Este nivel es el encargado de realizar todas las operaciones a nivel de aplicación. DISEÑO El diseño de la Tienda Virtual se ha basado en una arquitectura multicapas de tres capas lógicas (Figura 4. El nivel de persistencia lo forman la base de datos y el SGBD.1) ‐ Nivel de presentación o de interfaz de usuario. . de forma que le proporcionan la información que ha solicitado acerca del portal y le permite interactuar con el mismo a través de enlaces y formularios El nivel de aplicación o lógico está formado por un conjunto de librerías que implementan las clases del dominio. ‐ Nivel de persistencia.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 27 de 64 4.
1 Como ya se comentó al principio de este documento. De este modo. . podrá haber un submenú. Figura 4. Nivel de Interfaz En la siguiente imagen (Figura 4.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 28 de 64 4. intuitivo y fácil de utilizar. el interfaz de usuario ha sido diseñado de tal manera que resulte ameno.1) se puede observar una imagen general del diseño de la TV. ‐ Un menú horizontal desde el que se puede acceder a todas las funciones de la pagina Web desde el que en determinadas funciones. todas las paginas de la TV están compuestas por cuatro fases distinguibles fácilmente: ‐ Una cabecera en la que se muestra el logo y se deja un espacio para añadir publicidad.1.
2) se muestran mas detalladamente estas diferentes partes: Cabecera menú horizontal Resumen Carrito Ventana principal Figura 4.2 .PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 29 de 64 ‐ La columna izquierda con la ventana del carrito en la que se muestra una información resumida de el contenido actual del carrito. ‐ La ventana principal en la que se muestra toda la información al usuario y se recogen los datos que este introduzca A continuación (Figura 4.
2.1. Diagramas de navegabilidad En este punto. Usuario anónimo / registrado. Para el empleado.1.1. entendemos que no existe diferencia alguna entre la navegación del usuario anónimo respecto del usuario registrado salvo para la pagina de FIN COMPRA (Figura 4. 4. Esta tienda virtual se ha diseñado de tal manera que en las paginas en las que un usuario necesita estar registrado para ver información privilegiada. 4.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 30 de 64 4. Además se incluirán los nombres de cada pagina para detallar de una manera mas sencilla la navegación posible que tendrá cada tipo de usuario. tendrá la opción de registrarse en caso de no haberlo hecho o de introducir sus datos de cliente.1. Por tanto.1. se va a explicar mas detalladamente la estructura de la TV mostrando como acceder desde cada punto a cualquier parte de la Web.3).1. la navegación será la misma que para el usuario salvo dos excepciones.1. Empleado de la Tienda Virtual. En primer lugar éste no podrá llegar hasta .
comprobación de condiciones y niveles de acceso.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 31 de 64 finalizar compra a no ser que se registre como usuario (caso en el que dejaría de ser empleado y pasaría a ser usuario registrado). generación de peticiones a la base de datos. únicamente habría que realizar pequeños cambios en el nivel lógico para adaptarse de nuevo al nivel que tiene por debajo. etc. 4. En segundo lugar. Sus funciones son: operaciones de calculo. Nivel lógico El nivel lógico o de aplicación consiste en una serie de librerías. Estas librerías contienen todas las clases necesarias para la ejecución de la Web. Esto quiere decir que seria posible realizar modificaciones en el nivel de persistencia sin que el de interfaz se viera afectado. Este nivel es el que nos permite una total independencia entre el nivel de interfaz y el nivel de persistencia (detallado en el siguiente punto). transformación y validación de datos. tendrá el privilegio de poder acceder al menú Intranet como se muestra a continuación (Figura 4. gracias a las cuales la TV puede funcionar.2.4). .
Para el buen funcionamiento se utilizará una base de datos perfectamente estructurada y diseñada con una serie de entidades relacionadas entre si de una manera coherente y con un cierto nivel de eficiencia. pedidos. Uno de ellos será la clave primaria para todas las entidades salvo para detallepedidos que en este caso su clave primaria estará compuesta por dos atributos.3. Por otra parte.). etc.1. pedidos. detallepedidos. Por tanto. Tras realizar el modelo Entidad‐Relación y efectuar varias pruebas de uso en la TV decidí separar usuarios en dos entidades diferentes (clientes y empleados) y añadir una nueva tabla (detallepedidos) que seria la que contendría toda la información detallada de los pedidos realizados. todas las entidades contendrán sus atributos. Uno de ellos lo heredará de la tabla Pedido. Nivel de persistencia Este nivel de persistencia o de acceso de datos va a utilizar una base de datos relacional que será la que contenga toda la información de la TV (catalogo de ropa.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 32 de 64 4.3. 4. stock y tiendas. información de usuarios. stock y tiendas. Diseño Entidad‐Relación . empleados. finalmente la base de datos contendrá las siguientes seis entidades: clientes. pedidos. La base de datos inicial contenía cuatro entidades: usuarios. Esta tabla será una entidad débil respecto de Pedido.
Pedido)) . Fecha: date) CP {Pedido} VNN {Cliente} CAj {Cliente}  CLIENTES detallepedidos (Pedido: int(10). Apellidos: varchar(40). Cantidad: int(10). Nombre. Numero: varchar(10). Articulo} VNN {Codigop. Articulo: int(10). Color. CP. Poblacion. Total: varchar(50).2. Cliente: varchar(15). Puerta: varchar(10). Referencia: varchar(50)) CP {Pedido. Codigop: varchar(50). Color: varchar(50). Terminado: int(1).PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 33 de 64 4. Puerta.Pedido = Pedidos. Numero. Direccion: varchar(60). Nombre: varchar(50). Poblacion: varchar(30). Total. Telefono} pedidos (Pedido: int(10). Contrasenya: varchar(20). Talla. Talla: varchar(50). Diseño lógico clientes (NIF: varchar(15). Direccion. Apellidos. Provincia: varchar(20). Provincia.3. Descripcion: varchar(50). CP: varchar(5). Cantidad. Descripcion. Telefono: varchar(9)) CP {NIF} VNN {Contrasenya. Referencia} CAj {Pedido}  Pedidos Caj {Codigop}  Stock CREATE ASSERTION tiene CHECK NOT EXISTS ( SELECT * FROM Pedido WHERE NOT EXISTS( SELECT * FROM Detallepedidos WHERE Detallepedido.
PVD: decimal(19. Poblacion. Telefono} tiendas (Nombre: varchar(50). CP: int(5). Listar: tinyint(1). Referencia} empleados (NIF: varchar(15). CP. Direccion: varchar(60). Categoria: varchar(20). Direccion. CP: varchar(5). Referencia: varchar(13)} CP {Codigo} VNN {Descripcion. Provincia. Listar. Provincia: varchar(20). Poblacion. Imagen. Contrasenya: varchar(20). Poblacion: varchar(30). Categoria. Nombre. Color: varchar(20). Poblacion: varchar(30). Telefono} . Nombre: varchar(50). CP.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 34 de 64 stock (Codigo: int(10). Direccion: varchar(50). Telefono: varchar(9)) CP {NIF} VNN {Contrasenya. Novedad: tinyint(1).2). PVD. Color. Telefono: int(9)) CP {Nombre} VNN {Direccion. Imagen: varchar(50). Novedad. Descripcion: varchar(50).
pero parte a la especificación en módulos. HTTP El protocolo de transferencia de hipertexto HTTP es el protocolo usado en cada transacción de la Web (WWW). y la forma de presentarla estén claramente separadas.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 35 de 64 5. IMPLEMENTACION E INTEGRACION 5. básicamente. En su versión 1. La versión 1.1 es similar. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una Web semántica. ‐ Apache: Servidor Web. XHTML es solamente la versión XML de HTML. Las otras tres se considerarán como tecnologías externas a la aplicación y se describirán posteriormente en el Anexo B. ‐ Mac OS X: Sistema operativo.1. HTTP fue desarrollado por el consorcio W3C y la IETF y define la sintaxis y la semántica que utilizan los elementos software de la arquitectura Web (clientes y servidores) para comunicarse. donde la información. de XML. pero cumple las especificaciones. En sucesivas versiones la W3C planea romper con los tags clásicos traídos de HTML. ‐ PHP: Lenguaje de programación para sitios Web.0. las mismas funcionalidades. más estrictas. En este caso. Es un protocolo orientado a transacciones y sigue el esquema petición‐ respuesta entre un cliente y un servidor. PHP ha sido el lenguaje en el que se ha desarrollado el portal Web. Este acrónimo se refiere al conjunto de programas software que comúnmente se utilizan para desarrollar sitios Web dinámicos sobre sistemas operativos Apple Macintosh. Tecnologías La TV se ha desarrollado utilizando la combinación de tecnologías MAMP. ‐ MySQL: Sistema Gestor de Bases de Datos. XHTML Es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas Web. Al cliente que efectúa la petición (un navegador) se lo conoce como "user agent" (agente del . de las tecnologías anteriores solo se ha utilizado una de ellas para el desarrollo de la TV. por lo que tiene. Mac OS X.
la traducción automática de un documento. PHP es un acrónimo recursivo que significa PHP Hypertext Pre­ processor. Aunque esta idea se puede aplicar a programas que se ejecutan sobre una sola computadora es más ventajosa en un sistema operativo multiusuario distribuido a través de una red de computadoras. una consulta a una base de datos. En esta arquitectura la capacidad de proceso está repartida entre los clientes y los servidores. Publicado bajo la PHP License. aunque son más importantes las ventajas de tipo organizativo debidas a la centralización de la gestión de la información y la separación de responsabilidades. El W3C es el encargado de formular la . Es usado principalmente en interpretación del lado del servidor (server‐side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+. Arquitectura Cliente ­ Servidor Esta arquitectura consiste básicamente en un cliente que realiza peticiones a otro programa (el servidor) que le da respuesta. CSS Las hojas de estilo en cascada CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). y muchas funciones mas. diseñado originalmente para la creación de páginas Web dinámicas. Gracias a esta tecnología orientada a objetos se pueden realizar tareas en la aplicación como por ejemplo mantener actualizado en todo momento el carrito. Fue creado originalmente por Rasmus Lerdorf en 1994. validación de datos por parte de usuario y empleado. sin embargo la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP al no haber una especificación formal. A la información transmitida se la llama recurso y se la identifica mediante un URL. PHP Es un lenguaje de programación interpretado. etc.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 36 de 64 usuario). acceder a la base de datos donde se encuentra toda la información de la TV. Los recursos pueden ser archivos. el resultado de la ejecución de un programa. la Free Software Foundation considera esta licencia como software libre. lo que facilita y clarifica el diseño del sistema.
Por ejemplo. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. •
5. o ser "leída" por un sintetizador de voz. personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces. mostrada en un dispositivo móvil. Por ejemplo. con lo que aumenta considerablemente la accesibilidad.2. Herramientas La TV es una aplicación Web formada por el portal Web en el lenguaje de programación PHP y una base de datos relacional en MySQL interconectadas entre si. Para esta aplicación se ha utilizado la hoja de estilo externa Estas son algunas de las ventajas de utilizar hojas de estilo: •
Control centralizado de la presentación del sitio Web completo con lo que se agiliza de forma considerable la actualización del mismo. recordar que ambas se encuentran en una maquina con sistema operativo Mac OS X y un servidor apache. Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio Web.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 37 de 64 especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. para ser impresa. Además. La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea). Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Existen tres tipos de estilos: hoja de estilo externa. Un entorno de desarrollo integrado (IDE de sus siglas en ingles) es un programa compuesto por un conjunto de herramientas para el . hoja de estilo interna y estilo en línea. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
Komodo Edit es un editor de código fuente bastante avanzado y extensible. Por ultimo. Esta es una herramienta escrita en PHP con la intención de manejar la administración de MySQL a través de paginas Web. podría decirse que es el hermano menor de otra herramienta de la misma compañía llamada Komodo IDE. ejecutar cualquier sentencia SQL. Se pueden crear y eliminar Bases de Datos. insertar o eliminar datos. PhotoShop ha sido la herramienta con la que se han diseñado todas las fotografías que forman la estructura de la TV. proporcionando algunas de las utilidades típicas de los entornos de desarrollo profesionales. eliminar y alterar tablas. sino que va mas allá. que hace que todavía se pueda disfrutar de diversas otras utilidades que son de agradecer. crear. Sequel Pro proporciona todo lo necesario para conectarse a cualquier servidor MySQL ya sea local o remoto. Esta aplicación es libre para Mac OS X cuyo fin es la gestión de bases de datos MySQL. La creación de tablas y atributos así como gestiones simples se han realizado con phpMyAdmin. borrar. con diversas posibilidades mas avanzadas y que Komodo Edit es una versión libre y gratuita. con la diferencia de que esta es una herramienta comercial de pago. se ha utilizado la aplicación Sequel Pro. . una infinidad de opciones a la hora de consultar. Además. Las gestiones con la base de datos se han realizado con dos aplicaciones distintas. Los documentos de los cuales se compone la aplicación (HTML y scripts en PHP) se han desarrollado utilizando un IDE de programación llamado Komodo Edit. y en cuanto a diseño se refiere. No solo se limita a proveer de las diversas herramientas habituales de los editores populares para programadores. editar y añadir campos. utilizando Internet. administrar privilegios y exportar datos en varios formatos. para introducir los datos que compondrán estas tablas. soportes de vistas. incorpora un sistema de complementos o add‐ons similar al que se conoce por el navegador Firefox. administrar claves en campos. Sin embargo.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 38 de 64 programador. así como una gran lista de posibilidades.
Se trata de que el usuario se familiarice con el entorno y no necesite estar registrado para poder visualizar los artículos ni ir adquiriéndolos a medida que los va viendo. visualizar la colección al completo. accederá a la misma y se le mostrarán las opciones que esta brinda a los usuarios. Detalles de la implementación 5.1. Perfil de empleado Este perfil cuenta además con la ventaja de poder realizar pequeñas modificaciones sobre la base de datos. también tendrá dos opciones mas. Autenticación de los usuarios La autenticación para usuarios funciona de igual manera que la autenticación para los empleados. Perfil de usuario registrado Si el usuario se ha registrado.3. es que una vez lo haya hecho. generar consultas sobre algún articulo en concreto. Perfiles de usuario A continuación se detallan cada uno de los perfiles de usuario que utilizarán esta aplicación. podrá realizar todas las funciones comentadas en el punto anterior. Introduciendo sus datos desde el menú Intranet. se crea automáticamente la sesión y el usuario ya está logueado y pasa a ser usuario registrado.2. pueda visitarla casi al completo y añadir los artículos al carrito que desee comprar. Podrá por tanto. Una vez esté registrado. Otra de las ventajas de registrarse. esta opción desaparecerá y aparecerá una nueva que será la de pasar por caja. modificar cantidades del carrito y por ultimo.3. La opción de registrarse le aparecerá en todo momento que acceda a la pagina del carrito.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 39 de 64 5. Perfil de usuario anónimo Este perfil es el que cualquier persona puede tomar. La aplicación se ha diseñado de tal manera que cualquier persona que acceda a ella.3. eliminar del carrito. darse de alta como cliente para poder finalizar su compra. 5. finalizar la compra con todos los artículos añadidos al carrito previamente y visualizar el estado de los pedidos realizados. El sistema mostrará al usuario un . añadirlo al carrito.
se creará una variable sesión que viajará por todas las paginas de manera que el sistema pueda controlar el todo momento con esa sesión que el usuario se encuentra autenticado. . En este caso. En caso contrario el sistema devolverá un error y el usuario tendrá que introducir de nuevo sus datos.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 40 de 64 formulario en el que tendrá que introducir su numero de usuario (DNI) y su contraseña. La aplicación recogerá estos datos y los enviará al sistema. Se comprobará mediante consultas a la base de datos que dicha información es correcta y existe una tupla con ese usuario y contraseña.
aprendido. Había que cuadrar das las partes de la TV y que quedara todo en su lugar. .1. Los puntos seguidos para conseguirla son los siguiente: ‐ La facilidad de comprensión de la estructuración de la aplicación. EVALUACION Y PRUEBAS 6. usado y ser atractivo para el usuario. el éxito de esta aplicación. Pruebas Las primeras pruebas realizadas fueron las pruebas de diseño. así como de las funcionalidades y contenidos que en esta pueden observarse. El diseño centrado en el usuario resulta en productos de mayor calidad de uso.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 41 de 64 6. más competitivos en un mercado que demanda productos de fácil uso. La usabilidad se refiere a la capacidad de un software de ser comprendido. ‐ La sencillez de uso de la aplicación en las etapas iniciales. ‐ La capacidad del usuario del sistema para controlar aquello que hace y el lugar en el que se encuentra en cada momento. pero existen numerosas reglas y recomendaciones mas. El tamaño de cada imagen y el lugar en el que tenían que estar fue una tarea que necesitó un gran numero de pruebas. ‐ La rapidez con la que el usuario encuentra aquello que busca. ‐ La facilidad percibida en la navegación en términos de tiempo requeridos y tareas precisadas para obtener los resultados perseguidos.2. en condiciones específicas de uso. Estos son algunos de los puntos seguidos para conseguir una aplicación con un alto grado de usabilidad. 6. Evaluación La evaluación de la TV es un punto muy importante ya que de esta depende que la pagina Web contenga todas las necesidades del usuario y por tanto. Los sistemas que mejor se ajustan a las necesidades del usuario mejoran la productividad y la calidad de las acciones y las decisiones.
se encuentran los dos botones con acceso directo al validador del W3C para XHTML y para el CCS.1 como se muestra a continuación. A continuación se muestra dicha validación. Tras realizar algún cambio importante en la misma.1.0 Transitional. 6. El botón para esta validación se encuentra junto con el de XHTML. . Validación XHTML y CSS Todas las paginas de la aplicación McIAN han sido comprobadas con el validador de la W3C y se han ido corrigiendo los errores encontrados hasta que todas han sido validadas correctamente como XHTML 1. Al final de cada pagina. había que probar que hubiera quedado bien y que funcionara como se esperaba. enlaces rotos y a la accesibilidad son otro tipo de pruebas que se fueron realizando simultáneamente con el desarrollo de la aplicación.2.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 42 de 64 Las pruebas referentes a la navegabilidad. El código de las hojas de estilo CSS también ha sido comprobado con la versión 2.
. Comprobación de enlaces rotos Para una navegabilidad sin errores. Estos son los resultados: Esta imagen continua pero la obviaremos y resumiremos que el resto del links también cuentan con el estado OK.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 43 de 64 6.2.2. Para este caso se ha utilizado la siguiente pagina www.zobyhost.com que tras pinchar en la opción “Link Check” e introducir la dirección inicial de nuestra pagina (http://mcian. se han comprobado todos los enlaces de la aplicación. Existe un gran numero de software que realiza esta tarea de forma gratuita.com/mcian/) comprueba de manera automática todos los links que contiene.anybrowser.
A continuación se muestra la visualización para estas resoluciones. deberá utilizarse una resolución de 800x600 o superior. Para ello. Comprobación de resolución Anteriormente se comentó que para una correcta visualización de la aplicación.3.2.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 44 de 64 6. Este apartado servirá para mostrar el cumplimiento de esta característica. se ha hecho una impresión e pantalla para la resolución minima (800x600) y una superior aleatoria. resolución 800x600: .
.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 45 de 64 resolución 1152x864: Con ambas resoluciones la aplicación se visualiza bien y se adapta correctamente.
se me pasan muchas conclusiones por la cabeza. La finalización de este proyecto me aporta una gran satisfacción ya que. Con esta aplicación he aprendido a enfrentarme a un trabajo que podría considerarse como una tarea real en cualquier empresa. también decir. Con esta memoria finaliza mi Proyecto y también tres años de carrera. han surgido muchas dudas que al resolverlas me servían de ejemplo para aprender nuevas cosas dentro de la programación Web. CONCLUSIONES En este punto del Proyecto. cuando este Proyecto solo era una idea en mi cabeza. Además me ha servido para darme cuenta de que tareas triviales que a simple vista parecían sencillas. Bibliografía . que a medida que el Proyecto iba tomando forma. Este proyecto me ha servido para interesarme en el mundo de la programación Web. parecía como algo inalcanzable y difícil de conseguir al mismo tiempo. Pese a estar finalizado el proyecto. hace unos meses. Un trabajo que no dista mucho de la idea que en un principio tenia en mente. He sido capaz de utilizar parte de los conocimientos adquiridos durante toda la carrera y plasmarlos en un trabajo del que me siento orgulloso de cómo ha quedado. se han convertido en un quebradero de cabeza y tareas que parecían imposibles han sido mucho mas fáciles de llegar a cabo.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 46 de 64 7. la motivación que iba naciendo en mi paso a paso de ir descubriendo nuevas posibilidades me hará seguir investigando en nuevas opciones a añadir dentro de la Tienda Virtual.
Anexo A.0 http://www. Apache. Casos de Uso . MySQL. IEEE Std 830‐1998.org/TR/xhtml1 ‐ Especificaciones de CSS 2.mamp.php ‐ Especificaciones de XHTML 1.com ‐ Wikipedia la enciclopedia libre: http://es. PHP: http://www.1 http://www.wikipedia.org/TR/CSS21 ‐ Mamp: Mac.net/index.info Referencias físicas: Se han tomado también como referencias proyectos de la Escuela Técnica y de la Facultad de Informática de años anteriores. ‐ Foros del Web: http://www.org ‐ Manual de PHP: http://php.w3c.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 47 de 64 Referencias Web: ‐ IEEE Recommended Practice for Software Requirements Specifications.w3c.forosdelweb.
‐ El sistema actualizará el resumen del carrito. El sistema comprueba 3. base de datos las características del producto. El usuario selecciona un 2. 7. 4. Extensiones síncronas En 3 el usuario puede cancelar la operación. 5. El sistema actualiza los totales del carrito. Si no se encuentra. Usuario ‐ Cualquier usuario podrá añadir el producto de la Tienda Virtual que desee al carrito en cualquier momento sea usuario registrado o anónimo. Precondiciones Postcondiciones Flujo de eventos Extensiones asíncronas ‐ Caso de uso Eliminar del carrito . El sistema busca en la producto en el catalogo.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 48 de 64 Caso de uso Descripción Actor iniciador Actores secundarios Resumen Añadir a carrito El usuario añade un producto al carrito. El usuario pulsa sobre que el producto se el botón “Añadir a carrito” encuentre en el carrito. Interacciones del usuario Obligaciones del sistema 1. 6. se añade el articulo nuevo al carrito. suma la cantidad al producto existente en el carrito. del producto deseado. Si se encuentra.
Interacciones del usuario Obligaciones del sistema 1. Busca en el carrito el identificador de los productos marcados. 2. El producto debe haber sido añadido al carrito anteriormente. . 6. Elimina del carito los productos seleccionados. Pulsa sobre el botón “Actualizar” que se encuentra bajo el carrito.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 49 de 64 Descripción Actor iniciador Actores secundarios Resumen Precondiciones Postcondiciones Flujo de eventos El usuario elimina un producto al carrito Usuario ‐ Cualquier usuario podrá eliminar un producto del carrito en el momento que desee. Si el usuario elimina todos los elementos del carrito el sistema mostrará un mensaje indicando que el carrito está vacío. 5. Marca el checkbox de el/los producto/s que desea eliminar del carrito. Actualiza los totales del carrito. 3. Extensiones síncronas En 3 el usuario puede cancelar la operación. El usuario va a la pagina donde se encuentra el resumen del carrito. 4. El sistema actualizará el resumen del carrito. Extensiones asíncronas ‐ Caso de uso Modificar cantidad.
6. el sistema elimina el articulo del carrito. el sistema mostrará un mensaje indicando que el carrito está vacío. . Interacciones del usuario Obligaciones del sistema 1. Modifica la cantidad de los artículos a los que su cantidad es diferente a la anterior. 5. Extensiones asíncronas ‐ Caso de uso Alta usuario. Actualiza los totales del carrito. 3. Pulsa sobre el botón “Actualizar” que se encuentra bajo el carrito. Modifica la cantidad de el/los producto/s que desee cambiar. El producto debe haber sido añadido al carrito anteriormente. Si el usuario modifica todas cantidades a cero. Extensiones síncronas En 3 el usuario puede cancelar la operación. 4.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 50 de 64 Descripción Actor iniciador Actores secundarios Resumen Precondiciones Postcondiciones Flujo de eventos El usuario modifica la cantidad de un producto añadido al carrito. Usuario ‐ Cualquier usuario podrá modificar la cantidad de un producto que desee adquirir. 2. El sistema actualizará el resumen del carrito. El usuario va a la pagina donde se encuentra el resumen del carrito. Si la cantidad nueva es cero.
El usuario va una pagina desde la que puede darse de alta (Ej. 6. El nuevo usuario queda registrado en el sistema. Extensiones asíncronas ‐ . El usuario introduce sus datos personales. si el usuario no ha introducido todos los campos. El sistema solicita los datos personales a través de un formulario. Interacciones del usuario Obligaciones del sistema 1.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 51 de 64 Descripción Actor iniciador Actores secundarios Resumen Precondiciones Postcondiciones Flujo de eventos Dar de alta un usuario en la Tienda Virtual. 4. 7. “Carrito”). Selecciona la opción “Nuevo usuario”. Usuario ‐ El usuario anónimo introduce sus datos personales y el sistema lo da de alta como usuario registrado. el sistema informará del error y volverá a solicitarlos. 5. El sistema confirma que el usuario se ha dado de alta correctamente. En 6. 2. Extensiones síncronas En 4 y 5 el usuario puede cancelar la operación. El sistema registra al nuevo usuario en la base de datos. El usuario pincha sobre el botón “Enviar datos”. 3. El usuario no se ha dado de alta previamente.
7. El empleado está conectado a su Intranet. En 10. El sistema muestra las los datos del cliente en el coincidencias de la buscador. El empleado introduce 4. El empleado pincha en 2. El empleado selecciona 6. 11.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 52 de 64 Caso de uso Descripción Actor iniciador Actores secundarios Resumen Precondiciones Modificar usuario. búsqueda. El sistema confirma que el usuario se ha modificado correctamente. usuario en la base de datos. 3. si el usuario no ha dejado un campo en blanco. El sistema modifica al botón “Enviar datos”. Modificar los datos del usuario en la Tienda Virtual. el sistema informará del error y volverá a solicitarlo. El sistema muestra en un formulario todos los 8. Empleado Usuario El empleado modifica los datos de un usuario si es necesario en la base de datos. Postcondiciones Flujo de eventos Extensiones síncronas En 5 y 9 el empleado puede cancelar la operación. los datos oportunos en el formulario. El sistema muestra un “Modificar los datos de un listado con todos los cliente” de su Intranet. El empleado pulsa el 10. clientes y un buscador. 9. El empleado modifica datos del cliente. Extensiones asíncronas ‐ . El usuario solicita al empleado la modificación de sus datos personales. 5. El sistema busca en la el nombre del usuario a base de datos el cliente modificar. Los datos del usuario quedan modificados en el sistema. seleccionado. Interacciones del usuario Obligaciones del sistema 1.
si el empleado introduce un estado incorrecto. El sistema confirma que el pedido se ha modificado correctamente. pedidos y un buscador. El empleado pincha en el botón “Actualizar”. El empleado está conectado a su Intranet Los datos del pedido quedan modificados en el sistema. El empleado cambia el estado del pedido. Interacciones del usuario Obligaciones del sistema 1. 7. 8. 5. Cambiar el estado de un pedido. El sistema modifica el pedido en la base de datos. El empleado introduce 4. el sistema muestra el error y vuelve a solicitar el nuevo estado. En 7. El sistema muestra el el numero del pedido a pedido buscado. El pedido se ha realizado previamente. El empleado pincha en 2. 6. modificar. El sistema muestra un “Cambiar el estado de un listado con todos los pedido” de su Intranet. Extensiones síncronas En 3 y 6 el empleado puede cancelar la operación. Empleado ‐ El empleado modifica el estado de uno o varios pedidos en la base de datos.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 53 de 64 Caso de uso Descripción Actor iniciador Actores secundarios Resumen Precondiciones Postcondiciones Flujo de eventos Cambiar estado. 3. Extensiones asíncronas ‐ .
6. El usuario se ha registrado previamente y ha añadido al carrito artículos El pedido queda registrado en la base de datos. El sistema informa al usuario mediante un mensaje la confirmación del pedido. 2. El sistema actualiza la tabla pedido con una nueva fila.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 54 de 64 Caso de uso Descripción Actor iniciador Actores secundarios Resumen Precondiciones Postcondiciones Flujo de eventos Finalizar pedido. 3. 5. Extensiones síncronas ‐ Extensiones asíncronas ‐ . El usuario va a la pagina “Carrito” y pincha en “Caja” para finalizar el pedido. Interacciones del usuario Obligaciones del sistema 1. El sistema accede a la base de datos y busca la información de los artículos del carrito. Usuario ‐ El usuario finaliza su pedido y se almacena en la base de datos. del usuario. El sistema actualiza la tabla detallepedido con una nueva fila. El sistema accede al Id. 4. El usuario finaliza su compra.
El usuario va a una pagina desde la que puede conectarse (Ej. datos en el formulario. 7. 4. El sistema inicia sesión con el usuario en cuestión. El sistema recoge los datos del formulario. 2. Usuario ‐ El usuario inicia sesión con su DNI y contraseña a la Tienda Virtual. 5. si el empleado introduce un DNI y contraseña incorrectos. Extensiones síncronas En 4 el usuario puede cancelar la operación. El usuario pincha en el botón “Validar”. Extensiones asíncronas ‐ . El usuario introduce sus formulario. El usuario se ha registrado previamente y dispone de una contraseña. ‐ Interacciones del usuario Obligaciones del sistema 1. “Carrito”). El usuario se conecta a la Tienda Virtual. 6. En 7. el sistema muestra el error y vuelve a solicitar los datos. El sistema solicita los datos a través de un 3. El sistema comprueba que dichos datos se encuentren en la base de datos.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 55 de 64 Caso de uso Descripción Actor iniciador Actores secundarios Resumen Precondiciones Postcondiciones Flujo de eventos Login usuario.
Descripción de Tecnologías. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una Web semántica. . acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). las mismas funcionalidades. En sucesivas versiones la W3C planea romper con los tags clásicos traídos de HTML. Apuntar que el XHTML 1. compatible con los nuevos estándares que actualmente está desarrollando el W3C como recomendación para futuros agentes de usuario o navegadores.0 fue diseñado expresamente para ser mostrado en navegadores que soportan HTML de base. ‐ Muchas herramientas de diseño Web aún no producen código XHTML correcto. ‐ Facilidad de edición directa del código y de mantenimiento. más estrictas. por lo que tiene.0.1. al ir cayendo en desuso. es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas Web. Las principales ventajas del XHTML sobre otros formatos son: ‐ Compatibilidad parcial con navegadores antiguos: la información se visualiza. y la forma de presentarla estén claramente separadas. XHTML XHTML. XHTML es solamente la versión XML de HTML. básicamente.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 56 de 64 Anexo B. Esto cada vez es menos problemático. donde la información. lo que hace que las páginas no siempre se muestren correctamente. pudiendo incluso escogerse entre varios diseños para un mismo medio. En su versión 1. B. aunque sin formato. pero parte a la especificación en módulos. La versión 1. Inconvenientes: ‐ Algunos navegadores antiguos no son totalmente compatibles con los estándares. pero cumple las especificaciones. ‐ Formato abierto.1 es similar. ‐ Un mismo documento puede adoptar diseños radicalmente distintos en distintos aparatos. de XML.
PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 57 de 64 B. La separación entre cliente y servidor es una separación de tipo lógico. el resultado de la ejecución de un programa. El protocolo de transferencia de hipertexto (HTTP. . lo que facilita y clarifica el diseño del sistema. los servidores del correo. Los recursos pueden ser archivos. los servidores de archivo. servidores. y también permite rastrear usuarios ya que las cookies pueden guardarse en el cliente por tiempo indeterminado. es decir. aunque son más importantes las ventajas de tipo organizativo debidas a la centralización de la gestión de la información y la separación de responsabilidades. Para esto se usan las cookies.2. En esta arquitectura la capacidad de proceso está repartida entre los clientes y los servidores. HyperText Transfer Protocol) es el protocolo usado en cada transacción de la Web (WWW). etc. que no guarda ninguna información sobre conexiones anteriores. que es información que un servidor puede almacenar en el sistema cliente. La arquitectura cliente –servidor consiste básicamente en un cliente que realiza peticiones a otro programa (el servidor) que le da respuesta. Los tipos específicos de servidores incluyen los servidores Web. la traducción automática de un documento. etc. A la información transmitida se la llama recurso y se la identifica mediante un URL. Aunque esta idea se puede aplicar a programas que se ejecutan sobre una sola computadora es más ventajosa en un sistema operativo multiusuario distribuido a través de una red de computadoras. El desarrollo de aplicaciones Web necesita frecuentemente mantener estado. Es un protocolo orientado a transacciones y sigue el esquema petición‐respuesta entre un cliente y un servidor. proxies) para comunicarse. Esto le permite a las aplicaciones Web instituir la noción de "sesión". HTTP define la sintaxis y la semántica que utilizan los elementos software de la arquitectura Web (clientes. Al cliente que efectúa la petición (un navegador o un spider) se lo conoce como "user agent" (agente del usuario). HTTP y la arquitectura Cliente – Servidor. una consulta a una base de datos. Mientras que sus propósitos varían de unos servicios a otros. la arquitectura básica seguirá siendo la misma. donde el servidor no se ejecuta necesariamente sobre una sola máquina ni es necesariamente un sólo programa. HTTP es un protocolo sin estado.
desempeñan entonces un papel pasivo en la comunicación (dispositivo esclavo). Sus características son: •
Es quien inicia solicitudes o peticiones.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 58 de 64 En la arquitectura C/S el remitente de una solicitud es conocido como cliente. puede conectarse a varios servidores a la vez. • • •
Al receptor de la solicitud enviada por cliente se conoce como servidor. •
. No es frecuente que interactúen directamente con los usuarios finales. Por lo general. Por lo general. la procesan y luego envían la respuesta al cliente. tienen por tanto un papel activo en la comunicación (dispositivo maestro o amo). aceptan conexiones desde un gran número de clientes (en ciertos casos el número máximo de peticiones puede estar limitado). Normalmente interactúa directamente con los usuarios finales mediante una interfaz gráfica de usuario. Sus características son: •
Al iniciarse esperan a que lleguen las solicitudes de los clientes. Tras la recepción de una solicitud. Espera y recibe las respuestas del servidor.
más problemas para el servidor). reparar. En la mayor parte de redes P2P. actualizar. recursos y la integridad de los datos son controlados por el servidor de forma que un programa cliente defectuoso o no autorizado no pueda dañar el sistema. •
Desventajas •
La congestión del tráfico ha sido siempre un problema en el paradigma de C/S. Esta centralización también facilita la tarea de poner al día datos u otros recursos (mejor que en las redes P2P). suficientemente desarrolladas. y la facilidad de empleo. Existen tecnologías. Fácil mantenimiento: al estar distribuidas las funciones y responsabilidades entre varios ordenadores independientes. las peticiones de los clientes no pueden ser satisfechas. es posible reemplazar. los recursos están generalmente distribuidos en varios nodos de la red. la amigabilidad del interfaz. puede ser que cause muchos problemas para éste (a mayor número de clientes. Al contrario. en las redes P2P como cada nodo en la red hace también de servidor.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 59 de 64 Ventajas •
Centralización del control: los accesos. o se pueden añadir nuevos nodos a la red (clientes y/o servidores). •
. Cualquier elemento puede ser aumentado (o mejorado) en cualquier momento. otros pueden todavía acabar de descargar consiguiendo datos del resto de los nodos en la red. Aunque algunos salgan o abandonen la descarga. Cuando una gran cantidad de clientes envían peticiones simultaneas al mismo servidor. diseñadas para el paradigma de C/S que aseguran la seguridad en las transacciones. mejor es el ancho de banda que se tiene. Escalabilidad: se puede aumentar la capacidad de clientes y servidores por separado. cuanto más nodos hay. El paradigma de C/S clásico no tiene la robustez de una red P2P. Cuando un servidor está caído. Esta independencia de los cambios también se conoce como encapsulación. mientras que sus clientes no se verán afectados por ese cambio (o se afectarán mínimamente). o incluso trasladar un servidor.
permiten a la mayoría de los programadores crear aplicaciones complejas con una curva de aprendizaje muy corta. PHP se encuentra instalado en más de 20 millones de sitios Web y en un millón de servidores. El gran parecido que posee PHP con los lenguajes más comunes de programación estructurada. Un hardware regular de un ordenador personal puede no poder servir a cierta cantidad de clientes. La versión más reciente de PHP es la 5. Este mismo sitio Web de Wikipedia está desarrollado en PHP. Generalmente se ejecuta en un servidor Web.1 (for Windows) del 19 de noviembre de 2009.3. El cliente no dispone de los recursos que puedan existir en el servidor. es posible crear aplicaciones con una interfaz gráfica para el usuario. Puede ser desplegado en la mayoría de los servidores Web y en casi todos los sistemas operativos y plataformas sin costo alguno. tomando el código en PHP como su entrada y creando páginas Web como salida. PHP PHP es un lenguaje interpretado de propósito general ampliamente usado y que está diseñado al usar especialmente para desarrollo Web y puede ser incrustado dentro de código HTML. esto aumentará el coste. Normalmente se necesita software y hardware específico. Por ejemplo. También les permite involucrarse con aplicaciones de contenido dinámico sin tener que aprender todo un nuevo grupo de funciones. También puede ser usado desde la línea de órdenes. el número de sitios en PHP ha compartido algo de su preponderante sitio con otros nuevos lenguajes no tan poderosos desde agosto de 2005. utilizando la extensión PHP‐Qt o PHP‐GTK. de la misma manera como Perl o . para satisfacer el trabajo. si la aplicación es una Web. Por supuesto.3. no podemos escribir en el disco duro del cliente o imprimir directamente sobre las impresoras sin sacar antes la ventana previa de impresión de los navegadores. Aunque todo en su diseño está orientado a facilitar la creación de página Web. como C y Perl. Es también el módulo Apache más popular entre las computadoras que utilizan Apache como servidor Web.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 60 de 64 •
El software y el hardware de un servidor son generalmente muy determinantes. sobre todo en el lado del servidor. •
a esta versión de PHP se la llama PHP CLI (Command Line Interface). módulo para Apache. como Linux o Mac OS X) y Windows. Éste procesa el script solicitado que generará el contenido de manera dinámica (por ejemplo obteniendo información de una base de datos). y puede interactuar con los servidores de Web más populares ya que existe en versión CGI. Existe un módulo para Eclipse. el servidor ejecuta el intérprete de PHP. quien a su vez se lo envía al cliente. CodeGear (la división de lenguajes de programación de Borland) ha sacado al mercado un entorno integrado de desarrollo para PHP. ODBC. Microsoft SQL Server. bajo la licencia GNU. Oracle.NET como lenguajes). denominado Delphi for PHP. Recientemente. DB2. PHP es una alternativa a las tecnologías de Microsoft ASP y ASP. así como imágenes en diferentes formatos. e ISAPI.NET (que utiliza C# VB. El código fuente escrito en PHP es invisible al navegador y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Postgres. Cuando el cliente hace una petición al servidor para que le envíe una página Web. a JSP/Java de Sun Microsystems. •
. existe además un IDE (entorno de desarrollo integrado) comercial llamado Zend Studio. Ventajas • •
Es un lenguaje multiplataforma. Completamente orientado al desarrollo de aplicaciones Web dinámicas con acceso a información almacenada en una Base de Datos. Permite la conexión a diferentes tipos de servidores de bases de datos tales como MySQL. Esto hace que la programación en PHP sea segura y confiable. Aunque su creación y desarrollo se da en el ámbito de los sistemas libres. El resultado es enviado por el intérprete al servidor. Flash. Mediante extensiones es también posible la generación de archivos PDF. PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos. y a CGI/Perl.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 61 de 64 Python pueden hacerlo. uno de los IDE más populares. tales como UNIX (y de ese tipo. Firebird y SQLite. a ColdFusion de la compañía Adobe (antes Macromedia).
o cómo se va a imprimir. es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla. No requiere definición de tipos de variables aunque sus variables se pueden evaluar también por el tipo que estén manejando en tiempo de ejecución. Biblioteca nativa de funciones sumamente amplia e incluida. entre la cual se destaca que todas las funciones del sistema están explicadas y ejemplificadas en un único archivo de ayuda. estructurado y manejable. Permite aplicar técnicas de programación orientada a objetos. Capacidad de expandir su potencial utilizando la enorme cantidad de módulos (llamados ext's o extensiones). •
Inconvenientes •
La ofuscación de código es la única forma de ocultar los fuentes. B. por lo que se presenta como una alternativa de fácil acceso para todos. Un ejemplo de esto son los desarrollos que en PHP se han hecho del patrón de diseño Modelo Vista Controlador (o MVC).4 CSS (Hojas de estilo) Hojas de Estilo en Cascada (Cascading Style Sheets). el programador puede aplicar en su trabajo cualquier técnica de programación y/o desarrollo que le permita escribir código ordenado. o incluso cómo va a ser pronunciada la .PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 62 de 64 •
Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad. destaca su conectividad con MySQL y PostgreSQL. Si bien PHP no obliga a quien lo usa a seguir una determinada metodología a la hora de programar (muchos otros lenguajes tampoco lo hacen). Tiene manejo de excepciones (desde PHP5). aun estando dirigido a alguna en particular. Posee una amplia documentación en su página oficial. Es libre. que permiten separar el tratamiento y acceso a los datos. la lógica de control y la interfaz de usuario en tres componentes independientes (ver más abajo Frameworks en PHP).
Este sistema tiene a su vez un subsistema llamado Darwin (bajo APSL. El gestor de ventanas X11. la gestión avanzada de memoria y el multiproceso simétrico. las capas superiores del sistema (por ejemplo el subsistema gráfico en general) son código cerrado. B. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Los Estilos definen la forma de mostrar los elementos HTML y XML. declaraciones sobre el estilo de uno o más elementos. Se basa en Unix y usa una interfaz gráfica desarrollada por Apple llamada Aqua. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. la multitarea por desalojo o expulsiva. Sin embargo. es decir.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 63 de 64 información presente en ese documento a través de un dispositivo de lectura. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. Mac OS X Server fue lanzado en el año 1999 y se diferencia por incorporar diferentes herramientas administrativas para la gestión de redes y servicios de red. comercializada y vendida por Apple Inc. separando el contenido de la presentación. La regla tiene dos partes: un selector y la declaración. característico en la familia de sistemas Unix. una licencia open source) que proporciona a Mac OS X prestaciones modernas. CSS se utiliza para dar estilo a documentos HTML y XML. . que se inspira libremente en la interfaz de Mac OS Classic. CSS funciona a base de reglas. como la memoria protegida. y Java se usan sólo para compatibilidad con software no nativo de Mac. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.5 Mac OS X Mac OS X es una línea de sistemas operativos computacionales desarrollada. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
pero para aquellas empresas que quieran incorporarlo en productos privativos deben comprar a la empresa una licencia específica que les permita este uso. MySQL AB — desde enero de 2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle Corporation desde abril de 2009— desarrolla MySQL como software libre en un esquema de licenciamiento dual.PROEYCTO FINAL DE CARRERA – DISEÑO E IMPLEMENTACION DE UNA TIENDA VIRTUAL Página 64 de 64 B. B. en inglés. Al contrario de proyectos como Apache. GNU/Linux. etcétera). siendo el servidor HTTP del 68% de los sitios Web en el mundo y creciendo aún su cuota de mercado (estadísticas históricas y de uso diario proporcionadas por Netcraft. que implementa el protocolo HTTP/1. que posee el copyright de la mayor parte del código. Apache es el servidor HTTP más usado.3. El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation. MySQL es propietario y está patrocinado por una empresa privada. Cuando comenzó su desarrollo en 1995 se basó inicialmente en código del popular NCSA HTTPd 1. En la actualidad (2005). donde el software es desarrollado por una comunidad pública y el copyright del código está en poder del autor individual. a patchy server (un servidor parcheado). multihilo y multiusuario con más de seis millones de instalaciones. .6 Apache El servidor Apache es un servidor HTTP de código abierto para plataformas Unix (BSD. Apache presenta entre otras cosas mensajes de error altamente configurables. Su nombre se debe a que originalmente Apache consistía solamente en un conjunto de parches a aplicar al servidor de NCSA. Era. Está desarrollado en su mayor parte en ANSI C. pero más tarde fue reescrito por completo.7 MySQL MySQL es un sistema de gestión de base de datos relacional. bases de datos de autenticación y negociado de contenido.1 (RFC 2616) y la noción de sitio virtual. pero fue criticado por la falta de una interfaz gráfica que ayude en su configuración. Windows y otras. Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia.
More From This UserTutorial LispworkAnalisis_Usabilidad_3Ejemplo Cronograma GeneralPROYECTO - Dise+¦o y Alojamiento Pagina WEBGerenciaProyectosSoftware_Sesión09Gestión de Proyectos Informáticos_hoyc0ncytecPD Buenos01 Introducción a los Conceptos Básicos del DiseñoClase 03 Estilos Arquitectónicos35019tfcis1_t06_EjPatronesModel Ode Anal is Isexamenparcial2012-1solucionado.docxRISI-SENSORES
Sign up to vote on this titleUsefulNot usefulMemoria Proyecto by Uniendo Nuevas Metas San MarcosEmbedDownloadRead on Scribd mobile: iPhone, iPad and Android.Copyright: Attribution Non-Commercial (BY-NC)List price: $0.00Download as PDF, TXT or read online from ScribdFlag for inappropriate contentMore informationShow less
RelatedPractica Sslby jose82Dbd Triggersby jose82cap2by jose82Fetchby jose82ayddsby jose82Modalidadesdetitulacion Finalby jose82ayddsby jose82Como Formular Perfiles de Proyectoby jose82More from jose82Practica SslDbd Triggerscap2FetchayddsModalidadesdetitulacion FinalayddsComo Formular Perfiles de Proyecto

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución