domingo, 21 de octubre de 2012

Interfaz Grafica en Java [Tercera parte]

Hola a todos, aqui vamos a hacer la tercera y ultima parte, en donde vamos a ver los eventos que es lo que nos faltaba.

Recuerden mirar si no lo hicieron las primeras dos partes.

Para comenzar vamos a ver lo que son las interfaces, que lo vamos a necesitar para llegar a los eventos.

Interfaz

La interfaz es una clase en donde se especifican los metodos pero sin implementarlos.

Una interfaz se declararia:

interface nombre_interface {
      tipo_retorno nombre_metodo ( lista_argumentos ) ;
      .............................
}

Como por ejemplo:

interface Persona {
      public void caminar(String direccion, int cantidad);
      public void saltar();
      .............................
}

Eventos

Cuando se va a trabajar con eventos tenemos que especificar cuales son los objetos oyentes. Es decir tenemos que crear objetos y hacerlos oyentes de los eventos necesarios, en caso contrario no se podran manejar los eventos.
Hay muchos tipos de Listners:

  • ActionListner: Eventos de accion (botones)
  • KeyListner: Teclas del teclado
  • MouseListner: Clicks en el mouse
  • MouseMotionListner: Movimientos del mouse
  • AdjustmentListner: Componente movido, redimensionado.
  • WindowListner: Eventos de la ventana
  • Entre otros...

Veamos un simple ejemplo en donde usemos esto para que sea mas facil de entender y luego lo haremos un poco mas interesante.

Vamos a crear una ventana. Sino se acuerdan pueden ver los las primera parte.

import javax.swing.*; // importamos los modulos de Swing

public class Windows extends JFrame { // creamos una clase que hereda de JFrame
 
 Windows() { // constructor
  setTitle("Ventana Nueva"); // titulo de la ventana
  setSize(300, 200); // tamaño 
  setLocation(500, 500); // ubicacion
  setVisible(true); // visibilidad
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // terminamos la aplicacion al cerrar la ventana
 }  // fin del constructor

} // fin class Windows

Vamos a crear una nueva clase que herede de JButton y que implemente ActionListener, que es una interfaz.
Importaremos primeramente lo que necesitemos.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;

public class unButton extends JButton implements ActionListener {

}

Dentro de dicha clase vamos a crear el constructor en donde le pondremos un texto al button.
Y ademas vamos a sobreescribir un metodo que se va a llamar cuando se ejecute un evento de la interfaz.

Nos quedaria asi entonces:

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;

public class unButton extends JButton implements ActionListener {

 unButton() {  // constructor
  super("Boton");
 }
 
 public void actionPerformed(ActionEvent arg0) {  metodo de la interfaz ActionListener
  System.out.printf("Preciosaste el Boton :)");
 }

}

Para finalizar volvemos a la clase de la ventana y vamos a agregar un boton.

unButton button = new unButton(); // instanciamos un boton
button.addActionListener(button); // lo hacemos oyentes de si mismo
add(button); // lo agregamos al JFrame

Lo probamos y?

0df6r.png

Nos ha salido un boton medio grande xD
No hemos establecido ningun layout, para el que no se acuerde mire la segunda parte.

Veamos otro ejemplo en donde no vamos a usar la terminal. Sino que vamos a hacer uso de los objetos del JFrame.
En este ejemplo importaremos los modulos necesarios e instanciaremos una clase que herede de JFrame y que implemente la interfaz de ActionListener.
Dentro de ella crearemos un constructor donde le pondremos las configuraciones deseadas a la JFrame y agregaremos un JTextfield, un JButton y un JLabel.
Y mediante un evento haremos que lo que pongamos en el JTextField, al apretar el JButton pase al JLabel. :)

//importamos el modulo necesarios
import java.awt.FlowLayout; 
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener; 
import javax.swing.*; 

public class Windows extends JFrame implements ActionListener { // creamos una clase que hereda de JFrame y que implementa la interfaz ActionListener
 JLabel label;
 JTextField texto;
 
 Windows() { // constructor
  setTitle("Ventana Nueva"); // titulo de la ventana
  setSize(300, 200); // tamaño 
  setLocation(500, 500); // ubicacion
  setVisible(true); // visibilidad
  setLayout(new FlowLayout()); // especificamos un layout
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // terminamos la aplicacion al cerrar la ventana
  
  texto = new JTextField("Introduce el Texto", 20); // instanciamos un objeto JTextField
  JButton button = new JButton(); // instanciamos un objeto JButton
  button.setText("Boton"); // colocamos un texto al boton
  label = new JLabel(); // instanciamos un objeto JLabel
  
  button.addActionListener(this); // configuramos a JFrame oyente del boton
  
  // agregamos los objetos
  add(texto);
  add(button);
  add(label);
  
 }  // fin del constructor

 public void actionPerformed(ActionEvent arg0) {
  label.setText(texto.getText()); // al JLabel le colocamos el texto del JTextField
 }
 
} // fin class Windows

Si notaran al JLabel y al JTextField los declaramos fuera del constructor, y eso fue para que los podamos usar luego en el actionPerformed.

Veamos unas imagenes:

Antes de precionar el boton. Podemos ver los componente, al label no se lo nota pero esta.

Vflho.png

Introducimos un texto en el JTextField y presionamos el JButton.

HBkab.png

Para terminar veamos un ejemplo en donde vamos a tener que atender a mas de un componente para realizar sus eventos.

Vamos a hacer el mismo caso que el anterior pero agregando un par mas de componentes.

//importamos el modulo necesarios
import java.awt.FlowLayout; 
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener; 
import javax.swing.*; 

public class Windows extends JFrame implements ActionListener { // creamos una clase que hereda de JFrame y que implementa la interfaz ActionListenes
 JLabel label1, label2;
 JTextField texto1, texto2;
 JButton button1, button2;
 
 Windows() { // constructor
  setTitle("Ventana Nueva"); // titulo de la ventana
  setSize(300, 200); // tamaño 
  setLocation(500, 500); // ubicacion
  setVisible(true); // visibilidad
  setLayout(new FlowLayout()); // especificamos un layout
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // terminamos la aplicacion al cerrar la ventana
  
  texto1 = new JTextField(10); // instanciamos un objeto JTextField
  button1 = new JButton(); // instanciamos un objeto JButton
  button1.setText("Bt1"); // colocamos un texto al boton
  label1 = new JLabel(); // instanciamos un objeto JLabel
  
  texto2 = new JTextField(10); // instanciamos un objeto JTextField
  button2 = new JButton(); // instanciamos un objeto JButton
  button2.setText("Bt2"); // colocamos un texto al boton
  label2 = new JLabel(); // instanciamos un objeto JLabel
  
  button1.addActionListener(this); // configuramos a JFrame oyente del boton
  button2.addActionListener(this); // configuramos a JFrame oyente del boton
  
  // agregamos los objetos
  add(texto1);
  add(button1);
  add(label1);
  add(texto2);
  add(button2);
  add(label2);
  
 }  // fin del constructor

 public void actionPerformed(ActionEvent arg0) {
  
 }
 
} // fin class Windows

El code es exactamente el mismo que en el ejemplo anterior solo con la diferencia que le agregue un comonente mas de cada uno.
Asi nos quedaria:

eUsOe.png

Ahora tenemos que reescribir el metodo actionPerformed.

public void actionPerformed(ActionEvent arg0) {
 if (arg0.getSource() == button1)
  label1.setText(texto1.getText());
 if (arg0.getSource() == button2) 
  label2.setText(texto2.getText());  
}

Para lograr esto hacemos uso del parametro arg0. Y tambien del metodo getSource, con el cual vamos a poder obtener quien ha disparado el evento.

