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.

PUNTOS EXTRAS

Problema de puntos extras del examen ordinario.

Calcule con el algoritmo euclidiano el máximo común divisor de 987654321 y 12345. Presente cada fase del algoritmo e identifique el resultado.

Antes de resolver el máximo común divisor, vamos a ver que dice el algoritmo euclidiano:
Dados 2 segmentos AB y CD (vease a los segmentos como los valores iniciales que nos dieron) con AB>CD, restamos CD de AB tantas veces como sea posible, o lo que es lo mismo una división. Si no hay residuo, entoces CD es el máximo común divisor.

Si se obtiene un residuo EF, éste es menor que CD y podemos repetir el proceso: restamos EF tantas veces como sea posible de CD, o divimos CD entre EF. Si al final no queda un residuo, EF es el máximo común divisor. En caso contrario obtenemos un nuevo residuo GH menor a EF.

El proceso se repite hasta que en algun momento no se obtiene residuo.

Ahora podemos calcular el máximo común divisor de 987654321 y 12345.

Paso 1.
987654321/12345=80004 ---->Residuo=4941

Paso 2.
12345/4941=2---->Residuo=2463

Paso 3.
4941/2463=2---->Residuo=15

Paso 4.
2463/15=164---->Residuo=3

Paso 5.
15/3=5----->Residuo=0





Como vimos anteriormente, el resultado de los valores 15/3 arrojó un residuo =0, eso significa


que MCD(987654321,12345)=3.




Bueno aca les dejo las imágenes con los códigos que programé en c que les mencioné en las asesorías, determinan el MCD de 2 numeros.
Por si quieren probar que funcionan solo hagan click sobre las imágenes para verlas más grandes.

PUNTOS EXTRAS

Problema 1 del examen de medio curso.

1.Pseudocódigo y diagrama de flujo.

Represente este pseudocódigo en un diagrama de flujo:

entrada n

si (n%2==0)

si (n==2)
imprime "sí"

en otro caso

imprime "no"

i=3

mientras i <=raíz (n)

si (n%i==0)

imprime "no"

sal

i += 2

imprime "sí"

Utlilizando una tabla de valores de variables, simule la ejecución del algoritmo para

las entradas 3,4,17,51,63. Luego, concluya qué hace el algorimto.

Este es el diagrama de flujo que realice en Visio (para verlo más grande hagan click sobre la imagen) :

TABLA DE VALORES :

¿Qué hace el algoritmo?

Este algoritmo determina si un número es primo o no.

Para probar el algoritmo realicé el código en dev-C++

Aquí una imagen para los que quieran copiarlo, a mi me funcionó muy bien.

(click a la imagen para hacerla más grande).