domingo, 20 de diciembre de 2015

Semana 14-20 Diciembre




MEJORAS : PAGINA DE PERFIL DE USUARIO


Tuvimos varias observaciones de lo que teníamos que mejorar con respecto a nuestro sitio, una de ellas fue la del perfil del usuario.
Algunos de las observaciones fueron las siguientes :
- Quitar el banner del index que añadimos a header de página de perfil
-Agregarle un boton llamativo (El +) al panel de documentos compartidos  y que al carrusel le añadamos bootstrap.
-Agregarle un boton llamativo (Un Lápiz)  al panel de documentos creados y que al carrusel le añadamos bootstrap.
-Que los paneles no se desacomoden.
-Agregarle a la barra de menú de perfil lo que ya teníamos en la barra del index.
-El tipo de letra de la barra de menú de la pagina de perfil debía tener el mismo  tipo de letra que la barra de menú del index.

                                             


Imagen 1 : Pagina de Perfil de Usuario Antes

Para hacer los cambios en la pagina me guié de ejemplos de la pagina de la W3C, de la página bootsnip y bootply. En ellas me inspire para hacer la nueva estructura de la página , hubieron muchos cambios en el css y el html.
Los cambios del html fueron :  primero poner en orden las hojas de estilos  y los script que son llamados para la página que son bootstrap y jquery.
Una vez echo esto en el body se estructuró de nuevo como va a estar dividido los componentes de la página.
Lo que se hizo básicamente es dividir el container principal en filas .
La primera Fila seria el JumboButton con el titulo "Perfil de Usuario " a la derecha y la foto de perfil a  la izquierda.
La segunda Fila lo dividí en 2 columnas :
La primera columna con la información del usuario que ya teníamos.
La segunda columna la dividí en 2 filas : una para los documentos creados y el otro para los documentos compartidos.
Cada uno de los elementos contenidos en la segunda fila están dentro de paneles  los cuales se aplica bootstrap correctamente.
Dando como resultado que todo se adapte adecuadamente cuando se cambia el tamaño de la página.

El resultado final lo podemos ver en la siguiente figura: 


Imagen 2 : Pagina de Perfil de Usuario Después


No hay comentarios:

Publicar un comentario