Y asi nos quedara.

KORjR.png

Final :)

Saludos

jueves, 27 de septiembre de 2012

Interfaz Grafica en Java [Segunda parte]

Hola a todos. Hoy vamos a seguir con esta segunda parte, en donde vemos primeramente como se pueden organizar los objetos dentro de la ventana. Y si no se hace muy largo veremos tambien los eventos.

Que es un layout?

Es un objeto que determina la posicion de los componentes en una ventana o panel. Es decir, es el encargado de distribuir los espacios. Hay varios tipos de layout y hasta podemos crear nuevos.

Vamos a ver un conjunto de layout con sus caracteristicas.

Para empezar cree una ventana con las configuraciones comunes que vimos en la primera parte.

import javax.swing.JFrame;

public class Windows  extends JFrame  {
 
 Windows() { 
  setTitle("Ventana con Componentes");
  setSize(300, 100);
  setVisible(true);
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
 }
}

Ahora en ese mismo contructor le vamos a agregar algunas lineas mas.

Creamos un Contenedor. En donde vamos a ir poniendo los diferentes componentes.

Container contenedor = getContentPane();

Pero para esto vamos a necesitar importar:

import java.awt.Container;

Border Layout

Este es el que esta por defecto. Para agregar un componente hay que especificarle una de las siguiente posiciones: Norte, Este, Oeste, Sur o Centro.

Creamos algunos componentes:

JLabel label1 = new JLabel("Primer Label");
JButton button1 = new JButton("Primer Button");
JLabel label2 = new JLabel("Segundo Label");
JCheckBox check = new JCheckBox("Primer CheckBox");
JButton button2 = new JButton("Segundo Button");

Y ahora vamos a agregarlos al Contenedor, es aqui donde le vamos a especificar la posicion:

contenedor.add(label1, BorderLayout.NORTH);
contenedor.add(label2, BorderLayout.EAST);
contenedor.add(button2, BorderLayout.WEST);
contenedor.add(button1, BorderLayout.SOUTH);
contenedor.add(check, BorderLayout.CENTER);

yXEXI.png

Codigo completo del constructor:

Windows() { 
 setTitle("Ventana con Componentes");
 setSize(300, 100);
 setVisible(true);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  
 Container contenedor = getContentPane();
  
 JLabel label1 = new JLabel("Primer Label");
 JButton button1 = new JButton("Primer Button");
 JLabel label2 = new JLabel("Segundo Label");
 JCheckBox check = new JCheckBox("Primer CheckBox");
 JButton button2 = new JButton("Segundo Button");
  
 contenedor.add(label1, BorderLayout.NORTH);
 contenedor.add(label2, BorderLayout.EAST);
 contenedor.add(button2, BorderLayout.WEST);
 contenedor.add(button1, BorderLayout.SOUTH);
 contenedor.add(check, BorderLayout.CENTER);
}

Box Layout

En este modo, los componentes intentan ocupar el menor espacion que puedan.

Para utilizarlo hay que crear un BoxLayout primero:

BoxLayout box = new BoxLayout(contenedor, BoxLayout.Y_AXIS);

Estamos creando una instancia de un BoxLayout llamado box. Entre los parentesis van dos parametros, el primero es el contenedor al que le vamos a aplicar el layout y el segundo es la distribucion que van a tomar los componentes. En este caso es BoxLayout.Y_AXIS, donde se ordenan verticalmente, pero tambien podria haber sido BoxLayout.X_AXIS en donde se organizarian horizontalmente.

Ahora le decimos al contenedor que utilice ese layout:

contenedor.setLayout(box);

Utilizando los mismo componente que en el caso anterior.

JLabel label1 = new JLabel("Primer Label");
JButton button1 = new JButton("Primer Button");
JLabel label2 = new JLabel("Segundo Label");
JCheckBox check = new JCheckBox("Primer CheckBox");
JButton button2 = new JButton("Segundo Button");

Para terminar se los agregamos al contenedor:

contenedor.add(label1);
contenedor.add(button1);
contenedor.add(label2);
contenedor.add(check);
contenedor.add(button2);

Y el resultado es:

V0j2r.png

Codigo completo del constructor:

Windows() { 
 setTitle("Ventana con Componentes");
 setSize(300, 100);
 setVisible(true);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  
 Container contenedor = getContentPane();
  
 BoxLayout box = new BoxLayout(contenedor, BoxLayout.Y_AXIS);
 contenedor.setLayout(box);
  
 JLabel label1 = new JLabel("Primer Label");
 JButton button1 = new JButton("Primer Button");
 JLabel label2 = new JLabel("Segundo Label");
 JCheckBox check = new JCheckBox("Primer CheckBox");
 JButton button2 = new JButton("Segundo Button");
  
 contenedor.add(label1);
 contenedor.add(button1);
 contenedor.add(label2);
 contenedor.add(check);
 contenedor.add(button2);
}

Flow Layout

Este Layout va agregando los componentes en el espacio que tiene disponible.

Creamos la instancia del FlowLayout y se la asignamos al contenedor:
Pero primero vamos a necesitar importar:

import java.awt.FlowLayout;

FlowLayout flow = new FlowLayout();
contenedor.setLayout(flow);

Creamos los componentes y los agregamos al Conteiner:

JLabel label1 = new JLabel("Primer Label");
JButton button1 = new JButton("Primer Button");
JLabel label2 = new JLabel("Segundo Label");
JCheckBox check = new JCheckBox("Primer CheckBox");
JButton button2 = new JButton("Segundo Button");
  
contenedor.add(label1);
contenedor.add(button1);
contenedor.add(label2);
contenedor.add(check);
contenedor.add(button2);

Obteniendo:

iSItN.png

Codigo completo del constructor:

Windows() { 
 setTitle("Ventana con Componentes");
 setSize(300, 100);
 setVisible(true);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  
 Container contenedor = getContentPane();

 FlowLayout flow = new FlowLayout();
 contenedor.setLayout(flow);
  
 JLabel label1 = new JLabel("Primer Label");
 JButton button1 = new JButton("Primer Button");
 JLabel label2 = new JLabel("Segundo Label");
 JCheckBox check = new JCheckBox("Primer CheckBox");
 JButton button2 = new JButton("Segundo Button");

 contenedor.add(label1);
 contenedor.add(button1);
 contenedor.add(label2);
 contenedor.add(check);
 contenedor.add(button2);
}

Grid Layout

En este caso los componentes se ordenan haciendo uso de tablas.

Instanciamos el GridLayout, en donde le pasamos como parametros las filas y columnas.
Y se lo asignamos al contenedor.

GridLayout grid = new GridLayout(3,2);
contenedor.setLayout(grid);

En nuestro caso usaremos 3 filas y 2 columnas.
Ademas necesitamos importar:

import java.awt.GridLayout;

Agregamos los componentes al contenedor.
Y nos quedara:

9ijsc.png

Codigo completo del constructor:

Windows() { 
 setTitle("Ventana con Componentes");
 setSize(300, 100);
 setVisible(true);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  
 Container contenedor = getContentPane();
  
 GridLayout grid = new GridLayout(3,2);
 contenedor.setLayout(grid);
  
 JLabel label1 = new JLabel("Primer Label");
 JButton button1 = new JButton("Primer Button");
 JLabel label2 = new JLabel("Segundo Label");
 JCheckBox check = new JCheckBox("Primer CheckBox");
 JButton button2 = new JButton("Segundo Button");
  
 contenedor.add(label1);
 contenedor.add(button1);
 contenedor.add(label2);
 contenedor.add(check);
 contenedor.add(button2);
}

Paneles

