miércoles, 17 de noviembre de 2010

Proyecto Final: Presentación

Hola compañeros! En mi proyecto final decidí hacerlo en python en Google Apps (aunque también cree una liga para entrar por medio de facebook).



Se trata de una pagina de administración de tareas en donde al ingresar con tu cuenta de google puedes crear una pequeña lista de tareas agregando emoticones, todo esto en
la nube, ya que puedes acceder a la lista en tu computadora de tu casa, o en las de la escuela incluso también en un celular, siempre y cuando tengas Internet.


Al principio podemos ver un cuadro de texto en donde escribimos la tarea, después al dar guardar, ya hemos creado nuestra lista, para borrar simplemente le das a la x que viene de lado de tu tarea.


implementación en código.

Main.py
#!/usr/bin/env python
import os
import cgi
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template
from google.appengine.ext import db
import facebook
from facebook import FacebookError

_FbApiKey = '*****'
_FbSecret = '*****'

class Tareita(db.Model):
      autor = db.UserProperty()
      escrito=db.StringProperty()
      termina = db.BooleanProperty()
      
class Principal(webapp.RequestHandler):
    def get(self):
        user = users.get_current_user()
        nickname = user.nickname()
        url = users.create_logout_url(self.request.uri)
        url_linktext = 'Salir'
        tareitas = Tareita.all()
        tareitas.filter("autor =", users.get_current_user())        
        template_values = {'nickname': nickname, 'tareitas': tareitas,'url': url, 'url_linktext': url_linktext,}       
        path = os.path.join(os.path.dirname(__file__), 'index.html')
        self.response.out.write(template.render(path, template_values))  
                        
    def post(self):
        self.response.out.write(self.request.get("escrito"));        
        tareita = Tareita()
        tareita.autor = users.get_current_user()
        tareita.escrito = self.request.get("escrito")
        tareita.termina = False
        tareita.put()
        self.redirect('/')

class borra(webapp.RequestHandler):
    def get(self):
        recoge=cgi.escape(self.request.get('escrito'))
        tareita=db.GqlQuery("select * from Tareita where escrito=:1",recoge)
        usu=tareita.fetch(1)
        if len(usu)>0:
            usu[0].delete()
        self.redirect("/")
                                   
def main():
    application = webapp.WSGIApplication([('/', Principal),
                                            ('/borra', borra),],
                                         debug=True)
    util.run_wsgi_app(application)


if __name__ == '__main__':
    main()


El codigo de python lo que hace es almacenar los datos que se ingrese en una clase de base de datos Tareita, los muestra, los borra segun sea el caso, el self.redirect('/') hace que no tengamos que abrir otra ventana si no que en una misma podamos borrar y crear nuevas tareas, se agrega un path que manda a escribir los datos que se pidan en el html estatico que esta mas abajo.

app.yaml
----------------------------------
application: robertohelloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /stylesheets
static_dir: stylesheets

- url: .*
script: main.py
login: required
-----------------------------------
Este archivo que se necesita, simplemente ponemos el script que necesitamos y en donde se va a ejecutar en este caso siempre va a ser en index, le puse que se requiera el acceso por medio de la cuenta de google para así poder filtrar mediante el código python, las tareas que sean solamente del usuario y el mismo las vea, nadie mas.

<html>
  <head>
     <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
  </head>
<body>
  <div id="reco">
     <h1>Administraci&oacute;n de tareas</h1>
  </div><br><br>
<h2>Hola!, {{nickname}}</h2>

<div id="forma"><br>
Escribe tu nueva tarea:<br><br>
<input type="submit" value="  &#9734;  " id="pica"/>
<input type="submit" value="  &#9825;  " id="pica1"/>
<input type="submit" value="  &#9786;  " id="pica2"/>
<input type="submit" value="  &#9787;  " id="pica3"/>
<input type="submit" value="  &#9998;  " id="pica4"/>
<input type="submit" value="  &#9836;  "  id="pica5"/><br><br>
<input type="submit" value=" &#10083;·•&#9679; &#10168; " id="pica6"/>
<input type="submit" value=" &#9472;&#9552;&#9734; &#9734;&#9552;&#9472; " id="pica7"/> 
<input type="submit" value=" &#9679;&#65087;&#9679; " id="pica8"/> 
<input type="submit" value=" &#9679;&#65103;&#9679; " id="pica10"/>
 <input type="submit" value=" &#9584;&#9734;&#9582; " id="pica9"/><br><br> 
 
