23 noviembre 2010

Detrás de cámaras - Inbox

Para los que llegaron a ver el vídeo de presentación de mi Proyecto de Medio Curso y se preguntaron como hice muchas cosas, bueno aquí les mostraré con lo que empece en mi código, no fue fácil, en ese momento trabaje mucho a prueba y error, dado a mi poca experiencia, tenía que buscar muy buenos tutoriales para lograr mi objetivo.

Enseguida muestro partes de mi código para que vean parte de su funcionamiento.

El siguiente fragmento de mi código es del archivo index.html:
<h2>Inicio de sesi&oacute;n</h2>
<form name="acceso" action="cgi-bin/home.py" method="post">
 <p>
  Cuenta:<br/>
  <input class="box" type="text" name="usuario" maxlength="24" id="foco"/>
  <br/>
  Contrase&ntilde;a:<br/>
  <input class="box" type="password" name="contra" maxlength="10"/>
 </p>
 <p>
  <input class="boton" type="submit" value="Entrar"/>
 </p>
</form>

Como pueden observar es un formulario donde pido que se ingrese el Usuario y su respectiva Contraseña. Estos datos una vez ingresados y después de haber presionado el botón Entrar son enviados a la aplicación home.py, que es ejecutada mediante el CGI.


Fragmento del archivo home.py:
#!/usr/bin/python

import cgi

def main():

    entrada = cgi.FieldStorage()
    if entrada.has_key("usuario") and entrada.has_key("contra"):
 arch = open("usuarios.dat", "r")
 for line in arch:
     linea = line.split("~")
     user = linea[0]
     admin = linea[1]
     name = linea[2]
     lastn = linea[3]
     country = linea[4]
     if user == entrada["usuario"].value and admin == entrada["contra"].value:
  bandera = 1
  break
     else:
  bandera = 0
 arch.close()
    else:
 bandera = 0

    if bandera == 1:
        [se imprime una página html con el contenido del usuario]
    if bandera == 0:
        [se imprime la misma página de index, pero con un mensaje de error]

Aquí es donde se reciben los datos enviados desde la página de inicio. Primero se verifica que los dos campos han sido llenados, sino se cumple esa condición a la variable bandera le coloco el valor de 0, lo cual imprimiría el mismo index, pero con un mensaje de error.

En caso de que si fueron llenados los dos campos de datos, se abre el archivo de usuarios.dat:
admin~00110011~Administrador~Principal~UBUNTU~
hugo_donald~12345678~Hugo~Donald~MEXICO~
paco_donald~1445566~Paco~Donald~EUA~
luis_donald~123abcd~Luis~Donald~ARGENTINA~

El archivo lo abro solo con el fin de lectura, para leer linea por linea y verificar si existe el usuario y si es así también verifica si coincide su contraseña. Como en el archivo tengo por cada línea los datos del usuario separados con el carácter "~", antes de la condición que verifica el usuario y contraseña, almaceno cada dato del usuario en una variable, para así comparar esta variable con el dato recibido del formulario.

Si la condición se cumple, esto es que el usuario y contraseña ingresados en el formulario, coinciden con datos de alguno de los usuarios que se tienen registrados, la variable bandera toma el valor de 1, lo cual hará que se imprima la página de home para el usuario, que es aquí donde se muestran sus mensajes nuevos.

22 noviembre 2010

PageRank de Google

PageRank es una marca registrada y patentada por Google que contiene una familia de algoritmos utilizados para asignar de forma numérica la relevancia de las páginas web indexadas por un motor de búsqueda.

El sistema PageRank es utilizado por el popular motor de búsqueda Google para ayudarle a determinar la importancia o relevancia de una página y fue desarrollado por los fundadores de Google, Larry Page y Sergey Brin, en la Universidad de Stanford.

Google es la única empresa abocada a desarrollar el "motor de búsqueda perfecto", definido por su cofundador Larry Page como algo que "comprende exactamente lo que el usuario quiere decir y le entrega exactamente lo que está buscando".

Desde el principio, los programadores de Google reconocieron que, para proporcionar los resultados más rápidos y precisos, era necesaria una nueva configuración de servidores. A diferencia de la mayoría de los motores de búsqueda que emplean un grupo de servidores grandes que suelen ralentizarse cuando procesan picos de carga, Google utiliza equipos conectados para encontrar rápidamente la respuesta a cada consulta. Esa innovación permitió lograr tiempos de respuesta más veloces, mayor escalabilidad y menores costes. Es una idea que otros han copiado desde entonces, mientras que Google sigue puliendo su tecnología interna para hacerla cada vez más eficiente.

