TALLER JAVASCRIPT + JQUERY

Realizar una aplicación web correspondiente al lado del cliente en un sistema de

gestión de personal y proyectos orientado a una empresa de consultoría. El
departamento de Recursos Humanos utilizará esta aplicación para gestionar la
estructura interna de la empresa mediante una interfaz web. A continuación se
describe el comportamiento esperado:

 La pagina debe contener un header, en el cual se incluyan dos elementos:

el logo y el nombre de la aplicación
 Al cargar la página el usuario verá dos partes diferenciadas: Una a la
izquierda y otra a la derecha de la pantalla.
 La parte izquierda se utilizará para los paneles ó bloques que permitan
gestionar los datos de los departamentos y sus respectivos empleados
(personal disponible). Cuando se habla de la gestión de los datos, nos
referimos en este caso a la posibilidad de agregar, eliminar y editar los
datos de cada registro visualizado en la aplicación
 En la derecha aparecerá la lista de proyectos en desarrollo con sus
respectivas opciones para gestionar los datos
 Ambas secciones estarán inicialmente vacías, o con una serie de elementos
iniciales por defecto.
 El personal estará clasificado en departamentos.
 Cada departamento se define mediante un nombre y contiene a una serie
de empleados. El nombre del departamento aparecerá en la parte superior
y se debe poder desplegar haciendo click sobre el mismo para poder
visualizar y/o editar la lista de sus miembros (preferiblemente mediante
una transición suave).
 Cada empleado se define por: una fotografía, un nombre, una descripción
del puerto que ocupa, el número de proyectos en los que está trabajando.
 Se debe poder añadir departamentos y empleados dentro de los
departamentos de forma dinámica
 Cuando los empleados de un departamento estén desplegados (visibles), se
debe mostrar una miniatura de la fotografía junto con el resto de los datos.
Todas las miniaturas deben mostrarse con el mismo tamaño. Si el usuario
pasa el puntero del ratón por encima de la imagen ésta debe ampliarse,
con una transición suave, de forma que el usuario pueda verla
 cómodamente. Al retirar el puntero del ratón la imagen volverá a su
tamaño reducido. Los demás datos del empleado deben mostrarse cerca de
la imagen.
 Dentro de la parte correspondiente a los proyectos en curso se debe dar la
posibilidad de añadir proyectos de forma dinámica.
 Un proyecto está formado por un nombre, una descripción y una serie de
empleados (que pueden pertenecer a distintos departamentos).
 Para añadir un empleado a un proyecto el usuario hará click sobre el texto
“Incorporar empleado”, que se mostrará al lado de cada proyecto, y luego
seleccionará el empleado correspondiente dentro de la lista de la parte
izquierda. Los datos del empleado deben aparecer entonces dentro del
proyecto. También se debe actualizar el campo que refleja el número de
proyectos en los que el empleado está trabajando. Al seleccionar
“Incorporar empleado” las imágenes de todos los empleados que ya están
formando parte del proyecto deben aparecer con un valor distinto de
transparencia para que visualmente se aprecie que no pueden ser
seleccionados de nuevo.
 El usuario podrá también hacer click sobre “Eliminar empleado” para cada
retirar a un empleado del proyecto seleccionado.
 Finalmente, para marcar el fin de un proyecto el usuario pulsará sobre el
botón “Finalizar Proyecto”, con lo que se liberarán todos los empleados que
trabajaban en el mismo, aunque se seguirá mostrando el nombre y
descripción del proyecto. Al final del campo de la descripción debe
visualizarse el texto “Proyecto Finalizado” y se debe eliminar la posibilidad
de añadir o retirar empleados.