lunes, 25 de enero de 2016

Semana del 18-24 de Enero






Implementación de  Guardar , Modificar y Consultar en el proyecto 


WORKAREA

En la página del workarea se habilito que el usuario pueda guardar la imagen que crea  dando clic en la pestaña del menú "Save".


Para que el usuario pueda guardar la imagen , deberá llenar los siguientes campos en el modal tales como : el nombre del archivo y la descripción. 
Si en caso el usuario no llena esos campos al hacer clic en guardar el sitio genera una alerta donde se le indicara que no puede guardar la imagen porque le faltan datos.







PERFIL

En la página perfil se habilito la opción para que el usuario cuando inicie sesión puede editar sus datos personales . Para eso se creo el view editarDatosPersona , en el cuál se le envía al view el nombre y el apellido a ser reemplazado y se le hace un update.

def editarDatosPersona(request):
    if request.method == 'POST':
        nombre = request.POST.get('nombre', None)
        apellido = request.POST.get('apellido', None)
    if nombre is None:
        return HttpResponseBadRequest()
    else :
        from django.contrib.auth.models import User
        u = User.objects.get(username=request.user.username)
        u.first_name = nombre
        u.last_name= apellido
        u.save()
        return HttpResponse()


También en la pagina perfil se habilito el shared para compartir las imágenes svg creadas por el usuario.Usando el modal de Shared.
En el , el usuario debera seleccionar el nombre del usuario a quien va a compartir la imagen, que permiso le va a dar y que imagen va a compartir .

Si todo se realiza con éxito , cuando el usuario al que se le compartió la imagen deberá aparecerle en su carrusel de imágenes compartidas la lista de imágenes compartidas actualizada.



Finalmente el usuario en la página de perfil se le mostrara sus dos caruseles con las imagenes que el creo y las imágenes que le han compartido.
El código para las imágenes compartidas es el siguiente:

def obtenerImgCompartidas(request):
    if request.method == 'GET':
        lst_imgc = ImgCompartidas.objects.filter(id_usdest=request.user.username)
        listimg = []
        for img in lst_imgc:
            idi = img.id_imagen
            imgu = Imagen.objects.get(idimagen=idi)
            listimg.append(imgu)
            response = render_to_response(
        'json/imgshared.json',
        {'imagenes': listimg}, #mismo etiqueta en el json
        context_instance=RequestContext(request)
            )
    response['Content-Type'] = 'application/json; charset=utf-8'
    response['Cache-Control'] = 'no-cache'
    return response








domingo, 17 de enero de 2016

Semana del 11 al 17 de Enero





Avance del Proyecto

En este entrega de avance del proyecto se hizo lo siguiente :
-Consultar con la base de datos las imagenes svg .
-El modelo E-R .
-Autenticación con Espol.

y en general pulir ciertas cosas que teniamos error o que no habiamos completado.


1- Atenticación con Espol


Para hacer login en la pagina se debe hacer clic en la pestaña del menu del index.

Llenar con su usuario de espol y su clave para poder iniciar sesión.


El código que se creo para hacer eso fue el siguiente.

def login(request):
    if request.method == 'POST':
        try:
            user = request.POST['user'].strip()
            pwd = request.POST['pwd'].strip()
        except:
            return HttpResponseBadRequest()
        from django.contrib.auth import authenticate, login
        auth = authenticate(username = user , password = pwd)
        if auth is not None:
           login(request, auth)
           return HttpResponse()
        else:
            url = 'http://ws.espol.edu.ec/saac/wsandroid.asmx?WSDL' #http://ws.espol.edu.ec/saac/wsandroid.asmx?WSDL
            imp = Import('http://www.w3.org/2001/XMLSchema')
            imp.filter.add('http://tempuri.org/')
            doctor = ImportDoctor(imp)
            client = Client(url, doctor=doctor)
            auth = client.service.autenticacion(user,pwd)
            if auth == True:
                auth = User.objects.create_user(username=user, password=pwd)
                auth.save()
                auth = authenticate(username = user , password = pwd)
                login(request, auth)
                return HttpResponse()
            else:
                return HttpResponseBadRequest()
    else:
        return HttpResponseBadRequest()

Tambien se creo el codigo para hacer AutoLogOut  para que despues de unos minutos que el usuario no ha usado la pagina , la pagina no este disponible.

2-Consultar las imagenes SVG de la base .

Desde el workarea se puede cargar la imagen .
De la siguiente manera .