<form action="" method="post">
<input type="text" name="escrito" maxlength="45" id="escri"/><br><br>
<input type="submit" value="Guardar"/>
</form>

<script> 
var ta=document.getElementById("escri"); 
document.getElementById("pica").onclick=function() { 
    ta.value+='&#9734;'; 
} 
var ta=document.getElementById("escri"); 
document.getElementById("pica1").onclick=function() { 
    ta.value+='&#9825;'; 
} 
var ta=document.getElementById("escri"); 
document.getElementById("pica2").onclick=function() { 
    ta.value+='&#9786;'; 
} 
var ta=document.getElementById("escri"); 
document.getElementById("pica3").onclick=function() { 
    ta.value+='&#9787;'; 
} 
var ta=document.getElementById("escri"); 
document.getElementById("pica4").onclick=function() { 
    ta.value+='&#9998;'; 
} 
var ta=document.getElementById("escri"); 
document.getElementById("pica5").onclick=function() { 
    ta.value+='&#9836;'; 
} 
var ta=document.getElementById("escri"); 
document.getElementById("pica6").onclick=function() { 
    ta.value+='&#10083;·•&#9679; &#10168;'; 
}
var ta=document.getElementById("escri"); 
document.getElementById("pica7").onclick=function() { 
    ta.value+='&#9472;&#9552;&#9734;&#9734;&#9552;&#9472;'; 
}
var ta=document.getElementById("escri"); 
document.getElementById("pica8").onclick=function() { 
    ta.value+='&#9679;&#65087;&#9679;'; 
}
var ta=document.getElementById("escri"); 
document.getElementById("pica9").onclick=function() { 
    ta.value+='&#9584;&#9734;&#9582;'; 
}
var ta=document.getElementById("escri"); 
document.getElementById("pica10").onclick=function() { 
    ta.value+='&#9679;&#65103;&#9679;'; 
} 
</script>
</div><br><br><br>

<h3>Lista de tareas:</h3><br>
<div id="inst"><br><br>
{% for tareita in tareitas %}
       <a href="borra?escrito={{ tareita.escrito }}">×</a>    {{ tareita.escrito }}<br><br>
{% endfor %}

<br><br>
</div>
<br><br><br>
<div id="adv"><br>
       <a href="{{ url }}">{{ url_linktext }}</a> <br><br>
</div>


   </body>
</html>
En el index.html le agregué un varios scripts que son los que hacen que se pueda poner los emoticones en la caja de texto, también se utiliza un for para listar todas las tareitas que se escriben con una x que es la que manda a llamar a la clase borra para realizar dicha acción.


body {
  font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  background-image: url(lateral.jpg); 
  background-attachment: fixed; 
  background-repeat: repeat;
  text-align: justify;
  background-color: #DDDDDD;
}

#forma {
    color: black;
    padding: 0px;
    margin-right: 25px;
    margin-left: 25px;
    text-align: center;
    background-color: #F7BE81;
    opacity: 0.9;
    border: 12px solid #fff;
    position: center;
}

h1 {
    color:#81F7F3;
    text-align: center;
}

h2 {
    color:#CEF6CE;
    text-align: center;
}

h3 {
    color:#CEF6CE;
    text-align: center;
}

#adv {
    color: white;
    text-align: center;
    margin-right: 250px;
    margin-left: 250px;
    background-color: #C0690C;
    background-repeat: no-repeat;
    opacity: 0.9;
    border: 12px solid #fff;
    position: center;
}

#barra{
width:auto;
padding-top: 0px;
height:115px;
background:url(bannernew.jpg) left top repeat-x;
padding-top: 0em; 
border: 0; 

margin: 0; 
 } 


#inst {
    color: white;
    text-align: center;
    background-color: #088A85;
    background-repeat: no-repeat;
    margin-right: 100px;
    margin-left: 100px;
    position: center;
    opacity: 0.9;
    border: 12px solid #fff;
}

#reco {
        color: white;
        text-align: center;
        background-color: #3B240B;
        background-repeat: no-repeat;
        opacity: 0.9;
 border: 12px solid #3B240B;
        position: center;
}

#cuestion {
color: #fff;
 padding: 40px;
 margin-right: 120px;
 margin-left: 120px;
 #text-align: center;
        background-color: #3B240B;
 opacity: 0.9;
 border: 12px solid #FFF;
        position: center;

}
El CSS es el mismo de mi proyecto anterior ;) solamente que ahora el fondo corté un pedazo y que se repitiera la imagen para optimizar


