Para el entrega final se debe proveer la opción de compartir en al menos 3 redes sociales; para lo cual preferi que sean google+, twitter, facebook

Nota: en cada una de estas redes hay que proveer una dirección url; con la que se accede y la que establecimos como tal fue: http://localhost:8000/

imagen de la aplicacion web los iconos que se encuentran en el footer permitiran compartir la pagina.

compartir con google+

compartir contenido en twitter

compartir contenido con facebook

NOTA: en facebook se prohibe compartir una url de localhost,  ya que nos refleja un mensaje de que la dirección provee información perjudicial así que como una dirección alterna compartimos el repositorio del grupo hecho en github

Durante las configuraciones sugeridas en la documentación. de cada uno de los componentes proporcionadas, en las paginas web tales como:

• python.org
• djangoproject.com
• mysql.com/downloads/

Surgió un error y no puedo configurar el conector de MySQL db; a pesar de que he instalado todos los componentes al igual que una de mis compañeras, pero a ella no le resulta este error.

INCONVENIENTE: Al querer iniciar algún proyecto de prueba, en la consola de comando resulta un error: No module named MySQLdb

Como decisión unánime se llego al acuerdo de utilizar django como framework web, para el cual se utiliza el lenguaje de programación  python, como base de datos utilizaremos sql lite.

Para lo cual, individualmente se revisa información tal como la documentación y formas de instalación.

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

Realice Algunos cambios a la pagina que muestra  la información del usuario y los documentos que ha realizado, denominada perfil.HTML

Principalmente añadir la botones que direccionen a la pagina para realizar los diagramas, tal como podrá observar en la figura:

Fig. 1. – vista previa de la pagina perfil.html, sin modificaciones

Fig 2.- presenta nuevo botón para crear un nuevo diagrama, este se redirige a la pagina workArea.HTML

Fig 3.- el código respectivo para el botón new Diagram

Fig 4.- imagen final de la pagina perfil.html

++ Para el cual se uso como referencia un ejemplo provisto por la w3school en: icon plus

Se reporta un inconveniente: al cargar la pagina workArea.HTML  desde los nuevos botones, se demora en cargar la página y ésta se presenta distorsionada, pero se arregla al presionar F5

 Imagen distorsionada

 Imagen luego de refrescar la pantalla

Estuve observando lo que debe tener un inicio de sesión, campos proporcionados ya sea para iniciar sesión o registrarse; además de ver como es la iteración al momento de registrarse por medio de redes sociales u correo electrónico.

Me llamo mucho la atención el inicio de sesión de la pagina http://edufindme.com/ ya que además de todas las características comúnmente encontradas posee un efecto o transición en el mismo modal fade para cuando es la opción de registrar un nuevo usuario.

Por consiguiente, siguiendo este modelo o prototipo de inicio de sesión, realice un modulo que se sobreponga a la pagina principal y se puedan observar las opciones para inicio de sesión respectivamente.

Posteriormente agregue los correctos iconos y botones de tipo submit, para poder enviar el formulario, una vez que estén llenos todos los campos obligatorios.

Las líneas de código se encuentran después de la sección footer del archivo index.HTML

Para poder realizar este avance consulte:

[1] tipos de botones

[2] tipo de formulario

[3] uso de botones de tipo submit

Después, de que todas terminamos de realizar las visualizaciones, de la pagina que nos correspondía, realicé el documento  en word, que enviamos como respuesta a la respectiva tarea. En dicho documento explico que características contiene cada imagen, es decir, la respectiva funcionalidad de cada uno de los elementos dispuestos en el documento.