PRÁCTICA FINAL TECNOLOGÍA MULTIMEDIA 3 DE JUNIO DE ENDIAN LIN [Dirección de la compañía]

(1)

PRÁCTICA FINAL

TECNOLOGÍA MULTIMEDIA

3 DE JUNIO DE 2015

ENDIAN LIN [Dirección de la compañía]

(2)

Índice

Introducción ... 3 Diseño ... 3 Aspecto general... 3 Diagrama de páginas ... 4 Herramienta externa ... 4 Bootstrap.css ... 4 Bootstrap.js y jquery.min.js ... 4 Ficheros ... 5 HTML ... 5 CSS ... 5 XML... 5 DTD ... 5 RSS ... 5 SVG ... 5 JS... 6 PHP ... 6 Funcionalidades e implementaciones ... 6 Noticias ... 6 Sesión de usuarios ... 7 Registración... 8 Sesión de técnicos ... 8 Cambio de estado ... 8 Contratación ... 9 Chat online ... 11 SendChat ... 11 ReceiveChat... 13 Sistema de cobro ... 13 Valoración ... 15 Historial de peticiones ... 15 Datos de prueba ... 17 Usuario ... 17 Técnico ... 17

(3)

Dificultades y resoluciones ... 17 Conclusión ... 18

(4)

Introducción

Se pretende crear un sitio web de un servicio público, en este caso concreto una página de los electricistas, en la cual los usuarios que accedan a la página pueden contratar a un técnico para llevar a cabo una instalación i/o reparación eléctrica.

Las páginas funcionan de manera dinámica, eso significa que la base de dato y las páginas están físicamente separado pero vinculado a través de JavaScript y PHP de manera que, solo modificando la base de datos, nos modifica el contenido de la página asociada.

En esta documentación se encuentra toda la información sobre la construcción de la página.

Diseño

Aspecto general

Es una página tradicional que contiene los siguientes componentes:

 Una cabecera en la cual aparece el logo de la empresa y el título.

 Una barra de menú con enlaces que se dirigen a otras páginas del sitio.

 Una sección principal (cada página la tiene diferente).

 Una columna lateral (todas las páginas la tienen igual - el Login de usuarios -)

 Un pie de página, donde hay una pequeña información del creador y el acceso de los técnicos.

Veamos la siguiente figura para ilustrar el aspecto general de la página:

(5)

Diagrama de páginas

Por la existencia del menú todas las páginas están vinculada y para una representación más clara, las flechas del diagrama siguiente presentan significados lógicos.

Herramienta externa

La única herramienta de soporte que he utilizado es bootstrap, que contiene 3 ficheros:

Bootstrap.css

Fichero CSS que ayuda mejorar el aspecto de los componentes de la página web, como por ejemplo los botones, las etiquetas y los inputs, etc…

Bootstrap.js y jquery.min.js

Ficheros que lleva a cabo una serie de efectos y movimientos especiales.

(6)

Ficheros

HTML

Fichero más básico para la creación de una página web, en este proyecto dispone 6 ficheros del tipo HTML y son: index.php, servicio.php, pago.php, registrarse.php, historial_peticiones.php y ficha.php. Los nombres de ficheros termina en “.php” porque necesitamos unas cuantas líneas de código PHP en cada fichero.

CSS

Este tipo de fichero nos permite modificar el estilo o el aspecto de la página web asociada. En este sitio web dispone 2 ficheros CSSs: principal.css y bootstrap.css.

El primero está escrito a mano y modifica básicamente el posicionamiento de los módulos de las páginas (cabecera, pie de página, etc.) mientras el segundo da estilo a los componentes de detalle como los botones, las etiquetas, etc.

XML

Fichero fundamental de la práctica, hace que la página sea dinámica. Sirve como un pequeño base de datos y gracia a su estructura de datos facilita bastante la búsqueda de datos.

DTD

Fichero que valida la estructura del fichero XML asociado así forzando que la creación del fichero XML esté correcto de acuerdo con las restricciones que definen dentro del fichero DTD.

RSS

Fichero basado en tecnología XML normalmente sirven para publicar noticias y a través de un lector RSS se puede saber fácilmente (sin tener que abrir la página) las ultimas noticias.

Solo tenemos un fichero de rss: rssEB.xml

En el menú hay un icono de RSS que permite ver el contenido desde un lector de RSS (ojo, hay que darle “atrás” del navegador ya que como todos los lectores online pide creación de la cuenta).

SVG