Espero que la aplicación sea de su agrado, para finalizar les dejo las ligas a mi proyecto.
http://robertohelloworld.appspot.com/ directamente en Google Apps
http://apps.facebook.com/tareitas/


Para descargar todos los archivos de la aplicación y lo corras en tu servidor da clic aqui

jueves, 11 de noviembre de 2010

Caso de estudio: Usabilidad Web

SIASE UANL
Visibilidad del estatus del sistema
No muestra el mapa del sitio, es decir si estamos en alguna apartado de la página no dice de que pestaña viene.
Por ejemplo en esta página, para acceder al recibo del alumno seguimos los siguientes pasos Principal>Servicios en linea>Siase>Entra>Escuela>Aviso de pago, y no muestra la ubicación después de entrar al SIASE:


Control y libertad del sistema
Por ejemplo cuando ingresamos al sistema, ingresas a una carrera y no puedes regresar a la página donde te muestra el historial en la universidad, si no que tienes que salir del sistema y volver a entrar.
Flexibilidad y eficiencia de uso

En la página principal de la universidad deberia de venir muy visible los apartados más visitados por los usuarios sin embargo algunas cosas se dificultan para encontrar como el SIASE.


Información necesaria
En la página del SIASE hay algunas opciones en las que podemos entrar, y ahora para nosotros no tienen ninguna utilidad, por ejemplo, esta activa la opcion de Servicio Social para alumnos de primer, segundo hasta cuarto semestre cuando el semestre válido para hacer eso es apartir de quinto, también aparece el formato de entrega de credencial cuando eso paso hace un año, encuestas Dell a además el menu esta lleno de opciones parecidas que se podrian agrupar, por ejemplo kardex y calificaciones, avisos de pago y cuota escolar de rectoria.


Ayudar a los usuarios a reconocer errores
No cuenta con esta caracteristica la página ya que aveces hay una ventana que muestra un error con un boton de aceptar, aceptas y luego vuelve a salir la ventana, asi hasta que mejor se tiene que cerrar el navegador.
Ayuda y documentación

Deberian agregar una opción de ayuda con documentación adecuada sobre todo para los alumnos de nuevo ingreso, además le falta un cuadro de texto para que el alumno pueda sugerir mejoras, hacer comentarios, quejas, etc.
Esta es la lista de reglas que calificamos en la página:
Blogs de mis compañeros:

miércoles, 13 de octubre de 2010

Proyecto de Medio Curso

Aquí les dejo el video de mi proyecto en donde explico lo que hace y como funciona.




Para ver el video haz clic aqui.
Para descargar los archivos de mi proyecto has clic aqui. (estan en .zip)

domingo, 5 de septiembre de 2010

Servidor web

Hola, es esta entrada publicaré acerca de los servidores web.

¿Que es un servidor web?
Podemos decir que un servidor web es un programa que se esta ejecutando esperando peticiones que le hace un cliente usuario de internet, entonces, el servidor web contesta todas esas peticiones entregando información de una pagina web, hipertextos, figuras, botones etc... implementando el protocolo HTTP, lo podemos encontrar en la capa de aplicación del modelo OSI.




Cabe recalcar que la palabra servidor se le llama al programa como a la maquina que ejecuta este programa.


Por ejemplo el navegador hace una petición al servidor y este le contesta con lo que se le pidió esto es como cuando nosotros ingresamos a la pagina de la universidad, ponemos www.uanl.mx en el navegador y el servidor nos manda a esa dirección con código HTML, que se interpreta y lo vemos en nuestra pantalla.


Entre algunos servidores podemos encontrar a Apache, que es uno de los mas utilizados, con gran reputación de estabilidad ya que es personalizable, permite hacer un servidor según nuestras necesidades implementando lo mas nuevo en protocolos, hecho en lenguaje C, corre rápido consumiendo menos recursos que otros y puede utilizarse en múltiplos sistemas operativos.
 

Puedes descargar el código de Apache (que se encuentra en su sitio web) ya que es open-source.

Espero que mi explicación les sirva, si tienen algún comentario acerca de esta entrada, espero me digan ya que estoy abierto a cualquier error.

Sistema RBG hexadecimal

En esta entrada publicaré acerca del sistema RGB (Red Green Blue) hexadecimal el cual es el metodo que mas se utiliza para indicar colores en un sitio web.



Como su nombre lo dice, este sistema utiliza los numeros base 16, o sea, hexadecimal esto quiere decir que, es un sistema alfanumerico ya que se utilizan: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Entonces, este sistema lo que hace es recoger 2 digitos hexadecimales para cada intensidad de colores primarios Red Green Blue esto quiere decir entre 00 y FF entonces entre el valor mas alto, son mas claros los colores.

