LABORATORIO DE PROGRAMACIÓN WEB

10 Reglas heurísticas de usabilidad.

Aprovechando de lo que vimos esta semana en clase de programación web, quise subir esta entrada que trata de 10 reglas de usabilidad que nos pueden ayudar a la hora de hacer un diseño de una aplicación web, o culquier otra aplicación.

El objetivo de estas reglas de usabilidad, es facilitar el trabajo a los usuarios quienes usarán las aplicaciones creadas por nosotros.

El creador de estas 10 reglas de usabilidad es Jakob Nielsen, gurú de la usabilidad.

Las 10 reglas de usabilidad son las siguientes:

1.Visibilidad del estado del sistema.
El sistemas debe siempre mantener a los usuarios informados del estado del sistema, con una realimentación apropiada y en un tiempo razonable.

2.Utilizar el lenguaje de los usuarios.
El sistema debe hablar el lenguaje de los usuarios, con las palabras, las frases y los conceptos familiares, en lugar de que los términos estén orientados al sistema. Utilizar convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.

3.Control y libertad para el usuario.
Los usuarios eligen a veces funciones del sistema por error y necesitan a menudo una salida de emergencia claramente marcada, esto es, salir del estado indeseado sin tener que pasar por un diálogo extendido. Es importante disponer de deshacer y rehacer.

4.Consistencia y estándares.
Los usuarios no deben tener que preguntarse si las diversas palabras, situaciones o acciones significan la misma cosa. En general siga las normas y convenciones de la plataforma sobre la que está implementando el sistema.

5.Prevención de errores.
Incluso mejor que buenos mensajes de error es un diseño cuidado que impide que un problema se produzca en el primer lugar. Cualquiera de eliminar las condiciones propensas a errores o detectar los usuarios actuales y con una opción de confirmación antes de comprometerse a la acción.
Es decir, prevenir la aparición de errores, mejor que generar buenos mensajes de error.

6.Minimizar la carga de la memoria del usuario.
El usuario no debería tener que recordar la información de una parte del diálogo a la otra. Es mejor mantener objetos, acciones y las opciones visibles que memorizar.

7.Flexibilidad y eficiencia de uso.
Las instrucciones para el uso del sistema deben ser visibles o fácilmente accesibles siempre que se necesiten. Los aceleradores no vistos por el usuario principiante, mejoran la interacción para el usuario experto de tal manera que el sistema puede servir para usuarios inexpertos y también para usuarios experimentados. Es importante que el sistema permita personalizar acciones frecuentes.

8.Los dialogos estéticos y diseño minimalista.
No deben contener la información que sea inaplicable o se necesite raramente. Cada unidad adicional de la información en un diálogo compite con las unidades relevantes de la información y disminuye su visibilidad relativa.

9.Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores.
Los mensajes de error se deben explicar en un lenguaje claro, se debe indicar exactamente el problema, y deben ser xonstructivos.

10.Ayuda y documentación.
Aunque es mejor si el sistema se puede usar sin documentación, puede ser necesario disponer de ayuda y documentación. Ésta tiene que ser fácil de buscar, centrada en las tareas del usuario, tener información de las etapas a realizar y que no sea muy extensa.

LABORATORIO DE PROGRAMACIÓN WEB

Generando tablas de manera interactiva.

Hola, soy Carlos Triana, el siguiente es un programa que hice en Javascript para

generar una tabla de manera interactiva (es el objetivo de Javascript), el programa primero te pide ingresar el número de filas que quieres que contenga tu tabla, luego te pide el número de columnas, puse a cada celda un color distinto de otro, como simulando un tablero de ajedrez, con los colores rojo y negro.

Después de hacer esas preguntas, genera la tabla con las características antes mencionadas, en una página Html.

A continuación les dejo el código de mi programa y algunas imágenes de su ejecución:

Parte 1 del código. (Hacer click en la imagen para verla más grande)

Explicación de la primera parte del código.

Para generar la tabla interactiva, puse 2 entradas por teclado, preguntando por el número de filas y el número de columnas que tendría la tabla, y asigné los valores ingresados a las variables M y N respectivamente.
Primero escribí la etiqueta inicial para crear una table, además de sus respectivas características
(border="0", para que no tenga borde, cellspacing = "0" para que el espacio entre las celdas lo determine el texto que voy a introducir y cellpading="20", para que aparte del espacio del texto, se pase un espacio extra entre cada celda).

Dividí el código en 2 partes, la primera parte, es para cuando el número de columnas es un número par.
Y el segundo, es para cuando el número de columnas es impar.