Fichero también basado en la tecnología XML, pero el nombre del fichero ha de terminar en “.svg”. Este tipo de fichero nos permite crear figuras sencillas tales como el logo de una empresa.

El logo del sitio web esta hecho en SVG:

(7)

JS

Ficheros de JavaScript, cada página lo tiene asociada ya que sin él las distintas funcionalidades del sitio web no funcionarán. Dispone dos ficheros de JavaScript: global.js y bootstrap.js.

El primero es fundamental y escrito a mano, contiene todas las funciones que controla las distintas operaciones del sitio web, como por ejemplo el chat online. Mientras que el segundo es un fichero importado del Bootstrap, una herramienta externa que lleva a cabo unas animaciones especiales de la página.

PHP

Ficheros de PHP permite la intervención del servidor sobre una petición. En esta práctica ha sido utilizado para:

 Mantener la sesión iniciada.

 Poder de identificación entre clientes y técnicos

 Guardar los ficheros XML después de la modificación.

 Abrir la ficha del técnico.

Hay 3 ficheros del tipo PHP: save.php (guardar fichero xml), getUsuario.php (iniciar la sesión) y getIdFicha.php(abrir la ficha).

Funcionalidades e implementaciones

Noticias

Se muestra las noticias de la empresa en la sección principal de la página principal, su fichero de origen es un fichero RSS de formato XML que a través de JavaScript cargamos el fichero e imprimimos las noticias por la pantalla.

Pasos de implementación

1. Cargar el fichero XML, en este caso rssEB.xml.

2. Encontrar los nodos de las noticias, en este caso a través de Xpath. 3. En una variable acumulamos toda la información y código HTML. 4. Mediante el document.getElementeById().inner actualizamos la página.

(8)

Sesión de usuarios

Permite la inicialización de la sesión de los usuarios si están registrados, también la opción de registrarse. Una vez registrado podría hacer dos cosas: cerrar sesión y mostrar historiales.

1. Cargar el fichero lista_usuario.xml.

2. Utilizando el Xpath encontrará el nodo del usuario que corresponde al nombre y la contraseña introducido por teclado, una cosa como: path="/lista_usuario/usuario[NIF="+nif2+"and pass="+pass2+"]/nombre", lo que hace es buscar un usuario que tiene el NIF y la contraseña igual al que se introdujo.

3. Actualizar la pantalla tanto si haya encontrado como si no.

4. En caso afirmativo, ejecutamos el PHP para guardar las informaciones (tipo, nombre, id) en las variables de la sesión $_SESSION[‘variable’], de tal manera que, el usuario se mantendrá iniciada la sesión hasta el abandono de la página.

(9)

Registración

Función que permite dar de alta un cliente nuevo y guardar sus informaciones en el fichero lista_usurio.xml.

1. Asegura de que todos los campos obligatorios han sido rellenado. 2. Cargar el fichero lista_usuarios.xml

3. Crear y concatenar los nodos nuevos (datos). 4. Guardar los datos nuevos en el fichero.

Código de implementación

Por la similitud de implementación, consulte el código de implementación de la función Contratación.

Sesión de técnicos

Permite la inicialización de la sesión de los técnicos.

La implementación es exactamente que el de usuario, la única cosa que hay que añadir es el cambio de estado, ya que si el técnico no está conectado no puede ser elegido por un cliente.

Cambio de estado

Cuando un técnico esté conectado, su valor de estado se cambiará de -1 a 0, y cuando se desconecta, se cambiará de 0 a -1.

Paso de implementación

1. parámetro de entrada: id del técnico y el estado a cambiar. 2. Cargar el fichero de electricistas.

3. Buscar el técnico con el id de entrada.

4. Encontrar el nodo de “estado” y cambiarle el valor 5. Guardar el fichero.

(10)

Contratación

Permite un cliente contratar a un técnico (si al menos hay un técnico conectado).

5. Asegura de que todos los campos obligatorios han sido rellenado. 6. Cargar el fichero historial_servicio.xml

7. Crear y concatenar los nodos nuevos (datos). 8. Guardar los datos nuevos en el fichero.

(11)

(12)

Chat online

Permite la conversación online entre el usuario y el técnico, y un técnico solo puede estar hablando con un solo cliente. Cada técnico tiene un fichero de chat independiente (preparado manualmente). Se divide en dos funciones independientes: SendChat y ReceiveChat.

SendChat

Guardar el mensaje enviado en un fichero XML para que el receptor pueda recibir.

1. Cargar el fichero de chat según el id del técnico. 2. Identificar el rol que envía el mensaje.

3. Si es un cliente:

(13)

i. Crear un nodo nuevo.

ii. Configurar el atributo del mensaje como “C-1” donde “C” significa cliente y “-1” el estado de lectura del mensaje.

b. No es la primera vez, añadir el atributo del mensaje y configurar como “C-1”. 4. Si es un técnico

a. Encontrar el nodo del cliente y añadir el mensaje configurándolo el atributo como “T-1”.

5. Guardar el fichero.

(14)

ReceiveChat

Leer el mensaje a partir del fichero XML correspondiente.

1. Cargar el fichero de chat según el id del técnico. 2. Identificar el rol que envía el mensaje.

3. Si es un cliente:

a. Buscar todo los mensajes que tenga carácter “T-1” mediante Xpath. b. Configurar el atributo del mensaje como “T0”.

4. Si es un técnico:

a. Buscar todo los mensajes que tenga carácter “C-1” mediante Xpath. b. Configurar el atributo del mensaje como “T0”.

c. Guardar el nombre del usuario para poder enviarle mensaje. 5. Guardar el fichero.

Sistema de cobro

Permite un cliente pagar el servicio realizar por un técnico previamente. Para poder realizar el pago, el cliente ha de introducir el código de referencia, y eso se puede encontrar en el historial de la petición.

(15)

1. Asegurar que los campos obligatorios estén rellenados. 2. Cargar el fichero historial_servicio.xml.

3. Encontrar la petición con el código introducido por teclado. 4. Mirar si la petición o el servicio realizado está pendiente de pago 5. En caso afirmativo, realizar el pago y configurar el estado como pagado. 6. Sino, avisa al cliente que ya estaba pagado.

(16)

Valoración

Permite un cliente valorar el técnico respecto al servicio realizado. El cálculo de la media de valoración se calcula así:

Valoración = (valoración anterior * contador + valoración actual) / (contador+1)

1. Cuando un cliente realiza el pago, devolver el id del técnico que finalizaba el servicio. 2. Cargar el fichero lista_electricista.xml y encontrar la ficha del técnico por id.

3. Realizar el cálculo previamente definido.

4. Guardar la valoración nueva e incrementar el contador. 5. Guardar el fichero.

Historial de peticiones

Función que permite tanto a usuarios con a técnicos el poder de consultar el historial de servicios.

1. Cargar el fichero historial_servicio.xml

2. Buscar los servicios con el NIF si el solicitante es un cliente y con el ID si es un técnico. 3. Imprimir toda la información recorriendo todos los nodos.

(17)

(18)

Datos de prueba

A continuación facilitamos los datos para la prueba de sesiones.

Usuario

NIF Contraseña 100 xxxx 200 xxx 300 xxx

Técnico

ID Contraseña 111 xxx 222 xxx 333 xxx

Dificultades y resoluciones

La utilización de caché es el problema más molestoso de la práctica ya que en muchas ocasiones, por la utilización del caché las funcionalidades fallaba, y esto implica que el programador se pone en duda la exactitud de la implementación del programa, y examinando el código constantemente. La solución encontrada fue lo siguiente:

Cada vez que abrimos el fichero XML, le ponemos justo abajo una línea de código: xmlHttp.setRequestHeader(‘If-Modified-Since’, ‘0’) y el problema se resolvió.

La recepción de mensaje del chat la tenía diseñada como una recepción automática (mediante un temporizador que controla constantemente la entrada de mensaje), pero debido a las otras prácticas y falta de tiempo, la solución de la recepción de mensaje funciona definitivamente de manera manual.

(19)

Conclusión

La práctica es dura. En el momento que veía la práctica la veía fácil, pero a medida que voy avanzando los problemas van surgiendo, tales como ¿cómo evitar la utilización del caché? ¿Cómo hago para que el chat funcione bien? Etc.

No solo los problemas va saliendo sino también la carga de trabajo, porque muchas funcionalidades están ligadas de manera que para llevar a cabo esto hace falta aquello, por ejemplo el cambio de estado de los técnicos, una cosa que no me dio en cuanta al principio.

La práctica es útil. Aunque parezca mentira, no me arrepiento de haber hecho la práctica solo, porque he aprendido muchísimas cosas durante la creación del sitio web, y muchas técnicas para su construcción.

Desde un programador de 0 experiencia en la construcción de la página web hasta un programador que ya crea un sitio web más o menos bien he logrado un gran paso.

No soy un buen presentador. Cada vez que presento algo en público, la cabeza se me queda en blanco, no es porque no estoy preparado es porque me llena la nerviosidad.