por ejemplo:

Red = 00 Green = 00 Blue = 00 esta a lo mas minimo entonces el color que obtendremos es el negro

Red = FF Green = FF Blue = FF  esta en lo maximo entonces el color que obtendremos es el blanco

Red = FF Green = 00 Blue = 00 esta en lo maximo solamente en red por lo tanto es rojo

Red = 00 Green = FF Blue = 00 esta en lo maximo solamente en green por lo tanto es verde

Red = 00 Green = 00 Blue = FF esta en lo maximo solamente en blue por lo tanto es azul.

Red = FF Green = FF Blue =00 rojo y verde es amarillo.

Red = 00 Green = FF Blue = FF  azul y verde es cyan

Red = FF Green = 00 Blue = FF rojo y azul es magneta


Entonces, cuando los declaramos en un archivo html con css, podemos utilizarlo algo asi.

body {
background-color: #000000; 
}
 
h1 { 
color #FFFFFF;
 


Pero en el ejemplo anterior, css nos permite comprimir los valores si por ejemplo tenemos sus componentes iguales de dos en dos. esto es
#000 o #FFF.

Se pueden escribir con mayusculas o minusculas, pero es preferible escribirlos en mayusculas para tener una mejor presentación al entregar el codigo.

Cabe recalcar que no es la unica forma de declarar los colores en css, existen cinco formas: por clave, color del sistema, el RGB numerico, porcentual y hexadecimal.

Si quieren saber un poco mas les dejo este link.

Tambien les dejo una pagina con la tabla de colores en hexadecimal.

Espero que mi explicación les sirva, si tienen algún comentario acerca de esta entrada, espero me digan ya que estoy abierto a cualquier error.


miércoles, 18 de agosto de 2010

Codigo java Casino

Hola!, en esta entrada publicaré un codigo en java de un juego de casino.
 

import java.util.*; 

public class Casino {
    
    public static final Random RNG = new Random();

    public static void main(String[] args){
    Scanner sc = new Scanner(System.in);
    Scanner op = new Scanner(System.in);
    int juego, puntos;
    int tabla[][] = new int[3][3];
    int opcion = 1;
    int i, j;

    System.out.println("Hola!, Bienvenido a al juego Ruina\n");
    System.out.println("\t\tIngrese los puntos que desea apostar\n");
    System.out.println("\t\tCada juego apostara 10 puntos de los que ingreso\n");
    System.out.println("\t\tSi gana horizontal, vertical o diagonal usted\n");
    System.out.println("\t\tva ganar 5 puntos, de lo contrario\n");
    System.out.println("\t\tperdera 10 puntos\n");
    System.out.println("\t\tSuerte!!!\n");
    puntos = sc.nextInt();//lee los puntos o creditos
    
    while(opcion != 0 && puntos > 9) { //si se quiere salir o ya no tiene suficientes puntos
        puntos = puntos - 10;
        for(i=0; i<3;i++) { //añade los valores random
        for(j=0;j<3;j++) {
            tabla[i][j]= 1 + Casino.RNG.nextInt(3);
    }
        }


        for(i=0;i<3;i++){ //imprime en terminal la tabla
        System.out.print("\t\t\t\t|---|---|---|\n");
        System.out.print("\t\t\t\t");
           for(j=0;j<3;j++){
           System.out.print("|  " + tabla[i][j]);
           }
           System.out.print("|\n");
        }
        System.out.print("\t\t\t\t|---|---|---|\n\n\n");    

    if(tabla[0][0]==tabla[1][0]&&tabla[1][0]==tabla[2][0]){ //verifica si gana o no
          System.out.println("\t\tHaz ganado 5 puntos!\n");
          puntos = puntos + 5;
        } 
        if(tabla[0][1]==tabla[1][1]&&tabla[1][1]==tabla[2][1]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        } 
        if(tabla[0][2]==tabla[1][2]&&tabla[1][2]==tabla[2][2]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        } 
        if(tabla[0][0]==tabla[0][1]&&tabla[0][1]==tabla[0][2]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        } 
        if(tabla[1][0]==tabla[1][1]&&tabla[1][1]==tabla[1][2]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        } 
        if(tabla[2][0]==tabla[2][1]&&tabla[2][1]==tabla[2][2]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        }
        if(tabla[0][0]==tabla[1][1]&&tabla[1][1]==tabla[2][2]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        }
        if(tabla[2][0]==tabla[1][1]&&tabla[1][1]==tabla[0][2]){
           System.out.println("\t\tHaz ganado 5 puntos!\n");
           puntos = puntos + 5;
        }
            
        if(puntos<=0){
           System.out.println("Lo siento, ya no hay credito, Hasta luego!\n");
           System.out.println("Teclea cero para salir\n");
        }else {
              System.out.println("\n\n\tLos puntos que llevas son ->" + puntos);                           
              System.out.println("\n\n\nSi no deseas seguir jugando teclea 0 (cero), sino teclea 1(uno)");
              opcion = op.nextInt();        
         }
       }
    }                 
 } 

Aqui les dejo el enlace para descargarlo

Les dejo una captura de imagen para que vean como funciona..

Espero que mi explicación les sirva, si tienen algún comentario acerca de esta entrada, espero me digan ya que estoy abierto a cualquier error.

Roberto:)