Cuando el número de columnas es par (if N%2==0) imprimo en la página una etiqueta para la creación de fila, esto es dentro de un for que imprimira M(número de filas) veces de filas.
Dentro de ese mismo for hay otro ciclo for anidado que es el que controla las columnas, y va imprimiendo las celdas de 2 en 2, por eso pongo que i debe ser menor a N/2, si no lo pusier entre 2, se imprimiria el doble de columnas.

Parte 2 del código (Hacer click en la imagen para verla más grande).

Explicación de la segunda parte del código.
Cuando el número de columnas es impar, ya no imprimo las celdas de 2 en 2, porque de esta manera siempre quedaría la tabla con el número de columnas N+1.
Por eso ahora imprimo las celdas de 1 en 1, y tambien ya no divido entre 2 el número de columnas, por esa misma razon. Si lo siguiera dividiendo entre 2 ahora me saldría la tabla con la mitad de columnas.
Al final cierro la etiqueta de creación de fila y la de creación de tabla , después de cerrar la etiqueta table, viene un cierre de center eso es porque yo quise centrar la tabla que fue creada.

Antes de la tabla también puse un texto que dice :"Haciendo tablas de manera interactiva".

Si alguien quiere probar el programa, lo más seguro es que su navegador les va a poner una leyenda arriba de la página que avisa sobre la protección de Internet Explorer (en mi caso), para impedir que la página ejecute scripts.

Para poder ejecutar el script que va a generar la tabla, solo hagan click sobre la leyenda antes mencionada y después eligan la opción "Permitir contenido bloqueado..."

Estas son las imágenes del script en ejecución y de la tabla generada:

Ingreso del número de filas.

















Ingreso del número de columnas.















Tabla generada con las características asignadas.






























Esto es todo lo que hace mi código en Javascript...espero se haya entendido mi explicación y les haya gustado mi trabajo.

Cualquier duda o corrección, pueden dejarla en los comentarios.

LABORATORIO DE PROGRAMACIÓN WEB

Actividad 1 del Laboratorio.

Hola soy Carlos Triana, llevo Laboratorio de Programación Web con la Dra. Elisa, los martes a V1 y esta es la Actividad 1.

Definiciones.

-Nslookup.

Nslookup es un programa, utilizado para saber si el DNS está resolviendo correctamente los nombres y las IP.
Se utiliza con el comando nslookup, que funciona tanto en Windows como en UNIX para obtener la dirección IP conociendo el nombre, y viceversa.

Ventana con el comando nslookup(a wikipedia) en ejecución.
(Hacer click a la imagen para verla más grande)








-Ping.

Ping es una utilidad diagnóstica en redes de computadoras que comprueba el estado
de la conexión del host local con uno o varios equipos remotos por medio de el envío de
paquetes ICMP de solicitud y de respuesta.Mediante esta utilidad puede diagnosticarse el estado, velocidad y calidad de una red determinada.

Ejecutando Ping de solicitud, el Host local envía un mensaje ICMP,
incrustado en un paquete IP. El mensaje ICMP de solicitud incluye,
además del tipo de mensaje y el código del mismo, un número identificador
y una secuencia de números, de 32 bits, que deberán coincidir con el
mensaje ICMP de respuesta; además de un espacio opcional para datos.

Muchas veces se utiliza para medir la latencia o tiempo que tardan en comunicarse dos puntos remotos, y por ello, se utiliza el término PING para referirse al lag o latencia de la conexión en los juegos en red.

Ventana con el comando ping(a google.com) en ejecución
(Hacer click en la imagen para verla más grande)

PROGRAMACIÓN WEB

PROYECTO DE MEDIO CURSO

Hola soy Carlos Triana, de la clase de Programación web los martes a M1 con la Dra. Sara Garza.

Para el proyecto de medio curso mi equipo y yo decidimos hacer una página web para un negocio de autos,
la página consiste en una tabla con las imágenes y nombres de las distintas agencias y sus respectivos autos.

La doctora Sara Garza nos pidió que el proyecto se compusiera de 3 puntos, que son los siguientes:

PUNTO 1 - APLICACIÓN DEL PROGRAMA.

Este programa tiene una aplicación muy buena en la industria ya que genera una página web en donde se
puede ver una lista de autos (el formato es una tabla) junto con sus imágenes, tiene un modelo dinámico
puesto que con el simple hecho de dar click al nombre del auto, eres vinculado a sus especificaciones,
este programa puede ser modificado con facilidad si se quiere editar la lista de carros o actualizar las
características del cualquier automóvil.

PUNTO 2 - TIPO DE ARCHIVOS DE ENTRADA.

