Altolandon : página web con reconfiguración avanzada

PROYECTO FINAL DE CARRERA “ALTOLANDON. Página web con reconfiguración avanzada” Autor: MARCELO LÓPEZ SANTA Dirigido por: FLOREAL ACEBRÓN LINUESA PROFESOR TITULAR UNIVERSIDAD POLITÉCNICA DE VALENCIA 1 2 Índice INTRODUCCIÓN OBJETIVO METODOLOGÍA A SEGUIR CAPITULO 1. ANÁLISIS DE HERRAMIENTAS 1.1 EDITOR HTML 1.1.1. KOMPOZER 1.1.2. FRONTPAGE 1.1.3. DREAMWEAVER 1.2 SERVIDOR WEB CAPITULO 2. DISEÑO PROPUESTO 2.1 DISEÑO DEL FONDO 2.2 MENÚS 2.3 ANIMACIÓN PÁGINA BIENVENIDA 2.4 GALERIAS 2.5 SECCIÓN DEL ADMINISTRADOR CAPITULO 3. DESARROLLO 3.1 DISEÑO DEL FONDO 3.1.1 FONDO 3.1.2 LOGO 3.2 MENÚS 3.3 ANIMACIÓN PÁGINA BIENVENIDA 3.4 GALERIAS 3.5 SECCIÓN DEL ADMINISTRADOR 3.6 BASE DE DATOS CAPITULO 4. CONCLUSIONES ANEXO MANUAL DE ADMINISTRACIÓN POR PARTE DEL CLIENTE 3 Introducción Este proyecto nace a raíz de una necesidad de negocio por parte de la bodega de vinos AltoLandon. Estas bodegas se encuentran en Landete, en un punto intermedio entre Valencia, Cuenca y Teruel. Constan de unas 55 hectáreas en las cuales podemos encontrar las propias bodegas. Producen tres tipos distintos de vinos y principalmente los exportan. De ahí la importancia de tener una web que corresponda a la demanda actual. Las nuevas tecnologías avanzan muy deprisa y los negocios que dependen de ellas, no se pueden quedar atrás. En el caso particular de este proyecto, se ofreció cambiar por completo la imagen que esta bodega daba al resto del mundo a través de su página web www.altolandon.com. La página web se había quedado atrás tecnológicamente hablando, y se pretendía dotarla de mayor dinamismo y mejorar su aspecto visual para hacerla mucho más atractiva y funcional. Además, se pidió que fuese de fácil modificación para poder auto gestionar la página sin necesidad de recurrir a especialistas en esa materia. 4 Objetivo El objetivo principal de este proyecto es: "Diseñar una página web dinámica, dotándola con las tecnologías más actuales en sitios web y haciéndola fácil para el usuario y fácil para el administrador de la misma.". El administrador, aún sin conocimientos profundos en la materia debe poder modificar la página web, añadiendo, comentarios, fotos, notas de prensa, todo ello de una forma sencilla e intuitiva. Se pretende cambiar por completo el aspecto visual que presenta la página web actualmente ya que está bastante anticuado tanto en diseño como en funcionalidad. El diseño presenta un acabado bastante tosco. Se nota que su anterior diseñador no tuvo en cuenta dotarla del atractivo necesario para que una página invite a su navegación. Actualmente el diseño que presenta una página, dado la gran cantidad de oferta, es lo que marcará la diferencia entre recibir más o menos visitas, o lo que es lo mismo, llevar el producto a un mayor número de clientes y así obtener mayor beneficio. 5 El cliente demandó además que la nueva página web tuviera una gran cantidad de fotografías de la propia bodega y la capacidad de poder subir notas de prensa. A todo esto se le añade el objetivo principal, que es dotar a la página de la mayor capacidad posible para editar los contenidos. De esto se encargará el propio cliente que a su vez será el administrador. Metodología a seguir 1. Búsqueda de herramientas y tecnologías que puedan ayudar a conseguir el fin que se busca. 2. Elección de la mejor vía de acción, una vez vistas las necesidades y las opciones que existen para conseguir los objetivos del proyecto. 3. Análisis profundo de sitios web similares a lo que se pretende conseguir para salir un poco del estándar actual e intentar hacer algo más innovador. 4. Desarrollo del sitio web mediante las tecnologías elegidas en el punto 2 y el diseño creado a partir del punto 3. 5. Creación de un apartado para el administrador mediante el cual pueda modificar cualquier parte de la página web. 6 6. Pruebas del correcto funcionamiento y configuración de la web en el servidor donde se alojaba la anterior web. 7 Capitulo1. Análisis de herramientas Antes de comenzar con el proyecto, se hizo un análisis profundo de todas las herramientas disponibles para conseguir el objetivo deseado. 1.1 Editores HTML Para no hacer una página web mediante código únicamente, es decir, un editor de texto y todo el código HTML escrito a mano, se decidió que era mucho más eficiente buscar algún programa para este propósito. Para llegar al objetivo deseado, era necesario encontrar una herramienta que proporcionara capacidad suficiente para realizar un trabajo eficaz. Tras consultar en diversas fuentes, se obtuvo una lista de programas que a priori podían ayudar en esta tarea. 8 Tras probar varios programas, se concluyó que las más idóneas eran: -Kompozer -FrontPage -DreamWeaver A continuación se detallarán los motivos por los cuales se eligió DreamWeaver descartando los otros dos. 9 En este caso particular, justo cuando empezamos a realizar el proyecto, Adobe lanzó la versión CS4 de todos sus productos que significó un gran salto de calidad. Finalmente, nos decantamos por la Suite Adobe CS4 Web Premium, desechando las dos opciones anteriores por sus limitaciones para conseguir el objetivo deseado. 16 1.2 Servidores web Una vez iniciado el proyecto, surgió la necesidad de encontrar un servidor en el cual poder realizar las pruebas necesarias al trabajar con la página web. Era inviable utilizar el que actualmente aloja la web, ya que suponía dejar sin servicio a la bodega mientras se desarrollaba la nueva página, así que se decidió instalar uno en el propio ordenador desde el que se realiza el proyecto. Se necesitaba un servidor que soportara PHP y fuese capaz de trabajar con bases de datos. Dado que la mayoría de los servidores utilizados actualmente parten de la base de Apache, también era un aspecto muy importante a tener en cuenta. Tras buscar por la web e informarnos de las distintas soluciones que servirían para llegar al fin deseado decidimos utilizar XAMPP. XAMPP es una forma fácil de instalar la distribución Apache que contiene MySQL, PHP y Perl. Además es gratuito y muy sencillo de utilizar. 17 Capitulo2. Diseño propuesto A la hora de elegir el diseño de la página web, nos reunimos con el cliente para ver que ideas proponía y como le gustaría que se enfocará la parte visual. En este punto, hay que tener en cuenta que el cliente puede llegar a proponer ideas que son muy difíciles o directamente imposibles de llevar a cabo. En este sentido, el cliente nos indicó varias páginas web en las cuales vio elementos que le resultaron atractivos y que quería incluir en el diseño de la nueva página. Su idea principal era incluir multitud de fotografías en cada una de las secciones que tuviera la web, y a su vez añadir una galería de imágenes. Además de esto, quería una sección donde pudiese subir notas de prensa. Al ser una página orientada a la venta, necesitaba una sección especializada para que los usuarios pudieran contactar con la bodega para hacer sus pedidos. Por lo demás, se nos dio total libertad para elegir el diseño de todas las secciones, desde la elección de menús, pasando por las distintas animaciones, hasta los detalles más básicos como el fondo de la página o el formato del texto. 18 Con este baño de ideas, nos dedicamos a estudiar las posibles alternativas para realizar lo que el cliente solicitaba. Pensamos que lo más apropiado para una página de este tipo, viendo el gran número de páginas similares a lo que se buscaba, era un diseño lo más minimalista y sencillo posible. Como la exigencia de incluir muchas imágenes no era un problema, se buscaron soluciones para la sección de compras de la página. Lo más apropiado era incluir una sección de compra típica con un carrito, en la que el usuario selecciona los productos que desea adquirir, y contacta directamente con la entidad bancaria para su pago inmediato. Esta última idea no gusto al cliente y decidió como quería gestionar los pedidos, que sin ser la opción más eficiente, era la que más acorde iba con su forma de trabajar. También se nos dio total libertad a la hora de desarrollar el sistema de autogestión de la página. Solo se exigía que la sección de notas de prensa fuera totalmente editable. 19 2.1 Diseño del fondo Para el diseño del fondo, como ya se ha citado en el Capítulo 2, pensamos que como la página tendría un acabado minimalista, el fondo debería ser lo más sencillo posible. Después de probar varios tipos de diseño, nos quedamos finalmente con un fondo blanco que en la parte superior se degrada al negro, siendo en este degradado donde se sitúa el logo de la bodega y el nombre de la misma. En esta imagen se puede ver el resultado final. 20 2.2 Menús Con los menús, siguiendo la misma idea de sencillez, se pensó que bastaría con simples vínculos en texto, sin necesidad de realizar ningún diseño específico de un menú tipo caja, menú desplegable o alguna otra variante. Como con esta propuesta se consigue fácilmente el propósito que se busca, no hacía falta complicar más la solución. Los vínculos del menú van directamente en forma de texto con color blanco oscuro sobre el fondo de la página, variando este color a morado en función de que sección se está viendo en ese momento. Las secciones visitadas dejarían los textos correspondientes en un tono morado claro. Captura del menú obtenido de la web. 21 2.3 Animación página bienvenida La página principal contaba con un menú de bienvenida totalmente estático y, a opinión personal bastante desastroso. Por lo tanto, decididos de dotar a la página de un gran dinamismo, pensamos que sería buena idea incluir una animación como bienvenida que dejara seleccionar el idioma en el que se desea visitar la web. Esta animación consta de un fondo blanco en el cual una serie de bolitas en tono morado aparecen en pantalla y se van desplazando hacia el centro hasta forma el logo de la bodega. Finalmente aparece el nombre de ALTOLANDON en blanco y los dos idiomas posibles, a los que se accederán pulsando en Entrar o Enter respectivamente. Resultado final de la animación. 22 2.4 Galerías Para la galería, debido a que no se tenía el presupuesto necesario para adquirir ninguna, se tuvo que optar por las que se ofrecían de forma gratuita. Por lo tanto, de entre las diferentes alternativas que encontramos, decidimos nuevamente elegir la más sencilla de todas. Ya que el cliente quería fotos en todas las secciones, nos pareció apropiado incluir una galería por sección, en la que únicamente apareciesen fotos referentes a la misma. Además, finalmente también se optó por incluir una sección propia para una galería en la cual encontrásemos más fotos presentándolas con un bonito efecto. Para no sobrecargar demasiado la página web, se optó por una galería que aparentemente muestra una foto y que pulsando sobre ella va cambiando. 23 2.5 Sección del administrador La página web debía contar con la capacidad de ser auto editable, por ello, se decidió crear una sección especializada para llevar a cabo estas tareas. Como esta sección solo interesa al administrador de la misma, una buena opción fue la de protegerla del resto de usuarios, para que así solo se pudiese acceder a la misma sabiendo el nombre de usuario y la contraseña. 24 Capitulo3. Desarrollo Como ya se ha explicado en el Capítulo 1, todo el desarrollo del proyecto se llevó a cabo mediante la suite CS4 de Adobe, concretamente utilizando los programas DreamWeaver, PhotoShop, Fireworks y Flash. Cada uno de ellos está orientado a un tipo de trabajo y con esto ganaremos calidad y eficiencia en el trabajo realizado. 3.1 Diseño del fondo En el diseño del fondo podemos diferenciar dos elementos que requieren una atención especial, por un lado el fondo propiamente dicho y por otro el diseño del logo de ALTOLANDON. 25 3.5 Sección del administrador Como se ha citado en el punto 2.5, esta sección debe de estar protegida siendo el administrador el único capaz de acceder a ella. Se podría haber optado por una solución más sencilla que también cumpliría con los requisitos del cliente, pero esto podía ocasionar problemas de seguridad y por tanto se desechó la idea. En caso de que más de un usuario se encargara de la administración de la página, hubiese sido necesaria la inclusión de una base de datos más amplia con un sistema de comprobación de cuentas, para limitar los permisos según las tareas que cada uno realizase. La solución escogida para proteger la sección fue la de crear unos scripts en PHP que mediante la autentificación del usuario y la creación de una sesión, protege de una manera muy eficiente toda la sección dedicada a la administración de la página. Una vez solucionado este problema, el trabajo se centró en conseguir el mayor grado de edición posible. 32 Primero se creó una sección con los distintos menús editables, los cuales hacen referencia a subsecciones que se encargan de realizar la tarea correspondiente. Posteriormente se programó en PHP el código necesario para llevar a cabo estas opciones. Básicamente todo el código tiene un punto en común, se trata de consultas a la base de datos que se encuentra en el servidor y que actualizan estas subsecciones. Finalmente, este código en PHP se incluyó en las subsecciones correspondientes para que así tanto servidor como base de datos y agente de usuario, sean capaces de interactuar entre sí. 33 3.6 Base de Datos Para el correcto funcionamiento de la página web, es necesario contar con una base de datos. En este caso se eligió una base de datos de MySQL para poder realizar las actualizaciones correspondientes desde la sección del administrador. La base de datos consta de una serie de tablas las cuales actualizan sus registros mediante scripts en php. 34 Capitulo5. Conclusiones Con esta propuesta se consiguió diseñar una web mucho más dinámica y atractiva, dotándola de elementos más acordes a las demandas actuales como puede ser la inclusión de la animación de bienvenida, las diferentes galerías o el catálogo de vinos. Además, el manejo intuitivo y sencillo de la página de cara al usuario invita a su navegación. Será mucho más agradable visitar esta nueva página y realizar diferentes acciones sobre ella. Finalmente, se consigue el objetivo más importante del proyecto, que no es otro que poder realizar tareas de administración de una forma sencilla y autónoma, pudiendo así mantener actualizada la página cada vez que se desee. 35 Anexo. Manual de administración por parte del cliente Índice Anexo 1 Acceso a la página de administración 2 Cambiar imagen del título 3 Actualizar información de las secciones Bodega, Finca y Contacto 4 Agregar nuevas notas de prensa 5 Eliminar notas de prensa 6 Modificar datos de la tienda 7 Modificar las galerías * La base de datos y la página web soporta cualquier tipo de imagen que se suba desde la Intranet. 36 1. Acceso a la página de administración Para acceder a la página de administración, se debe pulsar sobre el candado que aparece en el menú superior derecho de la página web. Pantalla Inicio 37 Aparecerá en pantalla una página que le solicita un nombre y contraseña, que por defecto será “AltoLandon” en ambos casos. Pantalla Acceso Una vez se ha accedido, se encontrará con la página principal de la intranet con la opción de elegir las diferentes secciones que pueden ser actualizadas, ya sean en español o inglés. 38 Pantalla Intranet 2. Cambiar imagen del título Para cambiar la imagen que se nos muestra al inicio de la página web se accederá a la sección Título de nuestra intranet. Una vez allí basta con seleccionar la imagen que queremos subir y pulsar sobre el botón para que esta sea enviada a nuestra base de datos. Se recomienda que las dimensiones sean de 640x150 para su correcta visualización, de lo contrario la imagen podría aparecer deformada. 3. Actualizar información de las secciones Bodega, Finca y Contacto Una vez se ha accedido a la sección correspondiente, aparecerá una página con un formulario con el cual se puede introducir el texto deseado. Para actualizar basta con pulsar el botón actualizar. Esta acción modificará el texto tal y como esté al pulsar dicho botón. 39 Pantalla Actualización de Bodega 40 4. Agregar nuevas notas de prensa Al acceder a esta sección se mostrará por un lado la información referente al número de notas de prensa que se han creado anteriormente en cada idioma y con un campo mediante el cual se puede cambiar el número de notas de prensa que nos podremos encontrar en cada página. Además, como también se puede apreciar, se nos presentan una serie de botones mediante los cuales se puede consultar la lista de notas de prensa que tenemos en cada idioma y crear nuevas notas de prensa. Pantalla Gestión sala de prensa 41 Pantalla de carga de fotos 48 Después de esto, simplemente se introducen las proporciones indicadas anteriormente y se selecciona en que carpeta se guardaran estas fotos. Pulsamos OK y las fotos seleccionas serán redimensionadas. Se aconseja que se escoja la opción resize original para no tener dos copias de una misma foto. Además, es bueno que la carpeta destino sea la misma que la carpeta en la cual vamos a tener que poner las fotos para que se carguen en la galería. Es recomendable también no modificar la opción profile, ya que esta se usa para utilizar perfiles anteriormente creados. Pantalla de ajustes de redimensión Si por alguna razón el destino no era el de la carpeta correspondiente en el servidor, habrá que arrastrar las fotos a dicha carpeta, asegurándose de que no quedan duplicados. 49 8. Instalación y manejo de FileZilla Para realizar cualquier intercambio de archivos con el servidor es necesario tener instalado un cliente FTP. En este caso se explicará cómo instalar el cliente FileZilla ya que por su facilidad de uso es el más recomendable, aunque cualquier otro serviría. Se puede descargar el programa desde la siguiente dirección: http://filezilla-project.org/download.php?type=client Aquí se eligirá sobre que plataforma queremos realizar la instalación, que habitualmente será Windows, por lo que pulsamos sobre el enlace marcado con (recommended). Una vez se tiene el programa descargado, se procederá a instalarlo de la forma habitual. Después de que se complete la instalación, se procederá a crear la conexión con nuestro servidor. Para ello, tenemos que pulsar sobre: Archivo -> Gestor de Sitios lo cual nos llevará a la siguiente pantalla. 50 Pantalla Gestor de sitios de FileZilla Una vez aquí, pulsaremos sobre el botón Nuevo sitio y procederemos a introducir los datos proporcionados por la empresa que aloja nuestro servidor. Servidor: ftp.altolandon.com Usuario: altolandonftp Contraseña: UifxSE23 51 Pantalla después de introducir los datos Después de introducir los datos, pulsamos sobre el botón conectar y comprobaremos que se nos muestra una lista con todas las carpetas que tenemos alojadas en nuestro servidor. 52 Pantalla con la lista de las carpetas de nuestro servidor Para ubicar cualquier archivo en el servidor basta arrastrarlo a la carpeta correspondiente. Para extraer cualquier archivo del servidor a nuestro ordenador personal, basta con acceder a la carpeta deseada y arrastrar el archivo desde el servidor a nuestro ordenador. 53