Se tuvo que modificar el estilo del layout debido a que con el anterior formato la pagina no quedaba debidamente ajustada al hacerla responsive.

Fig 1. anterior pagina del perfil

Por ello se tuvo que redistribuir algunos elementos; ademas se modifico la barra de navegación, para que ésta sea acorde a la mostrada en la pagina inicial index.html

Fig 2. nuevo estilo de la pagina que muestra el perfil del usuario

Fig 3. muestra de la barra de navegación

Se adjunta imagen del código que permitió cambiar el estilo de la barra de navegación.

Modifique la apariencia y tipo de entrada tanto para un nuevo usuario como para uno ya existente;

los cuales tendrán que ingresar diferentes tipos de datos para acceder a su pagina de perfil.

fig 1. imagen del Sign in (antes)

fig 2. imagen del Sign in para un nuevo usuario con su respectiva validacion en cada uno de los campos

fig 3. imagen del Sign in para un usuario existente con su respectiva validación en cada uno de los campos

Para poder realizar lo anteriormente descrito, se utilizo las características correspondientes a la clase TABS y de la etiqueta FORM.

Tal como se observa en una parte del código mostrado a continuación:

(+) Se agregó

++++ botón que re-direcciona a la pagina de inicio.

++++ un drop down menú para desplegar las opciones del usuario y el enlace para el cierre de sesión.

(+) Presentación del diseño final de la pagina perfil.HTML

Noté que no había ninguna forma de volver a la pagina principal, desde la pagina que muestra el perfil del usuario, como tampoco permitía el cierre de sesión.

Anteriormente se tenía un whats new que no dirigía a ningún lugar, por lo que se realizo un enlace directo a la pagina de inicio (index.HTML) a través de la opción HOME .

En lo que respecta al menú desplegable, antes solo se presentaba el nombre del usuario, pero para poder cerrar sesión se agrego un icono en forma de flecha, que indica la presencia de un menú desplegable, en el cual se mostraran las opciones a las cuales el usuario podrá acceder, asi como también el cierre de su sesión, tal como se muestra en la figura:

Las líneas de código correspondientes:

Las cuales tuvieron como guía un tutorial de la w3scholl:

[1] menú con opciones deshabilitadas

[2] drop down menú

Con lo cual culminan las modificaciones en la pagina perfil.html y se realiza la respectiva presentación final:

(+) Se modifico el tipo de botón para acceder a crear un nuevo diagrama en la sección de documentos compartidos, pero se mantuvo el diseño anterior en la sección documentos creados.

Para poder realizar este tipo de botón se hizo uso de los gráficos proporcionados por bootstrap, se modifico su apariencia en el archivo perfil.css con los siguientes comandos:

.glyphicon.glyphicon-plus{
color: white;
}

Como referencia se tuvo que seguir el siguiente ejemplo: glyphicon

 Visualización del estilo del botón anterior

(+) Posteriormente, la pagina workArea.HTML se carga correctamente (resuelto el inconveniente mencionado en el post anterior) y muestra el diagrama seleccionado en el área de diagramación.

Se pudo resolver el problema utilizando el atributo target junto al atributo href, tal como se observa en las líneas de código:

Esto lo pude realizar gracias a la indicación de que target=»_top» se debe utilizar para recargar una pagina; esta recomendación fue encontrada en: w3school-html-link