Para finalizar vamos a ver como implementar paneles y que nos va a servir mucho tambien para la organizacion de los componentes dentro de la ventana.

Para comenzar vamos a crear una ventana comun como hemos hecho anteriormente. Al cual le agregaremos ya un Container.

import java.awt.Container;
import javax.swing.*;

public class Windows extends JFrame {
 
 Windows() { 
  setTitle("Ventana con Componentes");
  setSize(300, 300);
  setVisible(true);
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  
  Container contenedor = getContentPane();
 }
}

Ahora voy a crear una nueva clase llamada Panel que herede de JPanel. Y le agregare un Constructor en donde le cambio el color de fondo para que se note luego en la imagen.

import java.awt.Color;

public class Panel extends JPanel{    // Clase Panel heredada de JPanel
 
 Panel(){    // Constructor
  setBackground(Color.BLUE);    // Color de fondo
 }

}

Volvemos al constructor de la ventana, creamos una instancia de la clase Panel y se la agregamos al contenedor.

Panel panel = new Panel();   // instanciamos un objeto Panel
contenedor.add(panel);   // lo agregamos al contenedor

mVprY.png

Si notamos en la imagen vemos al panel por el color de fondo Azul que ocupa todo la ventana.

Y podemos agregarle componentes al Panel desde su contructor.

JLabel label = new JLabel("Primer Label");
JButton button = new JButton("Primer Button");
  
add(label);
add(button);

op6g3.png

Ahora ustedes se preguntaran, para que hacer todo esto de crear un Panel si podemos agregar los componentes en el mismo contenedor.

La ventanja es que por ejemplo en el contenedor de la ventana podemos ponerle un Layout Grid y en lo que seria cada celda ponerle un panel distinto.

Vamos a crear una ventana en donde le agregaremos un contenedor con un GridLayout de 3 filas y 1 columna.

Contructor:

Windows() { 
 setTitle("Ventana con Componentes");
 setSize(300, 300);
 setVisible(true);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
 Container contenedor = getContentPane(); // contenedor de la ventana
 GridLayout grid = new GridLayout(3,1);  // instanciamos un objeto GridLayout
 contenedor.setLayout(grid);   // se lo agregamos al contenedor
}

Y vamos a crea dos clases:

Una para un panel llamada PanelUno que herede de JPanel y cuyo color de fondo va a ser Cyan.

import java.awt.Color;
import javax.swing.JPanel;

public class PanelUno extends JPanel{
 
 PanelUno() {
  setBackground(Color.CYAN);
 }
}

La segunda clase para otro panel llamada PanelDos que herede de JPanel y cuyo color de fondo sea Green.

import java.awt.Color;
import javax.swing.JPanel;

public class PanelDos extends JPanel{
 
 PanelDos() {
  setBackground(Color.GREEN);
 }
 
}

Volvemos al constructor de la ventana y le agregamos los dos paneles al Layout.

PanelUno panel1 = new PanelUno(); // instanciamos un objeto de PanelUno
PanelDos panel2 = new PanelDos(); // instanciamos un objeto de PanelDos
  
// agregamos los paneles al contenedor
contenedor.add(panel1); 
contenedor.add(panel2);

FAbSA.png

Mirando los colores podemos apreciar la ubicacion de cada panel. Y hay una tercer celda en donde no esta en uso.

Y como un Panel es un como un contendor, le podemos asignar un Layout.

Al PanelUno le vamos a poner un GridLayout.

GridLayout grid = new GridLayout(2,2);
setLayout(grid);
Al [B]PanelDos[/B] le vamos a poner un [B]FlowLayout[/B].
FlowLayout flow = new FlowLayout();
setLayout(flow);

Para terminar la demostracion le agregamos unos componentes para ver la diferenciacion.

JLabel label1 = new JLabel("Label1");
JLabel label2 = new JLabel("Label2");
JButton button1 = new JButton("Button1");
JButton button2 = new JButton("Button2");
  
add(label1);
add(label2);
add(button1);
add(button2);

Quedandonos:

iSQt0.png

Como podran ver la organizacion de los componentes es distintas gracias a poder ponerle un layout distinto a cada panel.

:) Bueno espero que les sirva.

Saludos

domingo, 23 de septiembre de 2012

Tutorial de Introduccion a Python



300px-Python_logo.svg.png

Python es un lenguaje de programación de alto nivel cuya filosofía hace hincapié en una sintaxis muy limpia y que favorezca un código legible.

Se trata de un lenguaje de programación multiparadigma ya que soporta orientación a objetos, programación imperativa y, en menor medida, programación funcional. Es un lenguaje interpretado, usa tipado dinámico, es fuertemente tipado y multiplataforma.

Bueno Empecemos, y lo vamos a hacer de la forma tipica, enseñando el primer programa en Python :)

El clasico Hola Mundo ;)

Abran algun editor de texto y copien el siguiente codigo:

#!/usr/bin/python
print “Hola Mundo”
raw_input()

La primer linea es utilizada en UNIX, y sirve para especificarle al sistema operativo cual va a ser el interprete, especificado despues de #!.
La segunda linea lo que hace es imprimir lo que esta entre comillas en pantalla.
Y la seguira mostrando hasta que se presione una tecla, Debido a raw_input(), que espera una tecla por teclado.

Guardamos con extension .py.
Abrimos una terminal y ponemos: python Nombre_Programa.py

Y nos saldra algo asi:

35QQk.png

Invocando al interprete de Python

Para descargar e instalar puedes ingresar a http://www.python.org/download/

Si trabajamos con una maquina con alguna distribucion de Linux, abrimos una termina e ingresamos el comando:

Python

Luego de unos segundo nos va a aparecer un mensaje de bienvenida reportando su numero de version y una nota de copyright. Seguido del prompt primario (>>>), que nos indica que el interprete esta esperando codigo del usuario.

psWHD.png

Para salir podemos escribir exit() o apretar Control + D.

Modo Interactivo

Existen dos formas de ejecutar código Python. Podemos escribir líneas de código en el intérprete y obtener una respuesta del intérprete para cada línea (sesión interactiva) o bien podemos escribir el código de un programa en un archivo de texto y ejecutarlo.

Codificacion del codigo fuente

Es posible utilizar una codificacion distinta a ASCII en el codigo fuente de Pyrhon, la mejor forma de hacerlo es poner un comentario especial enseguida despues de la linea con #! para definir la codificacion:

# -*- coding: enconding -*-

Con esa declaracion, todos los caracteres en el archivo serasn traducidos utilizando la codificacion encoding.

Comentarios

Los comentarios comienzan con el caracter numeral, #, y se extiende hasta el final fisico de la linea.
Ejemplos:

# Comentario numero uno
SPAM = 1                        # Comentario numero dos
                     # Comentario numero tres

Algunas notas finales

La agrupacion de instrucciones se hace por sangria en vez de llaves de apretura y cierre.

#! /usr/bin/env python
# -*- coding: utf-8 -*-

n = int(raw_input("¿Valor tope da serie? "))
print " Serie de Fibonacci "

a, b = 0, 1

while b <= n:
    print b
    a, b = b, a + b

Aqui tenemos un simple programa en donde se implementa la Serie de Fibonacci, donde podemos ver la agrupacion por sangria.

No es necesario declarar variables ni argumentos.

Variables

Como ya dijimos en la segunda parte, las variables no son necesario que se declaren pero lo que si hay que hacer es asignarle un valor inicial, sino dara error.

Para asignarle un valor se utiliza el signo =
La operacion se puede hacer individualmente, hacerla en conjunto a un mismo valor o hacer varias asignaciones al mismo tiempo pero a diferentes valores.
Veamos unos ejemplos:

