SERVICIOS MULTIMEDIA

Transcripción

1 SERVICIOS MULTIMEDIA Curso 2014/2015 Eco-Domótica low cost DISEÑO E IMPLEMENTACIÓN DE UNA PÁGINA WEB Grupo nº: 8 Integrantes: Ana María Leal López María José Cuchillo Saiz Oussama Rezzak Liman Titulación: Ingeniería en Sonido e Imagen, en Telecomunicación Asignatura: Servicios multimedia Fecha de entrega: 16/05/2015 1

2 ÍNDICE CONTENIDO PÁGINA Descripción del proyecto.. 3 Propuesta de trabajo..4 Recursos utilizados.. 5 Diseño preliminar 6 Calendario de ejecución.9 Diseño definitivo..11 Bibliografía 14 Conclusiones 15 2

3 1. DESCRIPCIÓN DEL PROYECTO Nuestro proyecto basa su idea fundamental en la implementación de una página web destinada a la tecnología domótica. Dicha tecnología tendrá una peculiaridad; todos los elementos pasivos que gestionen el hogar inteligente serán alimentados mediante una placa fotovoltaica. De esta forma se intenta crear un equilibrio entre tecnología y medio ambiente Objetivos: El objetivo es crear una página web sencilla para el usuario, fácil de recordar y con una interfaz simple. Dentro de este objetivo principal destacamos 3 puntos importantes: 1. Ofrecer productos personalizados. 2. Crear una red de partners. 3. Soluciones a particulares y empresas. Contexto: Nos basaremos en el sector tecnológico así como en el ámbito de las energías renovables. Se ofrecen soluciones particulares para personas con movilidad reducida o empresas pequeñas/ medianas Referentes: Se ha tomado como referencias distintas empresas que ofrecen un servicio similar así como sectores inmobiliarios y negocios concienciados con el medio ambiente, dichos enlaces se proporcionan en el apartado de bibliografía 3

4 2. PROPUESTA DE TRABAJO En la página principal el usuario tendrá la opción de elegir entre 4 bloques: 1. Conócenos: Breve descripción de nuestra motivación así como de la ubicación donde se encuentra nuestra oficina central 2. Productos: Servicios a ofrecer de forma personalizada a diferentes sectores de la población.los servicios elegidos seran enviados a modo de confirmación al del usuario. 3. Asóciate: Red de partners mediante formulario sencillo.el usuario recibirá un una vez que confirme a qué sector pertenece 4. Proyectos: Ilustraciones sobre proyectos ya realizados y propuestas futuras Todas la página tendrán en común un diseño sencillo mediante colores característicos del medio ambiente como azul y verde. Además se hará uso de las diferentes técnicas de servicios multimedia aprendidas en clase: 1. Formularios: Integrados en Asóciate y Productos 2. Pestañas elección de productos: Slider CSS 3. Estilos dinámicos (Responsive), CSS, etc. 4. Menús desplegables 5. Header y Footer 6. Envío de información, POST / GET. 4

5 3. RECURSOS UTILIZADOS Para poder desarrollar el proyecto se han dividido los recursos utilizados 3 partes Recursos materiales: 1. Ordenador personal con acceso a internet 2. Dos host diferentes para alojar el sitio web ( Hostinger/byehost) 3. Material dispuesto en la asignatura. 4. Plantillas PHP, CSS 5. Programas de edición de texto como, phpstorm, notepad++, etc. 6. Video tutorial de Adobe (Hitos del proceso de diseño) 7. Imágenes de la tecnología/servicio solicitado Recursos tecnológicos: 1. Slider personalizado para mostrar los servicios (CSS) 2. Envio de informacion Post 3. CSS basado en javascript 4. Funcion mail integrada en PHP 5. Google maps Recursos humanos: 1. Cada integrante del grupo 2. Ayuda del profesor 3. Intercambio de ideas con otros compañeros 5

6 4. DISEÑO PRELIMINAR Inicialmente, el aspecto de nuestra página web era muy diferente al aspecto final. A continuación se muestran las imágenes con el diseño inicial. 6

7 7

8 8

9 5. CALENDARIO DE EJECUCIÓN La distribución del trabajo en un primer momento fue la siguiente: Pero tras el primer chequeo del proyecto, cuando se decidió cambiar el diseño de la página se redistribuyó el trabajo a realizar. De modo que decidimos dividir el trabajo del siguiente modo: 9

10 Aunque sea este el reparto que realizamos a priori, nos hemos ido ayudado con los problemas que hemos ido teniendo a la hora de crear e implementar las páginas y también a la hora de decidir si el diseño nos parecía acorde con el diseño de página que queríamos obtener. 10

11 6. DISEÑO DEFINITIVO Como se ha mencionado anteriormente, el diseño final es muy diferente al diseño establecido en un principio, no obstante la idea sigue siendo la misma sólo cambia el aspecto gráfico. Los principales cambios se han llevado a cabo en el menú y en el uso de recursos más atractivos para el usuario. Por otro lado, la página inicial que hacía distinción entre empresas y particulares ha sido suprimida ya que se diseñó un modelo de página que combinaba ambas opciones. A continuación se muestran las imágenes con el diseño definitivo de nuestra página web. Figura 1. Página principal Se establecer un Header/footer común a la mayoría de las páginas, esto hace que la navegación sea más sencilla e intuitiva 11

12 Figura 2. Página Conocenos Figura 3. Página Proyectos 12

13 Figura 4. Página Asociate Figura 5. Página Productos 13

14 7. CONCLUSIONES Al inicio del curso nuestros conocimientos de diseño web eran casi nulos, no obstante una vez finalizado el proyecto poseemos una serie de herramientas las cuales pueden ser aplicadas en cualquier ámbito de la vida real. En el desarrollo del trabajo ha sido fundamental familiarizarse con las estructuras HTML, Css y gestión de formularios. Una vez concluido el proyecto queda una pequeña puerta entreabierta para seguir profundizando en el desarrollo web de forma personal. 14

15 8. BIBLIOGRAFÍA