Clase 12 de ago

Hola!, en esta entrada publicaré unos links el primero es del código de piedra papel o tijera en java que lo hicimos entre Cecilia Urbina y yo la clase pasada.

Piedra papel o tijera 

Y Este otro link, es un programa que imprime simplemente la serio fibo.

Serie fibo

Esperamos que les sirva

Roberto:)

miércoles, 11 de agosto de 2010

Modelo OSI

En esta entrada publicaré acerca del modelo OSI, del cual no lo conocia y decidi informarme sobre lo que se trata.

¿Que es un modelo OSI?
Es el modelo de referencia de interconexión de sistemas abiertos, por sus siglas en ingles Open System Interconection, es el que admite que las computadoras se conecten e operen, fue hecho por la ISO que es la que se encarga de los estándares internacionales, para poner un orden entre las computadoras, al momento de trasmitir los datos.

Este modelo cuenta con 7 niveles o capas:


Clic para agrandar


En esta entrada, resumiré a lo que interviene cada capa.

Capa de aplicación
Es la capa que esta mas próxima al usuario, la diferencia de esta capa es que, no da servicio a otro nivel, estas son aplicaciones de red que usamos para trasladar las aplicaciones del usuario, podemos decir algunos ejemplos como FTP, Mail o Telnet, entonces estos son los programas que nosotros vemos.

Capa de presentación
Esta capa es  la manera en que los datos se interpretan en una computadora, como sabemos es tratada de forma binaria, entonses en la capa presentación se hacen adaptaciones para que se presente de manera mas accesible y fácil, tenemos códigos como ASCII y EBCDIC, que procesa los datos, en esta capa también esta los OS como DOS y UNIX.

Capa de Sesión
Es la capa encargada de crear servicios de conexiones, o sea, esto es como iniciar sesión por medio de un login para obtener recursos, administra la sesión, y la cerramos con un logout, por ejemplo tenemos NetBIOS, como protocolo de esta capa, también el RPC.

Capa de Transporte
En esta capa es en donde se asegura que cuando se entable una comunicación, sea buena y proteger todos los datos enviados, da aviso a las demás capas que es de calidad, utilizando controles de flujo, números de secuencia y reconocimientos, los protocolos TCP y UDP se encuentran en esta capa.

Capa de red.
En esta capa su principal función es hacer que lleguen los datos, utilizando dispositivos llamados routers, que se encuentran en esta capa, al igual que los firewalls, entonces podemos decir que se trata de que aquí se le da dirección por medio de IP la ruta que debe seguir.

Capa de Datos.
En esta capa de datos también llamada frame, o marco, es en donde se transfiere la información en grupos de bits, creando paquetes, preparándolos en forma binaria con su protocolo que utilizan, solo se trata con direcciones MAC para el uso de LAN y HDLC o SDLC para WAN.

Capa Físico
Este nivel es donde se regula las propiedades físicas, mecánicas y eléctricas, se encuentran los reglamentos como RS-232 o V.24, así como los tipos de conexiones como Coaxial, RJ-45, entre otros, también están todos los medios de transmisión para redes LAN, STP, fibra óptica entre otros, podemos decir que esta capa trasmite la información sobre un medio físico.

En esta imagen se resume en un ejemplo lo que es el modelo OSI.
Clic para agrandar


Y para finalizar les pongo un par de vídeos que nos puso la maestra Laura del Bosque, que explica de forma animada como funciona la red.






Son un poco viejos pero están interesantes ;)

Espero que mi explicación les sirva, si tienen algún comentario acerca de esta entrada, espero me digan ya que estoy abierto a cualquier error.

Roberto:)