En la pestaña "Open" del menú del workarea se hace clic  y se abrirá un modal para que el usuario pueda subir el archivo a la pagina.
En este caso solo se carga una imagen quemada del usuario de la base  y luego esa imagen SVG es presentada en el lienzo de la Hoja 1.




3- Modelo E-R
Se crearon para el proyecto 3 tablas : Imagen para la almacenar toda la información de la imagen svg que crea el usuario, Img_Compartidas que es la tabla para almacenar los datos de que imagen se compartió con cual usuario y la tabla persona para guardar la información de la persona , ademas de las tablas que django utiliza para trabajar.El modelo E-R es el siguiente: 





lunes, 11 de enero de 2016

Semana del 4-10 Enero



Migración del Sitio - Django

En la semana del 29- 3 Enero solo se vio documentación para poder realizar la migración de lo que ya teníamos en el proyecto al framework que seleccionamos (Django). Por lo que a partir del Lunes 4 de Enero se inicio  la transición.

Las paginas mas utilizadas como guías fueron :

1-https://djangogirls.org/
2-https://code.djangoproject.com/wiki/CookBook(Pagina Oficial de Django)
3-https://docs.djangoproject.com/es/1.9/intro/tutorial01/
4-http://www.effectivedjango.com/tutorial/authzn.html (Ver la Autenticación)
5-http://www.django-rest-framework.org/tutorial/quickstart/
6-http://librosweb.es/libro/django_1_0/


Esas fueron algunos de los link de las paginas webs que encontramos para ayudarnos a ver como trabajaba django con el MVC , que en realidad el trabaja con el patrón de diseño MTV que se parece mucho.

Antes de comenzar a trabajar con el proyecto se tuvo que instalar :

1- Python 2.7 ( Utilice el Python 2.7.10 para 64 bits)
 El instalador se lo encuentra en la pagina oficial de Python .(https://www.python.org/downloads/release/python-2710/)

2- Pip en la consola del cmd . Se escribió el siguiente comando.
python -m pip install -U pip
Fuente: https://pip.pypa.io/en/stable/installing/

3- Suds en la consola del cmd. Se escribo el siguiente comando.
pip install suds
4- Atom. Un  nuevo editor  y lo descarge de su pagina oficial https://atom.io/.

5-Mysql Connector .Para poder hacer la conexión con la base de datos.

Fuente : https://dev.mysql.com/downloads/connector/python/

Se edito el setting.py para agregar en la parte de database mysql , luego en el archivo view.py se agrego lo siguiente:

//Código de view.py  para redireccionar a las paginas del proyecto : index.html , workarea.html ,y perfil.html

def home(request):
    return render(request,'index.html',{})

def perfil(request):
    return render(request,'perfil.html',{})

def workarea(request):
    return render(request,'workarea.html',{})

y en los templates se agrega {% load staticfiles %} para poder cargar todas las imágenes del proyecto.

miércoles, 23 de diciembre de 2015

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




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


domingo, 13 de diciembre de 2015

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.

sábado, 28 de noviembre de 2015

Semana 23-29 Noviembre


Implementación de BootStrap, JQuery, CSS, HTML para el Proyecto


Esta semana se hizo la revisión del prototipado que se realizo la semana pasada para poder hacer el diseño de las paginas.

Las paginas que me encarge del proyecto fueron la pagina de Inicio y la pagina de Perfil  de Usuario.

Las paginas de modeladores online fueron fuente de inspiración en la creación de las mismas , estas fueron:
-LucidChart
-Cacoo
-Creately

Para hacer el diseño utilice la pagina de referencia del curso que es la  http://www.w3schools.com/ para hacer el maquetado y también consulte la pagina http://www.quackit.com/ que tiene ejemplos de componentes que se pueden añadir a la página.

Para agregar  componentes como el carrusel entre otros , busque paginas de templates que implementaban bootstrap.

Las que mas visite fueron las siguientes:

*http://bootsnipp.com/-Para hacer los sliders y el footer para las redes sociales.

*https://bootstrapbay.com/ -Header y consulta en general.

*http://www.bootply.com/-Labels , entre otros y CSS.

También visité páginas que combinaban bootstrap con jquery , Jqueryrain.com fue una de ellas.


Pagina de Inicio



Imagen 1: Página de Inicio(Nav-Bar ScrollSpy ;  Header;  divs; Labels; Botones de Login - Sign Up)




Imagen 2 : Página de Inicio (Carrosel ;  Contacts-Cards)

Pagina  Perfil-Usuario


Imagen 3: Página Perfil-Usuario (Estructura de la Página - Sección : Información Personal ,  Documentos Compartidos ,  Documentos Creados )