#Asignacion individual de un numero
i = 10

#Asignacion individual de una cadena de caracteres
nombre = "Expermicid"

#Asignacion conjunta a un mismo valor
a = b = c = 200

#Asignacion conjunta a diferentes valores
x, z = 25, 30

Existe varios tipos de variables, entre ellas estan:

  • Numeros
  • Cadenas de Caracteres
  • Booleanos
  • Listas

Para averiguar el tipo de una variable se puede usar el comando:

type(nombre_variable)

Ahora vamos a ver cada tipo por separado.

[+] Variable numerica

Las variables numericas soportan Enteros, Reales y Complejos.
Los Enteros son aquellos numeros que no poseen decimales. En Python se pueden representar mediante el tipo Int y mediante el tipo Long. La unica diferencia es que uno de ellos (Long) puede almacenar numeros mas grande.

#Asignacion de un tipo 'Int'
Entero = 20

#Asignacion de un tipo 'Long'
Entero = 53L

Como veran para asignar un tipo Long, hay que agregarle una L al final del numero. Veamoslo en una imagen:

aqXOS.jpg

Tambien es posible representar los valores en Octal, poniendole un cero adelante.

#Asignacion de un numero en Octal
o = 040

... y en Hexa de la siguiente forma:

#Asignacion de un numero en Hexadecimal
h = 0x10

Los numeros Reales son los que tienen decimales. En Python se representan mediante el tipo Float
La forma de hacerlo es la siguiente:

#Asignaciones de numeros de tipo Float

a = 0.24

b = 75.58

Tambien es posible utilizar notacion cientifica, añadiendole una e (de exponencial) mas un numero correspondiente al exponente.

#Asignacion de numeros con notacion cientifica

a = 2e10

b = 3e-2

Y por ultimo, los numeros Complejos son aquellos que poseen una parte real y otra imaginaria.

En Python se representa asi:

#Asignacion de un numero complejo
c = 2 + 3j

Operaciones aritmeticas entre las variables numericas

Veamos ejemplos de las operaciones aritmeticas:

#Suma
a = 5 + 20

#Resta
b = 30 - 10

#Multiplicacion
c = 20 * 2

#Division
d = 9 / 3

#Division Entera
de = 8 // 3

#Exponente
e = 2 ** 2

#Modulo
m = 7 % 2

Notar que esas operaciones se pueden realizar entre todos los tipos antes mencionados.
Y tambien se pueden hacer operaciones entre varables mismas.

6zaBh.png

[+] Cadenas de Caracteres

Las cadenas de caracteres pueden estar encerradas entre comiilas dobles (") o comillas simples (').

#Asignacion de cadenas

a = "Primera"

b = 'Segunda'

Una cadena puede estar precedida por una por una u o por una r, que significan, respectivamente, que se trata de una cadena en codificacion Unicode o una cadena cruda.

unicode = u”äóè”
raw = r”\n”

Dentro de las Comillas pueden existir caracteres epeciales:

\n = Salto de linea
\t = tabulador
\\ = \
\" = "
\' = '

O podemos utilizar 3 comillas (simples o dobles) y podemos escribir el texto en varias lineas, respetandose los saltos de linea y demas.

reJ64.png

Algunas operaciones entre cadenas

#Concatenacion
a = "Primera"
b = "Segunda"
concat = a + b    #nos devolvera la concatenacion de a y b

#Contencion
a = "Palabra"
b = "ala"
contencion = b in a  #nos devolvera un valor booleano

#Longitud
a = "cantidad"
log = len(a)   #nos devolvera un valor numerico = a la longitud de a

#Repeticion de una cadena
a = "Hola"
b = a * 3    #nos devolvera la cadena a repetida 3 veces

#Subcadenas
a = "Cadena Grande"
b = a [1:3]    #nos devolvera subcadena en este caso ad

[+] Variable booleanas

Como todos sabran los booleanos son los valores True y False.

Y sus operadores mas usuales son:

and = conjuncion
or = disjuncion
not = negacion

[+] Listas

Las listas son listas donde se pueden almacenar valores de cualquier tipo. Se accede a un elemento de ella de la misma forma que en las cadenas.

lista[inicio : fin]

lista[posicion]

Una forma sencilla de constriur una lista de numeros es con range.

Que funciona de la siguiente forma:

a = range(1,10)    # a se formaria con la lista [1, 2, 3, 4, 5, 6, 7, 8, 9]

Control de Flujo

Sentencias condicionales

[+] If

La forma mas simple de un condicional es la sentencia if.

Veamos un ejemplo:

#Sintaxis de la sentencia IF
Numero = 10

if Numero > 0 :
      print "El numero es positivo"

if Numero < 0 :
      print "El numero es negativo"

Bueno, use dos if por separado.
La sintaxis de muy simple.

Se pone la palabra If, seguido de la condicion a evaluar y por ultimo dos puntos (:).
Y a partir de esa linea usando sangria van las lineas que se tienen que ejecutar si la condicion es valida.

Nunca se olviden de la sangria. Sino Python interpretara otra cosa.

[+] If ... Else

Esta opcion se usa para sintetizar un poco casos como el ejemplo anterior.
Que si se cumple la condicion hace algo y si no se cumple hace otra cosa.
Y traduciriamos esos dos if con uno solo, veamoslo:

#Sintaxis de la sentencia IF ... ELSE
Numero = 10

if Numero > 0 :
      print "El numero es positivo"
else :
      print "El numero es negativo"

[+] If ... elif ... elif ... else

Bien esta es otra variante.

#Sintaxis de la sentencia IF ... ELIF ... ELIF ... ELSE
Numero = 10

if Numero > 0 :
      print "El numero es positivo"
elif Numero < 0:
      print "El numero es negativo"
else :
      print "El numero es 0"

En este caso primero se evalua la condicion del if, si es cierta se ejecuta su codigo y sale; si no se cumpla se evalua la condicion del elif siguiente, y nuevamente si es cierto se ejecuta su codigo y sale; y si no sigue con lo siguientes elif. Cuando se hayan evaluado todos los elif y ninguno haya sido cierto se evalua la condicion del else.

[+] A if C else B

Esta es otra variante, y lo que hace es evaluar C, si se cumple devuelve A, en caso contrario devuelve B

# Sintaxis de la sentencia A if C else B
var = “par” if (num % 2 == 0) else “impar”

Bucles

Mientras que los condicionales nos permiten ejecutar distintos fragmentos de código dependiendo de ciertas condiciones, los bucles nos permiten ejecutar un mismo fragmento de código un cierto número de veces, mientras se cumpla una determinada condición.

[+] While

La sentencia While ejecuta su codigo mientras se cumpla la condicion.

#Sintaxis sentencia While
Cont = 0
while Cont < 10 :
        Print "Cont es igual a " + str(Cont)
        Cont = Cont + 1

Veamos el resultado de este ultimo en la consola:

yJ9kS.png

Como se ve en la imagen el ciclo se siguio ejecutando hasta que la variable Cont supero el numero 9, es decir cuando llego a 10 la condicion ya no fue cierto y por ende no se ejecuto mas.

[+] For ... In

En Python for se utiliza como una forma genérica de iterar sobre una secuencia.

Un ejemplo basico seria:

#Sintaxis sentencia for ... in
valores = ["uno", "dos", "tres", "cuatro", "cinco"]
for elemento in valores :
        print elemento

bqNJY.png

Como se aprecia en la imagen veran que la varible elemento fue 'iterando' sobre los valores de la lista valores y ejecuta el codigo correspondiente.

Funciones

Definicion:

Quote:

Una función es un fragmento de código con un nombre asociado que realiza una serie de tareas y devuelve un valor. A los fragmentos de código que tienen un nombre asociado y no devuelven valores se les suele llamar procedimientos. En Python no existen los procedimientos, ya que cuando el programador no especifica un valor de retorno la función devuelve el valor None (nada)

Dos ventajas de la utilizacion de funciones son:

1- Ayudan a programar y depurar el programa dividiendolo en partes.
2- Permite la reutilizacion de codigo.

Declaracion:

En python las funcion se declaran de la siguiente forma:

def NombreFuncion(param1, param2, ...., paramN)
        #Codigo a ejecutar

Es decir, se utiliza la palabra reservada def, seguido del nombre de la funcion y la lista de los parametros entre parentesis separados por comas.
Las sentencias que forman el cuerpo de la funcion empiezan en la linea siguiente, y deben estar con sangria.

La primer sentencia del cuerpo de la funcion puede ser opcionalmente na cadena de texto literal; esta es la cadena de texto de documentacion de la funcion, o docstring.

Veamos un simple ejemplo:

XcNMj.png

En la imagen podemos apreciar la definicion de una funcion que genera una lista con la lista de Fibonacci hasta un cierto valor pasado como parametro.
Las funciones para devolver el resultado se utiliza la palabra reservada return, seguido de el valor o la variable que contiene el valor a devolver.

El numero de valores que se pasan como parametros al llamar a la funcion tiene que coincidir con el numero de parametros que la funcion acepta segun la declaracion de la funcion. En caso contrario python dara error.

Y esto es todo.

Saludos

lunes, 17 de septiembre de 2012

Interfaz Grafica en Java [Primera parte]


Hola a todos. Debido a que tengo que aprenderme java para la facultad, pero aprenderlo por mi parte para rendir una equivalencia y no en el trasncurso de algun cuatrimestre. Empece hace unos dias a leer un libro de java desde cero.

Pero vine a compartirles con ustedes en una o dos partes de Interfaz Grafica. Dependiendo de que tan largo se haga xD

Introduccion

En java, los programas basados en GUI se implementan con el uso de las clases provenientes de los paquetes estándar javax.swing y java.awt.
Generalmente se prefiere utilizar las clases Swing por ser de peso ligero sobre las clases AWT.

Ventanas

Yo voy a hacer uso de Eclipse para hacer los ejemplos. Ustedes pueden usar el que mejor les parezca.

Para crear la ventana vamos a usar una clase que llamaremos Windows que herede de JFrame. Pero para ello vamos a necesitar importar los modulos de Swing.

import javax.swing.*;  // importamos los modulos de Swing

public class Windows extends JFrame {  // creamos una clase que hereda de JFrame


}

Dentro de esta clase vamos a utilizar un contructor para configurar las caracteristicas que uno quiera. Yo voy a poner las mas comunes.

Windows() {  // constructor
        setTitle("Ventana Nueva");  // titulo de la ventana
setSize(300, 200);  // tamaño                                      
setLocation(500, 500);  // ubicacion
        setVisible(true); // visibilidad, por defecto viene False, por ende necesitamos cambiarlo a true

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  // terminamos la aplicacion al cerrar la ventana
}

Ya tenemos creada la ventana a gusto. Ahora en el metodo Main vamos a instanciar un objeto de la clase recien creada, al cual llamamos [B]vent[/B].

public static void main( String[] args) {
Windows vent = new Windows();
}

Ejecutamos y ...



ya podemos ver nuestra ventana creada con las caracteristicas elegidas. :)