El tipo de archivos que nosotros utilizamos fue el .dat, los archivos .dat que creamos contienen las
características de cada automóvil. Así el programa, entra a cada archivo.dat y su contenido lo manda
hacia la pagina web, que en nuestro caso es el archivo "Empresa.html"

PUNTO 3 - PROGRAMA.

Como el programa es un poco largo y nuestra página web contiene imágenes, prefiero ponerles un link
para que descarguen una carpeta con el contenido del código en python, además de los archivos.dat
y las imágenes de cada auto.

La explicación del programa es muy sencilla, el programa se encarga de abrir y leer cada uno de los
archivos .dat con el contenido de los automóviles, después toda la información que leyó la imprime
en otro archivo que se llama Empresa.html (Esta es la página web) y así se genera el contenido de la
página web, dentro de python también escribimos el código para la impresión de las imágenes en el
archivo Empresa.html, así como también el código para hacer los hipervínculos que nos van a
direccionar a las características de cada automóvil.

Así si alguien quiere ver las características de un auto solo tiene que dar click en el nombre del
auto que se encuentra en la tabla con su respectiva imagen.

Link para descargar la carpeta "proyecto":

http://www.megaupload.com/?d=S4F600HQ

BIBLIOGRAFÍA:

www.it.ciidit.uanl.mx/~sara/prog_web.html ---->En las diapositivas correspondientes al tema de python

Espero les haya gustado mi trabajo.
Saludos.

PRIMERA TAREA DEL CURSO

Bueno acá les dejo el programa de la primera tarea, el programa solo muestra una ventana que la dividen 2 páneles, el panel superior pintado de gris incluye 5 botones con sus respectivas leyendas, los botones tienen asignado un color distinto cada uno y el botón que está al final es el de salir. Al pulsar cualquier botón(excepto el de salir), el panel inferior cambiará a su respectivo color.

Acá les dejo unas imágenes del programa en ejecución (hagan click en las imagenes para verlas más grandes) :

Por si quieren probar que el programa funciona acá les dejo el código para que lo puedan copiar:

// librerias usadas en este programa
import javax.swing.JFrame; // ventana
import javax.swing.JPanel; // agrupar y arreglar
import javax.swing.JButton; // boton
import javax.swing.JLabel; // texto no modificable
// clases que permiten acomodar componentes de distintas maneras
import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.FlowLayout;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;
import java.awt.Color;//Libreria para color
// escuchadores y eventos
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
// aqui comienza nuestra clase
public class Practica implements ActionListener {
// todo el codigo va aqui adentro
public void actionPerformed(ActionEvent e) {
String cmd = e.getActionCommand();

if (cmd.equals("ROJO")) {// que hacer cuando uno pica al boton Rojo
this.miPanel.setBackground(Color.RED);
return;

}else if(cmd.equals("AZUL")){
this.miPanel.setBackground(Color.BLUE);
return;

}else if(cmd.equals("VERDE")){
this.miPanel.setBackground(Color.GREEN);
return;

}else if(cmd.equals("AMARILLO")){
this.miPanel.setBackground(Color.YELLOW);
return;

}else if (cmd.equals("SALIR")) {
System.exit(1); // salir
}
}
// atributos de la clase Practica
private JPanel miPanel;
private JLabel miTexto;

// constructor de Practica
public Practica(JPanel p, JLabel t) {
this.miPanel = p;
this.miTexto = t;
}

// el metodo principal
public static void main(String[] args) {

// creamos variables dentro del metodo main
JFrame f = new JFrame(); // una ventana nueva

// llamamos los metodos definidos en la libreria
f.setSize(800, 600); // que tan grande
f.setLocation(100, 200); // donde
f.setTitle("Ventana de Triana"); // como se llama

// que pasa cuando lo cierro
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// creamos unos paneles para agrupar elementos
JPanel pARRIBA = new JPanel();//pGridBag=ARRIBA
JPanel pABAJO = new JPanel();//pFlow=ABAJO
JPanel p = new JPanel(); // panel del fondo

// asignar los administradores de acomodo a cada panel
pARRIBA.setLayout(new GridBagLayout());
pABAJO.setLayout(new FlowLayout());
p.setLayout(new GridLayout(2, 2));

// asignar un color de fondo a cada panel para distinguirlos
pARRIBA.setBackground(Color.GRAY);
pABAJO.setBackground(Color.WHITE);
p.setBackground(Color.GRAY);

// manejo del layout gridbag
GridBagConstraints con = new GridBagConstraints();
con.gridx = 1;
con.gridy = 2;
con.gridwidth = 2;
con.gridheight = 3;

JLabel aviso = new JLabel();
JButton rojo = new JButton("Rojo");//Boton"pinta de rojo el panel"
Practica yo = new Practica(pABAJO, aviso);//"Panel que se pintará de rojo"
rojo.addActionListener(yo);
rojo.setActionCommand("ROJO");
pARRIBA.add(rojo, con);

con.gridx = 1;
con.gridy = 5;
con.gridwidth = 2;
con.gridheight = 2;
//---------------------------------------------------------------------
JButton azul = new JButton("Azul");//Boton"pinta de azul el panel"
azul.addActionListener(yo);
azul.setActionCommand("AZUL");
pARRIBA.add(azul, con);

con.gridx = 1;
con.gridy = 8;
con.gridwidth = 2;
con.gridheight = 2;

//----------------------------------------------------------------------

JButton amarillo = new JButton("Amarillo");//Boton"pinta de amarillo el panel"
amarillo.addActionListener(yo);
amarillo.setActionCommand("AMARILLO");
pARRIBA.add(amarillo, con);

con.gridx = 1;
con.gridy = 11;
con.gridwidth = 2;
con.gridheight = 2;
//----------------------------------------------------------------------

JButton verde = new JButton("Verde");//Boton"pinta de Verde el panel"
verde.addActionListener(yo);
verde.setActionCommand("VERDE");
pARRIBA.add(verde, con);

con.gridx = 1;
con.gridy = 14;
con.gridwidth = 2;
con.gridheight = 2;

//----------------------------------------------------------------------
JButton salir = new JButton("Salir");
salir.addActionListener(yo);
salir.setActionCommand("SALIR");
pARRIBA.add(salir, con);

con.gridx = 6;
con.gridy = 7;
con.gridwidth = 1;
con.gridheight = 1;


// poner los paneles auxiliares en el panel del fondo
p.add(pARRIBA);
p.add(pABAJO);

// hacer que este panel sea el contenido de la ventana
f.setContentPane(p);

// hacer que la ventana sea visible
f.setVisible(true);

// salir del programa
return;
} // termina main
} // termina la clase Practica