El software integrado en la tecnología de búsqueda de Google realiza una serie de cálculos simultáneos en tan sólo una fracción de segundo. Los motores de búsqueda tradicionales se basan, en gran parte, en la frecuencia con que una palabra aparece en una página web. Google, en cambio, emplea la tecnología PageRank para examinar toda la estructura de vínculos de la web y determinar qué páginas son las más importantes.

PageRank realiza un análisis de concordancia de hipertextos para establecer qué páginas son relevantes para la búsqueda específica que se esté procesando. Al combinar la importancia general con la relevancia específica respecto de una consulta en particular, Google puede colocar los resultados más relevantes y fiables en primer lugar.

PageRank realiza una medición objetiva de la importancia que tienen las páginas web. Para ello, resuelve una ecuación que contiene más de 500 millones de variables y 2.000 millones de términos. En lugar de contar los vínculos directos, PageRank interpreta un vínculo de la Página A a la Página B como un voto que recibe la Página B de parte de la Página A. PageRank evalúa, de esa manera, la importancia que tiene una página determinada al contar la cantidad de votos que recibe.

PageRank también considera la importancia de cada página que emite un voto, dado que a los votos procedentes de determinadas páginas se les otorga un valor mayor, incrementando así el valor de la página vinculada. Las páginas importantes reciben una valoración de PageRank más alta y aparecen en la parte superior de los resultados de búsqueda. Los resultados se obtienen sin ningún tipo de participación humana; por este motivo, los usuarios han llegado a confiar en Google como fuente de información objetiva, libre de la manipulación que se genera cuando los sitios pagan por ocupar determinada posición en los resultados.

Por ejemplo en la imagen anterior podemos notar que la página F tiene un PageRank considerable a pesar de que no existe más que una página que tenga algún enlace hacia la misma, pero como E que es la página que contiene este enlace y esta considerado con un PageRank alto, el "voto" emitido hacia F tiene mayor valor.

El motor de búsqueda de Google también analiza el contenido de cada página. Sin embargo, en lugar de explorar simplemente el texto de la página, la tecnología de Google analiza todo el contenido de una página y toma en cuenta también las fuentes, las subdivisiones y la ubicación precisa de cada palabra. Asimismo, Google analiza el contenido de páginas web vecinas para garantizar que los resultados encontrados son los más relevantes para la consulta del usuario.


Entonces como conclusión, una forma para incrementar nuestro PageRank y posicionarnos en las primeras posiciones de resultados de búsqueda, es buscar páginas importantes con un PageRank alto y que pongan enlaces hacia nuestra página.

Posiblemente se te vienen a la mente ideas para hacer trampa, como entrar a foros y poner un enlace a nuestra página, o en los comentarios de páginas pegar nuestro enlace muchas veces, pero lamento decir que Google es listo y tiene tomado en cuenta esto, ya que integro un nuevo valor al atributo rel de la etiqueta <a> que es el nofollow, que los administradores de foros pueden agregar para que cuando un miembro del foro agregue un enlace, este contenga en forma predeterminada este atributo, el cual evita que PageRank lo tome en cuenta. Esto evita este tipo de spam.

Espero les haya sido interesante esta información, y ahora hay que buscar alguna página que desee poner un enlace a nuestro Blog.

Referencia: Googe Corporate

21 noviembre 2010

Usabilidad del sistema SIASE

El sistema SIASE lo usamos muy seguido todos los alumnos de la universidad para realizar muchas acciones diferentes, entre las que están la consulta de horario, ver calificaciones, ver nuestro kardex, pagos, solicitudes de beca, entre otros. Pero desafortunadamente el servicio no es muy bueno, y por eso hacemos una evaluación del servicio.

Para empezar debemos acceder a la página principal de la universidad para encontrar el acceso a este servicio, y nos damos cuenta que no existe ningún acceso directo desde la página principal, debemos ir a la caja desplegable donde se encuentran los demás servicios. Esto debería cambiarse y por ser un servicio que es usado comúnmente por los alumnos debería de estar visible en la página principal.

Visibilidad del estatus del sistema