Componentes Basicos

Creamos una ventana como la anterior, pero en el contructor agregamos...

Label

Instanciamos un objeto de JLabel.

JLabel label = new JLabel();  // instanciamos un objeto de JLabel
label.setText("Primer Label");  // le agregamos un texto
add(label);  // lo agregamos a la ventana

Por ahora agregaremos los componentes directamente en la ventana, mas adelante veremos como podemos reordenarlos.



Button

Instanciamos un objeto de JButton.

JButton button = new JButton();  // instanciamos un objeto de JLabel
button.setText("Primer Boton");  // le agregamos un texto
add(button);  // lo agregamos a la ventana



TextEdit

Instanciamos un objeto de JTextField.

JTextField text = new JTextField( "Introduzca el texto", 30 );  // tamaño y texto predeterminado
text.setEditable( true ); // habilitar el textedit
add(text);  // lo agregamos a la ventana



La linea del setEditable lo puse a proposito como para que conozcan otro atributo que pueden cambiar.

Combobox

Instanciamos un objeto de JComboBox.

JComboBox combo = new JComboBox();  // instanciamos un objeto de JComboBox
combo.addItem("PrimerElemento");  // agregamos un primer elemento
combo.addItem("SegundoElemento");  // agregamos un segundo elemento
combo.addItem("TercerElemento");  // agregamos un tercer elemento
add(combo);  // lo agregamos a la ventana



RadioButton

Instanciamos un objeto de JRadioButton.

JRadioButton radio = new JRadioButton( "Primer Radio Button", true );  // instanciamos un objeto de JRadioButton
add(radio);  // lo agregamos a la ventana



El contructor del radiobutton recibe un string como texto del componente y un valor booleano que determina si esta seleccionado o no.
Ademas si los Radiobutton estas agrupados, por medio de la clase [B]ButtonGroup[/B], solo puede seleccionarse uno a la vez.

CheckBox

Instanciamos un objeto de JCheckBox.

Este componente tambien recibe un string como texto del componente y un valor booleano que determina si esta seleccionado o no.

JCheckBox check = new JCheckBox( "Primer CheckBox" , true );  // instanciamos un objeto de JCheckBox
add(check);  // lo agregamos a la ventana



ListBox

Instanciamos un objeto de JList.

String options[] = {"Option 1","Option 2" ,"Option N"};  // lista de elementos
JList list = new JList(options);  // instanciamos un objeto de JList
add(list);  // lo agregamos a la ventana



Y hay muchos mas componentes. Como puede ser:


  1. JScrollBar
  2. JSlider
  3. JProgressBar
  4. JPasswordField
  5. JTextArea
  6. JMenuBar
  7. JMenu
  8. JDialog
  9. JToolTip
  10. Entre otros

Aqui les dejo la Jerarquía de clases real de los componentes Swing.

IMAGEN

Metodos que se pueden encontrar en los componentes son:

setFont: modifica la fuente del texto.
setHorizontalAlignment: modifica la alineacion del texto a lo largo del eje X.
getText(): obtiene el texto del componente.
setBackground: modifica el color del texto.
setForeground: modifica el color del fondo.

Esto es todo por ahora, en los proximos encuentros veremos como empezar a ordenar los componentes a nuestro gusto y los eventos.

Saludos. :)

viernes, 14 de septiembre de 2012

Cross-Origin Resource Sharing


Guia Cross Origin Resource Sharing


La generalización de AJAX ha supuesto un impulso gigantesco para el desarrollo de aplicaciones web cada vez más importantes. Avanzamos claramente hacia aplicaciones que integran, mediante AJAX, servicios o módulos desarrollados por terceros (Google, Yahoo, Facebook, etc). Sin embargo esta tendencia se ha topado con un problema importante: la política del mismo origen (Same Origin Policy), que impide que se puedan realizar peticiones HTTP desde JavaScript a un dominio diferente.
Además de diferentes hacks que se han ido desarrollando con el tiempopara rodear el problema, existe una especificación del W3C parasolucionarlo: Cross-Origin Resource Sharing (CORS), que podriamostraducir como “Compartición de Recursos entre Origenes”.

Política del Mismo Origen