PUNTOS EXTRA

GRAFO CONEXO.

Un grafo es conexo si y sólo si tiene una única componente conexa.

Un grafo es conexo si existe algún camino entre todo par de vértices.

El siguiente grafo es conexo ya que de cualquier vértice se puede llegar a cualquier otro através de un camino.

Por ejemplo para llegar del vértice u a x, tengo que ir forzosamente por w, luego puedo ir por z, y después directamente a x, pero imagínense que entre "w" y "z" no hay arista, entonces para llegar de u a x, pasaría igual forzosamente por w, luego podría ir a t, luego por w al final a x.

El siguiente grafo no es conexo porque no existe ningún camino entre los vértices a y c.

Aunque como podemos apreciar en la imagen, hay todavía varios vértices que no se unen.

PUNTOS EXTRA

ISOMORFISMO


Dos grafos son isomorfos cuando tienen la misma estrucura, es decir sus vértices están relacionados de igual forma aunque esten dibujados de manera distinta.

Condiciones necesarias para que dos grafos sean isomorfos:

-Deben tener la misma cantidad de vertices.

-Deben tener la misma cantidad de aristas.

-Deben tener los mismos grados de los vértices.

-Deben tener caminos de las mismas longitudes.

-Si uno tiene ciclos, el otro también debe tenerlos.


Analizaremos si los siguientes grafos son isomorfos:
(Para hacer más grande la imagen hacer click sobre ella)













Vemos que ambos tienen 4 vértices y 5 aristas.

Ahora vamos a definir la función biyectiva, haciendo corresponder los vértices con iguales grados:

f(A)=Y;

f(B)=Z;

f(C)=X;

f(D)=W;

Ahora la definición dice que si entre 2 vértices del primer grafo hay una arista,también debe haber arista entre los vértices del segundo grafo.

Por ejemplo vemos en la imagen anterior que en el G1(grafo 1) entre A y B hay una arista, y también hay una arista entre f(A) y f(B) en el G2(grafo 2).

Esto mismo habría que revisar para cada arista, ordenando convenientemente los vértices.

En la siguiente tabla se observa la cantidad de aristas que unen a cada par de vértices:
(Para ver más grande la imagne hacer click sobre ella)












Por ejemplo nosotros pusimos como función biyectiva f(A)=Y y f(B)=Z, y vemos que del vértice A al vértice B hay una arista, esto en el grafo 1; en el grafo 2 vemos que concuerda con su biyectiva porque del vértice Y al vértice Z también hay una arista.

Como las tablas con sus respectivos valores tienen las mismas cantidades de aristas, podemos asegurar que G1 es isomorfo a G2.