Semana del 21-27 Diciembre

SEGUNDO AVANCE DEL PROYECTO

Para el segundo avance del proyecto se tenia que hacer las modificaciones a la página del workarea , que es la página que tiene la paleta y el lienzo .

Las observaciones que nos dieron para mejorar del proyecto fueron las siguientes:

-En la barra de menú , ademas de tener las opciones que ya teníamos se debía agregar un sub menú en Home donde pongamos las mismas opciones de la barra de menú del index.

-El color de la barra de menú debía ser negra para que este acorde a las demás paginas.

-El avatar del usuario debía ser igual al que esta en la página de perfil de usuario.

-La paleta de componentes para agregar al lienzo debía de mejorarse.

-El doble clic debía de ser reemplazado por otra estrategia para eliminar algún elemento que este añadido en el lienzo.

-La pagina tenia que estructurarse mejor, de tal forma que esta se adapte cuando cambia su tamaño.

Imagen 1 : Pagina de Workarea Antes

Para hacer los cambios en la página me guié de ejemplos de la pagina de la W3Schools, de la página bootsnip y bootply. En ellas me inspire para hacer la nueva estructura , hubieron muchos cambios en el css y el html.

La que mas me guie para realizar los cambios fue el template de  "Webpage" de la página de w3schools, la cual hace la división del container del body , con divs.

Estos divs que intervienen son el principal que es el del lienzo , el div para la paleta de componentes y el div para el futuro chat que vamos a hacer.

-En el div del lienzo añadí los tabs que ya teníamos .

-En el div de la paleta añadí separe las clases de componentes que tenemos por medio de paneles y cada componente lo agregue como un li en un list group del panel.

-En el div del chat añadí  también un panel , con las respectivas cosas que debe tener un chat.

Con respecto a la barra de menú de la página se cambio por la barra de menú de las otras páginas , se agrego un sub menú al Home como el About Us  y el avatar del usuario también se lo modifico. Ademas de que también se tuvo que poner en orden las hojas de estilos  y los script que son llamados para la página para que se haga bootstrap correctamente y  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 Workarea Después

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

Semana 30-6 Diciembre

PRIMER AVANCE DEL PROYECTO

Para el primer avance del proyecto me encarge de las siguientes tareas:

1. Modificar el log-in.
2. Cargar el archivo SVG al lienzo de trabajo.

LOG-IN

Imagen 1: Log in .

El formulario de log-in es un modal implementando bootstrap y el efecto del botón Sign-In es dado por un código javascript añadido en el proyecto , en donde se visualiza una progress-bar como animación.

Cargar el SVG al Lienzo

Para cargar una imagen SVG al lienzo existen distintas formas de hacerlo se puede añadir un svg : como imagen, como objeto y como svg puro.

Para poder lograr nuestro objetivo teníamos que hacerlo como svg puro.

Para visualizar como se carga un archivo SVG a nuestro proyecto se deben seguir los siguientes pasos:

1-En nuestro lienzo de trabajo damos clic en la pestaña del menú del lienzo Open para cargar el archivo.

Imagen 2 : Lienzo de Trabajo 

2-Luego de hacer clic en la pestaña Open , se presentara un cuadro modal para que seleccionemos el archivo svg de nuestro directorio y un botón de Subir para cargar la imagen.

Imagen 3: Cuadro modal Cargar SVG.

3-Finalmente hacemos clic en el botón Subir para agregar al lienzo la imagen SVG.

Imagen 4:Imagen SVG añadida al Lienzo.