No se es posible saber si el sistema esta en buen funcionamiento o no, porque no nos muestra ningún mensaje por ningún lado, solo cuando no esta funcionando por completo es cuando aparece un mensaje de mantenimiento, y lo malo es no poder accesar.

Relación del lenguaje usado entre el sistema y el mundo real

En el barra lateral izquierda encontramos en el menú de opciones que el nombre de cada botón esta mal escrito porque le faltan artículos gramaticales, y esto hace parecer que fue "Tarzan" quien los escribió, quiero suponer que si están escritos así fue solo para que los botones no fueran aun más largos.

El control y la libertad del usuario mientras usa el sistema

En las opciones donde es posible hacer cambios significativos a nuestra información si se cuenta con la opción de cancelar, como al modificar nuestros datos personales, si cambiamos alguno de ellos te muestra los botones de Aceptar o Cancelar, esto por si por error tal vez se entro en la sección equivocada.

Consistencia y estándares

Hay muchas de las opciones del menú que son repetitivas y aveces pueden causar confusión, el ejemplo esta en la Solicitud de beca y en Resultado de beca, estas dos opciones deberían de estar conjugadas en una sola.

Prevención de errores

Esto si es un problema grave, porque si estamos llenando alguna encuesta o editando nuestros datos personales y por error hacemos clic en alguna opción del menú, no existe ningún aviso de si realmente se quiere abandonar la acción en curso.

Reconocimiento más que recordar

Cuando seleccionamos una opción, deberíamos de saber exactamente donde nos encontramos, por ejemplo cuando consultamos nuestro horario de clases, seleccionamos la opción en el menú, luego elegimos el semestre y así se nos muestra el horario, pero en alguna parte debería de estar el camino que se siguió para llegar hasta ahí FIME/Horario/Semestre Ago-Dic 2010/.

Flexibilidad y eficiencia en el uso

No hay necesidad en el sistema de que recuerde nuestras opciones más usadas, por el simple motivo de que no hay muchas opciones de donde elegir.

Estética y diseño minimalista

En cuanto a estética me parece muy malas las imágenes que colocan de los escudos y logotipos, ya que estos cuentan con eslogan y no es muy visible por el tamaño y resolución de la imagen. Y en cuanto a diseño minimalista, como ya lo mencione hay opciones que podrían agruparse y así hacer más simple el diseño y no tan redundante.

Ayuda a los usuarios a reconocer, diagnosticar, y recuperarse de errores

Existe un error que cuando dejamos nuestra sesión abierta y nos quedamos en inactividad por más de 15 minutos, aparece un mensaje de error, pero que al dar aceptar se repite una y otra vez, y no nos deja la otra opción más que de cerrar por completo nuestro navegador.

Ayuda y documentación

El sistema no cuenta con ningún botón de ayuda, lo cuál le hace mucha falta.

Nosotros ya tenemos conocimiento de como crear páginas dinámicas y creo que tal vez cuando tengamos más experiencia en cuanto a la creación de este tipo de sistemas, nosotros seamos los que renovemos y mejoremos estos servicios para la universidad.

Teoría de Gestalt y los sitios web

La Teoría de Gestalt es una disciplina psicológica que estudia aspectos de la percepción visual. Aplicar sus descubrimientos es decisivo para obtener buenos resultados en la Web.

El centro de la pantalla ejerce la atracción más poderosa. Los ángulos y los bordes del marco también atraen a los elementos próximos, creando zonas de visión destacadas.
Los principios de la Gestalt se pueden aplicar a los diferentes elementos de interacción hombre-computadora, como sigue a continuación.

Proximidad

El agrupamiento parcial o secuencial de elementos por nuestra mente basado en la distancia. En un diseño de interfaz podríamos aplicar este principio a un grupo de botones que ejecuten comandos similares, o relacionados unos con otro.

En la imagen anterior podemos percibir que la página esta dividida en 3 columnas y cada una de ellas muestra contenido agrupado, pero no existe ninguna linea dibujada que limite el espacio entre columna y columna.

Semejanza

Nuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos.

Ahora notamos los objetos y opciones que pertenecen a la misma categoría, por el simple echo de que tienen una forma similar, basta con ver que tienen forma parecida para saber que son elementos de una misma categoría.

Continuidad

Los detalles que mantienen un patrón o dirección tienden a agruparse juntos, como parte de un modelo. Es decir, percibir elementos continuos aunque estén interrumpidos entre sí. Manejar una buena continuidad en un sitio web, permite que se visualicen mejor los menús y elementos principales del mismo.