Same Origin Policy es una importante medida de seguridad queimplementan actualmente todos los navegadores. Significa que una web sólo puede utilizar el objeto XMLHttpRequest parahacer peticiones HTTP AJAX al mismo domino desde el que se cargó lapágina original. Las peticiones a dominios diferentes serán descartadas.
sameOriginPolicy.png
Same Origin Policy impide comunicación AJAX entre origenes diferentes
¿Qué se entiende por un dominio diferente? además del evidente nombredel dominio, tampoco se permite comunicación si cambia el protocolo (porejemplo de http a https) o el puerto.
url.png
Origen: protocolo, dominio y puerto
Esto quiere decir que tampoco nos funcionará una petición desde unapágina cargada de http:www.miweb.com a https:www.miweb.com. Aunque en estecaso lo único que cambia es que utilizamos el protocolo seguro https,pero no es posible.
La necesidad de poder hacer estas peticiones como parte de las aplicaciones actuales ha llevado a buscar varias soluciones:
  • JSONP
  • Servidor Proxy
  • uso de iFrames
  • CORS

Las tres primeras son en realidad diferentes formas de ‘rodear’ el problema en vez de solucionarlo, sólo CORS trata de definir un estándar para crear una forma de comunicación por AJAX entre diferentes dominios.

¿En qué consiste el estándar Cross-Origin Resource Sharing?

El estándar propone incluir nuevas cabeceras HTTP en la comunicacióncliente-servidor para saber si se debe enviar (servidor) o mostrar(navegador) un recurso concreto, en función del origen de la petición.
Laidea es que mediante la información que se intercambia en las cabecerasHTTP el servidor y el navegador puedan decidir si esa petición, desdeese origen, puede permitirse.
EL navegador, cuando se va arealizar una petición asíncrona a un dominio diferente, debe incluirautomáticamente la cabecera ORIGIN en la petición:Quote:
Origin: http://www.sitio1.com

Esta cabecera indicará al servidor el dominio desde el que se está haciendo la petición (desde el que se recibió la página original). El servidor tendrá una lista de dominios permitidos y, si este está en la lista, devolverá el recurso solicitado incluyendo en la respuesta la nueva cabecera Access-Control-Allow-Origin:Quote:
Access-Control-Allow-Origin: http://www.sitio1.com

Con esta cabecera el servidor indica el origen al que le permite leer este contenido. El navegador siempre comprobará esta cabecera. Si no se recibe o no indica el dominio correcto, bloqueará la respuesta para no permitir acceso al DOM a ningún script procedente de un dominio ‘extraño’.
Este es el funcionamiento básico. El estándar define también otro tipo de petición más compleja, que requiere un intercambio previo de cabeceras para decidir si puede enviarse. Vamos a ver a continuación los dos casos en detalle.
Petición simple
Una petición se considera simple cuando:
  • Utilizamos el método GET
  • Utilizamos POST para enviar datos pero el tipo de contenido (Content-Type) es: application/x-www-form-urlencoded, multipart/form-data, o text/plain
  • No incluimos cabeceras HTTP personalizadas en la petición

En este caso el procedimiento es tan simple como el que hemos descrito antes.
Supongamosque vamos a hacer una petición GET mediante AJAX, utilizando el objetoXMLHttpRequest, desde una página cargada de www.sitio1.com. El destinode la petición es www.sitio2.com/utilidad.php
El navegadorincluirá automáticamente la nueva cabecera HTTP ORIGIN al detectar unintento de comunicación a un dominio diferente.
La petición HTTP, entre otras cabeceras, enviará:Quote:
GET /utilidad.php HTTP/1.1Host: www.sitio2.com...Origin: http://www.sitio1.com

La última linea es la que incluyen los navegadores que soportan el nuevoestándar, indicando al servidor que esta petición llega desde contenidocargado desde otro dominio (www.sitio1.com).
El servidor comprobará que el dominio www.sitio1.com está en la lista de aceptados y enviará la respuesta, por ejemplo:Quote:
HTTP/1.1 200 OK...Access-Control-Allow-Origin: http://www.sitio1.com[Data]

La cabecera Access-Control-Allow-Origin se incluye como parte de CORS, para indicar al navegador que esta información puede ser leido por el origen indicado. Si esta cabecera no aparece o el origen indicado no es el de la página cargada, el navegador bloqueará la respuesta.
Este tipo de peticiones simples son soportadas por los navegadores mayoritarios (Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome) y pueden ser suficientes para utilizar servicios públicos de terceros.
Petición con verificación previa (preflighted)
El estándar propone que para peticiones más complejas, que incluyancabeceras HTTP personalizadas, métodos HTTP diferentes de GET o POST ocon Content-Type diferente de los tres listados anteriormente (porejemplo application/xml), se haga una verificación previa.
Laidea es utilizar este método para todas las peticiones que puedanimplicar cambios en datos almacenados en el servidor. Este tipo depeticiones se hacen en dos pasos:

  • Determinar, utilizando la cabecera OPTIONS, si la petición se puede mandar
  • Enviar la petición

  • En la primera parte del proceso, el navegador informará al servidor,mediante cabeceras, de los métodos y cabeceras personalizadas que va autilizar en la petición para ver si el servidor las acepta. Tambiénindicará si pretende enviar información de autenticación o cookies, pero esto lo veremos en otro apartado.
    Un ejemplo de petición podría ser este:Quote:
    OPTIONS /utilidad.php HTTP/1.1Host: www.sitio2.com...Origin: http://www.sitio1.comAccess-Control-Request-Method: POSTAccess-Control-Request-Headers: X-CUSTOM

    OPTIONS no es en realidad una cabecera nueva, forma parte del estándarHTTP 1.1 y se utiliza para obtener más información sobre lasopciones que soporta el servidor.
    Las tres últimas cabeceras síson particulares de CORS y, en este caso, indicarían que se pretendeenviar una petición desde el origen www.sitio1.com, utilizando el método POST eincluyendo la cabecera personalizada X-CUSTOM. El servidor responderáindicando las cabeceras y métodos que permite para este origen.
    La respuesta podría ser algo así:Quote:
    HTTP/1.1 200 OK...Access-Control-Allow-Origin: http://www.sitio1.comAccess-Control-Allow-Methods: POST, GET, OPTIONSAccess-Control-Allow-Headers: X-CUSTOMAccess-Control-Max-Age: 1500000Content-Type: text/plain

    Viendo estas cabeceras el navegador sabe que puede enviar la petición y que el servidor la acepta. Access-Control-Max-Age sirve para indicar el tiempo, en segundos, durante el que esta misma petición puede hacerse directamente, sin el proceso de preflight.
    A continuación se enviará la petición real, incluyendo la cabecera ORIGIN y el servidor enviará la respuesta incluyendo la cabecera Access-Control-Allow-Origin: http://www.sitio1.com como en una petición simple.

    El nuevo XMLHttpRequest de nivel 2

    Las peticiones AJAX se realizan a través del objeto XMLHttpRequest (XHR). Era necesario actualizarlo para permitir las comunicaciones inter-dominios en los casos y las condiciones que contempla el estándar Cross-Origin Resource Sharing. Estas nuevas capacidades, junto con algunas más, se definen en el estándar XMLHttpRequest Nivel 2.
    Microsoft ha decidido, una vez más, no seguir los estándares e implementar la funcionalidad de CORS mediante un objeto diferente llamado XDomainRequest (XDR), en vez de aumentar las capacidades de XMLHttpRequest. Mas adelante veremos las limitaciones que esto supone.
    Afortunadamente los métodos y propiedades que debemos utilizar son comunes por lo que sólo tenemos que decidir qué objeto instanciamos. El interface que podemos usar con cualquiera de los dos objetos es el siguiente:
    • abort() – detiene una petición en marcha
    • onerror – para asignar el callback que se dispara en caso de error
    • onload – para asignar el callback que se dispara en caso de éxito
    • open() – establece el método y URL para la petición HTTP
    • responseText – propiedad en la que se almacenan los datos de la respuesta
    • send() – Para enviar la petición

    Un ejemplo sencillo de cómo podriamos usar el objeto XHR en una petición a un dominio diferente sería:Quote:
    var xhrObject = new XMLHttpRequest();xhrObject.open("get", "http://www.sitio2.com/utilidad.php");xhrObject.onload = function(){alert(xhrObjet.responseText)};xhrObject.send(null);

    El objeto XHR se crea normalmente, y se utiliza open() y send() igual que para peticiones normales. La diferencia es que el evento que se dispara cuando la petición se ha recibido con éxito es load. Por eso definimos nuestra función callback para manejar el resultado en xhrObject.onload. Para una llamada AJAX normal, en el dominio propio, definiriamos el callback en xhrObject.onreadystatechange
    En este ejemplo, cuando la petición se completa, mostramos los datos que hemos recibido en xhrObjet.responseText con un alert().
    El objeto XDomainRequest del IE se utilizaría exactamente igual:Quote:
    var xdrObject = new XDomainRequest();xdrObject.open("get", "http://www.sitio2.com/utilidad.php");xdrObject.onload = function(){alert(xdrObjet.responseText)};xdrObject.send(null);

    En un caso real no es necesario duplicar el código, símplemente tenemos que detectar qué objeto debemos crear.
    Para saber si el navegador en el que estamos soporta el nuevo objeto XHR, con las capacidades CORS, comprobaremos si el objeto tiene definida la propiedad withCredentials, exclusiva del XHR nivel 2 y que más adelante veremos cómo se utiliza. Si el resultado es negativo debemos preguntar si existe el objeto XDomainRequest para saber si estamos en alguna versión del IE con soporte CORS. Si el resultado también es negativo, no tenemos soporte para peticiones AJAX inter-dominios.
    El ejemplo anterior, con un código único sería:Quote:
    /Función para encapsular la detección del objeto que tenemos que usar para AJAX inter-dominios, según el navegador en el que estemos.function createCorsObject(){/Inicialmente creamos XHRvar xhrObject = new XMLHttpRequest();/comprobamos si XHR tiene capacidades CORS o es el antiguoif ("withCredentials" in xhrObject){return xhrObject;}/si es el antiguo, comprobamos si el navegador soporta el objeto XDRelse if (typeof XDomainRequest != "undefined"){xhrObject = new XDomainRequest();} else {xhrObject = null;}return xhrObject;}/obtenemos un objeto para AJAX cross-dominiovar xhrObject = createCorsObject();/si tenemos un objeto válido...if (xhrObject){/definimos los parámetros de la petición HTTPxhrObject.open("get", "http://www.sitio2.com/utilidad.php");/definimos un callback para tratar los datos que recibamosxhrObject.onload = function(){alert(xhrObjet.responseText)};/definimos un callback para tratar el caso de errorxhrObject.onerror = function(){/ código para caso de error};/Enviamos la peticiónxhrObject.send(null);}

    Creo que los comentarios del código son suficiente para explicarlo. En este caso la novedad es que hemos definido también una función para tratar errores.

    Peticiones con cookies o autentificación

    Las cookies o la información de autentificación (certificados SSL ocabeceras HTTP de autenticación) no se envía nunca por defecto para estetipo de comunicación. Existe una propiedad del objeto XHR nivel 2 (elque implementan los navegadores que soportan CORS) que sirve paraindicar que queremos enviar y recibir este tipo de información:Quote:
    XHR.withCredentials = true;

    Si el servidor permite el envío de este tipo de información para peticiones desde este origen lo indicará en la respuesta incluyendo una cabecera HTTP especial:Quote:
    Access-Control-Allow-Origin:http://www.sitio1.comAccess-Control-Allow-Credentials: true

    Para estos casos, la cabecera Access-Control-Allow-Origin debe indicar el origen exacto, no puede indicarse un origen genérico mediante ‘*’.
    El Internet Explorer 8 no soporta esta funcionalidad. El objeto XDR, propietario del IE, ni siquiera incluye la propiedad withCredentials. Nunca se enviarán cookies ni información de autenticación para este tipo de comunicación.

    Las limitaciones de XDomainRequest (IE)

    El Internet Explorer sólamente implementa una parte del estándar Cross-Origin Resource Sharing. Puede utilizarse para peticiones sencillas (obtener datos RSS o widgets para presentar en nuestra página) pero para comunicaciones complejas presenta las siguientes limitaciones importantes:
    • En ningún caso permite comunicación entre HTTPS y HTTP o viceversa
    • En ningún caso permite enviar cookies o información de autentificación
    • No permite peticiones con verificación previa (preflighted)
    • Sólo soporta Content-Type: text/plain
    • No permite añadir cabeceras HTTP personalizadas

    Puedes obtener información más detallada en los documentos: XDomainRequest – Restrictions, Limitations and Workarounds y Client-side Cross-domain Security. En este último,Microsoft intenta explicar las razones por las que han elegido esta implementación y estas limitaciones.

    ¿Que seguridad aporta CORS?

    En principio puede parecer que CORS no aporta mucha seguridad. Se basaen una cabecera ORIGIN que el servidor comprueba y en otras cabeceras derespuesta que el comprueba navegador. Enviar una cabecera ORIGIN falsaes algo trivial, al alcance de cualquiera y utilizar un navegadormodificado que no bloquee las respuestas, también.
    Sin embargo,el propósito de este estándar, es proteger al usuario que está navegandoen su ordenador, con su navegador, de scripts maliciosos que intentaránacceder a páginas web sin que lo sepa, suplantando su identidad.Supongamos un caso con los siguientes actores:
    • Inocencio, el usuario que navega tranquilamente por internet desde su ordenador
    • Malone, un hacker con su propio sitio web de descargas www.pelisgratis.es
    • La tienda online www.tienda.com en la que Inocencio tiene una cuenta

    Inocencio visita la web www.pelisgratis.es que le ha recomendado unamigo. La página inicial de ‘Pelis Gratis’ presenta el listado depelículas e incluye también un script en JavaScript que, sin queInocencio lo sepa, intenta utilizar AJAX para conectarse a la conocidatienda online www.tienda.com.
    Si el hacker tiene suerte y elusuario ha abierto sesión en la tienda recientemente, aún tendrá lacookie de sesión válida y el servidor le reconoce como Inocencio. Malonepuede utilizar su script para realizar cualquier cosa o robar cualquierinformación de la cuenta de Inocencio. Esto es lo que trata deimpedirse mediante la Política del Origen Común y el estándarCompartición de Recursos entre Origenes
    El caso del hacker usando un navegador modificado no presenta los mismos problemas porqueno tendría la cookie del usuario para suplantarle. El acceso seprotegería mediante la comprobación de credenciales (usuario/password).
    La modificación de cabeceras en el trayecto de la información, entre el usuario y el destino, puede protegerse utilizando HTTPS.

    Fuente: Quimeraazul.com

    jueves, 2 de agosto de 2012

    Introducción a Netwide Assembler, Segunda parte

    1. Estructuras de control de proceso
    • Qué son
    • Ejemplo

    2. Subprocesos
    • La pila
    • Argumentos de pila
    • Llamada y retorno

    3. Sintaxis NASM
    • Funciones globales
    • Carga de funciones externas
    • Secciones
    • Etiquetas
    • Esqueleto de un programa

    4. NASM y GCC
    • Ejemplos
    • Ejercicio final

    Estructuras de control de proceso

    Qué son:
    Las estructuras de control son procesos a alto nivel que realiza el compilador, con las que no contamos en ASM (A bajo nivel).

    Estas estructuras pueden ser bucles (While, For, ...), comparaciones (if’s) y de ramificación.

    Ejemplo:
    Ejemplo de estos tres últimos tipos, en un comparador de cadenas:

    global main
       
      extern printf
       
      segment .data
      smal  DB         `Diferentes\0`
      sbien DB         `Iguales\0`
      Cadena1         DB         `aaaa\0`
      Cadena2         DB         `aaaa\0`
       
      segment .bss
      len1  resb         12
      len2  resb         12
       
      segment .text
      main:
               PUSH      EBP
               MOV         EBP,ESP
               MOV         [ESP],dword Cadena1
               CALL         longitud
               MOV         dword[len1],EAX
               MOV         [ESP],dword Cadena2
               CALL         longitud
               MOV         dword[len2],EAX
               MOV         EAX,dword[len1]
               MOV         ECX,dword[len2]
               CMP         EAX,ECX
               JNE         Mal
               XOR         ECX,ECX
               MOV         EDX,dword[len1]
      Buclecmp:
               CMP         EDX,ECX
               JE         Bien
               MOV         AL,byte[Cadena1+ecx]
               MOV         BL,byte[Cadena2+ecx]
               CMP         AL,BL
               JNE         Mal
               INC         ECX
               JMP         Buclecmp
      Mal:
               PUSH      smal
               CALL       printf
               LEAVE
               RET
      Bien:
               PUSH      sbien
               CALL       printf
               LEAVE
               RET
      longitud:
               PUSH      EBP
               MOV         EBP,ESP
               SUB         ESP,4
               XOR         ECX,ECX
      BUCLE:
               LEA         EAX,[EBP+8]
               MOV         EAX,DWORD [EAX]
               MOV         BL,byte[EAX+ECX]
               CMP         BL,0
               JE         Retornar
               INC         ECX
               JMP         BUCLE
      Retornar:
               MOV         EAX,ECX
               LEAVE
               RET
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Subprocesos

    Estamos por conocer más de cerca las instrucciones PUSH y POP.

    La pila es una lista de memoria en la que podemos manejarnos. Para que no se creen confusiones, se trata del Stack. Cuando realizamos PUSH estamos cargando datos a la pila, mientras que con POP lo descargamos. PUSH empuja un dato, mientras que POP se encarga del último (L.I.F.O)

    La instrucción PHSA empuja el contenido de los registros a la pila.

    Al realizar una llamada a un subproceso (Función) mediante CALL, éstos deben estar de acuerdo en el número y valor de parámetros que vamos a precisar (Argumentos).

    Los argumentos se almacenan en EBP+8, EBP+0xC y sucesivamente. Más allá de los parámetros recividos estaríamos tocando cosas que no deberíamos, y ya podrías imaginar el resultado.

    Un ejemplo de esto lo podemos ver en el ejemplo anterior, en la llamada al subproceso longitud (Función longitud)

             MOV         [ESP],dword Cadena1 ;Cargar argumento, PUSH
             CALL         longitud
    [etc]

    longitud:
               PUSH      EBP
               MOV         EBP,ESP
               SUB         ESP,4
               XOR         ECX,ECX
      BUCLE:
               LEA         EAX,[EBP+8]         ;Obtenemos direccion
               MOV         EAX,DWORD [EAX] ;Leemos puntero
               MOV         BL,byte[EAX+ECX]
               CMP         BL,0
               JE         Retornar
               INC         ECX
               JMP         BUCLE
      Retornar:
               MOV         EAX,ECX
               LEAVE
               RET
     


    El valor retornado siempre es almacenado en EAX. Realmente depende del programador, pero por regla general es así


    Sintaxis NASM
    Declaraciones globales

    Funciones declaradas como globales, por ejemplo al usar C y NASM

    Global main         ;Obligatorio
      Global funcion
    Carga de funciones externas

    Cargar funciones externas.

    Extern printf
      Extern scanf
      Extern funcionpropia
    Secciones

    Son muchas, pero aquí van las más comunes.

    .BSS – Datos no inicializados (Variables)
      .DATA – Datos inicializados (Constantes)
      .TEXT – Texto
    .CODE – Código
    Etiquetas

    Son labels que usamos para determinar el salto hacia otra línea de código (o dirección). Recuerda a GOTO, todo un clásico
     
    
    Bucle:
               CMP         EAX,0
               JNE         Bucle
               JMP         Fin
      Fin:
               RET





    Esqueleto de un programa



    global main
       
      extern Funcionacargar
       
      segment .data
      constante         DB         `Valor\0`
       
      segment .bss
      variable         resb         1024         ;Longitud
       
      segment .text
      main:
               PUSH      EBP
               MOV         EBP,ESP
               SUB         ESP,4
               LEAVE
               RET
     
     
     
    NASM y GCC, Ejemplo de uso
     
    Dejo el análisis a vosotros para comprobar lo aprendido hasta ahora... Se que me quieres
    Subprocesos externos:

    b.asm:

     
    global main
       
      extern longitud
      extern printf
       
      segment .data
      ftoi   DB         `%i caracteres\0`
      Cadena         DB         `aaaaaaa\0`
       
      segment .text
      main:
               PUSH      EBP
               MOV         EBP,ESP
       
               MOV         [ESP],dword Cadena
               CALL         longitud
               PUSH      EAX
               PUSH      ftoi
               CALL       printf
               LEAVE
               RET
     



    b.c:


    #include <stdio.h>
       
      int longitud(char *s1)
      {
          return strlen(s1);
      }
    Compilación:
    nasm -f win32 -Wall --prefix _ b.asm
    gcc -o b b.obj b.c
    Ejercicio final:
    Realizar una calculadora utilizando GCC y NASM, utilizando estructuras de control, subprocesos, retornos y la pila

    Datos finales: Esperen la siguiente versión. Puntos flotantes, estructuras, matrices, ...

    Agradecimientos: Jep, Swash, 11Sep, Shadowbyte, Mr.Blood, ...

    Creado por: Yo-Mismo (Para oversec.org)

    Las dudas las resuelvo por privado, no en el hilo (Mejor abrir tema nuevo.)

    Un saludo!

    viernes, 27 de julio de 2012

    SelfKeygen Crackme 58DD2D69 C.L.S.

    Este es un crackme que descargué de la lista de CracksLatinos, 12/2011.

    Descripción:
    Citar
    This crackme is a simple algorithm.It's written in visual c++ 6.0 with mfc.
    Level 1/10

    Herramientas:
    -OllyDBG

    Donde lo descargo
    -Aquí

    Puesta a punto
    Arrancamos con Olly, y buscamos entre las strings:


    Vamos al salto al chico bueno y vemos lo siguiente:


    Vemos que tenemos 4 strings, una de longitud mínima, serial olvidado, el chico bueno y chico malo.

    Nos fijamos que antes pasa por una comparación. Colocamos un BP en dicho CALL, y vemos que se trae entre manos:


    Vemos que ahí tenemos el serial falso y verdadero comparándose.

    Afilando los dientes

    Básicamete lo que haremos, es decirle al programa que de no cumplirse, realice un JMP a una zona vacia del ejecutable, con permisos, donde obtendrá el serial verdadero y lo mostrará.

    Creamos un salto a una zona vacía


    En ella cargamos los valores, y posteriormente hacemos un salto al CALL.


    Vemos que funciona.


    Nos vemos!

    Guardamos los cambios a otro ejecutable, y probamos. Primero un serial falso y después el verdadero que mostró:







    OverSec.org