Este es buen ejemplo de continuidad porque sus elementos están ordenados en columnas y sabemos que la información esta estructurada hacia abajo.

Cierre

Nuestra mente añade los elementos faltantes para completar una figura. Existe una tendencia innata a concluir las formas y los objetos que no percibimos completos.

Utilizar formas aplicando el principio del cierre en los sitios web, puede permitir resaltar la información más importante del mismo, para que los usuarios accedan con mayor facilidad a ella.

En el caso del logotipo de Ubuntu notamos como estas tres personas se acercan para un abrazo grupal que representa para nosotros el trabajo en equipo, y es ejemplo de cierre porque parece ser un circulo cerrado y es lo que vemos en el primer vistazo.

Relación entre fondo y figura

Afirma que cualquier campo perceptual puede dividirse en figura contra un fondo. La figura se distingue del fondo por características como: tamaño, forma, color, posición, etc. El sistema de ventanas en cascada utiliza la organización figura-fondo para que sea posible distinguir por el usuario que la ventana que resalta más, es la que se encuentra activa actualmente.

Aquí podemos ver que a pesar de que el fondo es llamativo en su color, los botones de redes sociales resaltan sobre este fondo y no se pierden entre el contenido de la página.

Simetría

Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia.

Enlaces: Diseño web

Ejemplo de formulario

Para esta entrada he creado un pequeño formulario que es una encuesta sencilla que solo te pide el nombre, el sexo, y luego te hace dos preguntas, en una de ellas te da las opciones de respuesta en forma de radio botones y en la segunda están las respuestas posibles en una caja desplegable.

<html>
<head>
 <title>Formulario</title>
 <link href="estilo-form.css" rel="stylesheet" type="text/css"/>
</head>
<body onload = "document.forms[0][\'foco\'].focus()">
<div id="entrada">
 <h2>Encuesta</h2>
 <form name="acceso" action="mailto:cuenta@dominio.com" method="post">
 <p>
  Nombre:
  <input class="box" type="text" name="nombre" maxlength="20" id="foco"/><br/>
  <input type="radio" name="sexo" value="Hombre"/>Hombre
  <input type="radio" name="sexo" value="Mujer"/>Mujer
  <br /><br/>
  <b>&#191;Qu&eacute; fruta te gusta m&aacute;s?</b><br />
  <input type="radio" name="fruta" value="Mango"/>Mango<br/>
  <input type="radio" name="fruta" value="Naranja"/>Naranja<br/>
  <input type="radio" name="fruta" value="Manzana"/>Manzana<br/>
  <br />
  <b>&#191;Cu&aacute;l es tu color preferido?</b><br />
  <select name="color">
    <option>Selecciona</option>
    <option value="Azul">Azul</option>
    <option value="Verde">Verde</option>
    <option value="Amarillo">Amarillo</option>
    <option value="Rosa">Rosa</option>
  </select><br />
  <br />
  <input class="boton" type="submit" value="Enviar"/>
 </p>
 </form>
</div>
</body>
</html>

Los datos de la encuesta en este caso como lo observamos dentro de la etiqueta form van dirigidos a una dirección de correo, pero también podríamos mandarlos a un script que los guarde en alguna base de datos.

Y también le he añadido un CSS para darnos cuenta que también es posible aplicar un estilo diferente al predeterminado, a las cajas de texto y los botones.

#entrada {
 margin: 0px auto;
 width: 300px;
 border: 1px solid #336699;
 font-size: 12px;
}
#entrada h2 {
 height: 30px;
 margin: 0px;
 background: #116855;
 color: #FFFFFF;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size: 1.8em;
}
#entrada p {
 margin: 0px;
 padding: 10px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 color: #787878;
}
.box {
 border: 1px solid #E9851D;
 font-family: Arial;
 font-size: 15px;
}
.boton {
 font-weight: bold;
 font-size: 14px;
 color: #FFFFFF;
 background: #DF7401;
 width: 100;
 height: 25px;
 border: 1px #003399 solid;
}

La siguiente imagen muestra como se ve el formulario desde un navegador web, en mi caso use Google Chrome para mostrarles el ejemplo.


Espero sea de ayuda a aquellos que empiezan a crear este tipo de páginas web con formularios.