Archivo de la categoría ‘Programacion’

Después  de algún tiempo regreso para compartirles algo que he aprendido. Durante los últimos dos años he estado trabajando en el lenguaje de programación JAVA. Ya compartiré algunas cosas que he aprendido al respecto.

Por ahora les comento que recientemente obtuve la certificación Java OCJP (Oracle Certification Java Professional JAVA SE 6 Programmer), aquí les voy a comentar qué deben hacer para aplicar.

Como requisito previo que necesitan para aplicar es tener una Tarjeta de Crédito Internacional para poder comprar la certificación, ya que se compra por Internet.

Los pasos que deben seguir son los siguientes:

  • Van a donde dice Sign in para que crean una nueva cuenta.
Certificación Java: Crear cuenta en PearsonVue

Certificación Java

  • En la siguiente pantalla deben escoger las opciones: en Narrow by Category seleccionan Information Technology TI. y en Select your testing program escogen Oracle.
Escoger Information Technology y Oracle.

Escoger Information Technology y Oracle.

  • En la siguiente ventana damos clic en Schedule a Test
Damos clic en Schedule a Test

Damos clic en Schedule a Test

  • Bajamos un poco y damos clic en el enlace que dice Proctored
Clic en Proctored

Clic en Proctored

  • En la siguiente pantalla damos clic al enlace Create a Web Account
Creamos una cuenta en PearsonVue

Creamos una cuenta en PearsonVue

  • En la siguiente página llenamos los datos personales y donde dice: Previous Testing History escogemos No. Aquí algo importante es que cuando nos pida la dirección pongamos lo más explícita que podamos, es decir, calle principal, número, calle secundaria, nombre del edificio y alguna referencia, ya que a esa dirección nos enviarán la certificación.
Certificacion Java

Escogemos que no tenemos un ID de Oracle Testing

Como yo ya tengo una cuenta voy a iniciar sesión. Después que creen su cuenta para iniciar sesión deben seguir los pasos previos e ingresan su usuario y contraseña temporal que les será enviado por correo electrónico.

El usuario y contraseña enviados al correo

El usuario y contraseña enviados al correo

  • Después de iniciar sesión en la siguiente pantalla deben elegir el examen que van a dar para obtener la certificación que en nuestro caso es el 1Z0-851 Java Standard Edition 6 Programmer Certified Professional Exam.
    Escogemos examen 1Z0-851

    Escogemos examen 1Z0-851

     

  • Luego escogemos el idioma en que queremos dar el examen y nos aparece el precio, en esta caso cuesta 150 dólares.
Escogemos el idioma en que daremos el examen

Escogemos el idioma en que daremos el examen

  • Damos clic en Next y en la siguiente pantalla indicamos nuestra ubicación geográfica y seleccionamos el centro donde daremos el examen de certificación:
Escogemos el centro donde daremos el examen

Escogemos el centro donde daremos el examen

  • Damos clic en Next y escogemos la fecha y hora en la que daremos el examen:
Escogemos fecha y hora para el examen

Escogemos fecha y hora para el examen

  • Luego damos clic en Next y se nos muestra toda la información sobre el examen como fecha, hora y el centro donde se dará, verificamos la información y damos clic en Next:
Verificamos la información

Verificamos la información

  • En la siguiente pantalla ingresamos la forma de pago, es decir los datos de la tarjeta de crédito:
Ingresamos datos de la tarjeta de crédito

Ingresamos datos de la tarjeta de crédito

  • Todavía no se ha procesado la forma de pago y aún no hemos hecho el pago de 150 dólares. Damos clic en Next y en la siguiente pantalla se muestra la confirmación del pago. Una vez que demos clic en Next en la siguiente pantalla se habrá efectuado el cargo a la tarjeta de crédito. De ahí solo queda esperar la confirmación que nos llegará al mail con la factura y la información del examen.

Y eso es todo para aplicar a una certificación Java.

Vamos a ver un ejemplo de polimorfismo en Java con el uso de interfaces. En la definición de Polimorfismo tenemos:

El polimorfismo es un concepto de la programación orientada a objetos que nos permite programar en forma general, en lugar de hacerlo en forma específica. En general nos sirve para programar objetos con características comunes y que todos estos compartan la misma superclase en una jerarquía de clases, como si todas fueran objetos de la superclase. Esto nos simplifica la programación.

No nos vamos a enfocar mucho en la teoría sino en la parte práctica. Vamos a usar una interfaz para aplicar el concepto de polimorfismo.

Primero creamos un proyecto Java en Eclipse. y vamos a crear en el src el package llamado com.practica.polimorfismo.

Ahora vamos a crear la clase Figura.java que contendrá el siguiente código:

publicclass Figura  {

private String nombre;

private String color;

public Figura(String nombre) {

super();

this.nombre = nombre;

}

public Figura(String nombre, String color) {

super();

this.nombre = nombre;

this.color = color;

}

public String getNombre() {

return nombre;

}

publicvoid setNombre(String nombre) {

this.nombre = nombre;

}

public String getColor() {

return color;

}

publicvoid setColor(String color) {

this.color = color;

}

}

Esta va a ser nuestra super clase de la cual heredarán otro tipo de figuras. Esta clase es simplemente un POJO que tiene el nombre y el colo de la figura y sus getters y setters y dos constructores, aunque solo usaremos uno.

Ahora vamos a crear una interfaz. En Eclipse nos vamos a File -> New -> Other -> Interface. La interfaz se llamara OperacionesFigura.java Esta interfaz contendrá el siguiente código:

package com.practica.polimorfismo;

publicinterface OperacionesFigura {

      double calcularArea();

Figura figura();

}

Básicamente la interfaz tendrá dos métodos. Uno es el método calcularArea() que devolverá un double con el valor del área de la figura, y otro método que nos devolverá todo el objeto Figura. Como sabemos cada figura tiene diferente forma de calcular el área, pero todas tienen esta característica por eso las figuras que implementen esta interfaz deberán implementar estos dos métodos.

Ahora vamos a crear la clase Triángulo.java. Esta clase va a extender o heredar de Figura y a implementar la interfaz OperacionesFigura.

package com.practica.polimorfismo;

publicclass Triangulo extends Figura implements OperacionesFigura {

privatedouble base;

private Double altura;

public Triangulo(String nombre, String color, double base, Double altura) {

super(nombre, color);

this.base = base;

this.altura = altura;

}

@Override

publicdouble calcularArea() {

return (base * altura) / 2;

}

publicdouble getBase() {

return base;

}

publicvoid setBase(double base) {

this.base = base;

}

public Double getAltura() {

return altura;

}

publicvoid setAltura(Double altura) {

this.altura = altura;

}

@Override

public Figura figura() {

return new Figura(getNombre(), getColor());

}

}

Triangulo.java tendrá los atributos propios de un triángulo que son base y altura y además los atributos de la super clase Figura, es decir el nombre y el color. Aquí al implementar la interfaz tenemos el método calcularArea() que es base * altura dividido para 2, en el método figura retornamos una nueva Figura obteniendo el nombre y el color de la super clase. Además tenemos un constructor con todos los atributos de Triangulo y de la super clase Figura.

Ahora aplicamos lo mismo a otra figura. Creamos la clase Circulo.java:

package com.practica.polimorfismo;

importstatic java.lang.Math.*;

publicclass Circulo extends Figura implements OperacionesFigura {

privatedouble radio;

public Circulo(String nombre, String color, double radio) {

super(nombre, color);

this.radio = radio;

}

/*

* (non-Javadoc)

*

* @see com.practica.polimorfismo.OperacionesFigura#calcularArea()

*/

@Override

publicdouble calcularArea() {

returnPI * pow(radio, 2);

}

publicdouble getRadio() {

return radio;

}

publicvoid setRadio(double radio) {

this.radio = radio;

}

@Override

public Figura figura() {

returnnew Figura(getNombre(), getColor());

}

}

Tiene la misma estructura que Triangulo. En este caso tiene como atributo el radio del círculo y en calcularArea() aplicamos la fórmula del área del círculo.

Una vez realizado esto vamos a ver cómo ejecutar estos procedimientos. Para ello creamos la clase CalcularOperacionesFigura.java que contendrá el siguiente código:

package com.practica.polimorfismo;

import java.util.ArrayList;
import java.util.List;

public class CalcularOperacionesFigura {

/**
* @param args
*/

public static void main(String[] args) {
OperacionesFigura of = new Triangulo(“Triangulo”, “Azul”, 15.0, 3.0);
OperacionesFigura of2 = new Circulo(“Circulo”, “Verde”, 12.3);
List<OperacionesFigura> lista = new ArrayList<OperacionesFigura>();
lista.add(of);
lista.add(of2);

calcularArea(lista);
}

public static void calcularArea(List<OperacionesFigura> listaOperacionesFiguras) {
for (OperacionesFigura of : listaOperacionesFiguras) {
System.out.println(“Area es:  ” + of.calcularArea());
System.out.println(“Nombre es: ” + of.figura().getNombre());
System.out.println(“Color es: ” + of.figura().getColor());
}
}

}

Analicemos un poco el código.

En el método main creamos una instancia de la interfaz OperacionesFigura y le decimos que es igual a new Triángulo y llenamos los valores del constructor: nombre, color, base, altura. Podemos hacer esto porque Triángulo implementa OperacionesFigura. Luego hacemos lo propio para Circulo.java  y le instanciamos desde la interfaz.

Hecho esto creamos una lista genérica de la interfaz List<OperacionesFigura> lista, como es genérica solo se puede agregar a la lista objetos de tipo OperacionesFigura. Hecho eso agregamos a la lista las dos interfaces que instanciamos anteriormente

Ahora creamos un método que se llama calcularArea que recibe como parámetro una lista de interfaz de tipo OperacionesFigura. Luego con un foreach recorremos nuestra lista y accedemos a los métodos de la interfaz que son calcularArea() y figura() y de esa manera podemos obtener el área de la Figura que creamos en la instancia. Nótese que se accede a los métodos de la interfaz y no de Triangulo o Circulo. De esta manera la interfaz sabrá qué calculo debe hacer para obtener el área gracias a la implementación de la interfaz.

Este es un ejemplo sencillo de polimorfismo.

Para descargar el código fuente se puede ir a: http://mygnet.net/codigos/java/varios/ejemplo_de_polimorfismo_en_java.3541

En la primera parte les mostré cómo validar el RUC de una persona natural.  En la segunda parte les mostré cómo validar el RUC para persona jurídica o extranjera.  Ahora les mostraré cómo validar el RUC para empresas públicas.

RUC para empresas públicas

La estructura de este tipo de RUC se muestra en la siguiente figura:

RUC empresa públicaLa validación de este tipo de RUC se basa en el algoritmo de Módulo 11. Los coeficientes son: 3, 2, 7, 6, 5, 4, 3, 2.

El procedimiento es el siguiente:

  • Se multiplican los primeros nueve dígitos del RUC por cada uno de los coeficientes que le corresponde en la misma posición.
  • Se suma ese resultado.
  • Se divide ese resultado para el módulo, como este RUC es módulo 11, se divide la suma para 11, y se obtiene su residuo.
  • Se resta el módulo (en este caso 11) de el residuo de la división anterior.
  • El resultado es el dígito verificador. Si ese número coincide con el número del RUC de la posición 9 el RUC es correcto.

Excepción: Si el residuo es cero, el dígito verificador es cero.

Ejemplo:
Coeficiente:     3     2     7    6    5    4   3   2

RUC:                   1     7     6    0   0   0    1    5     5   0   0   0   1

Producto:         3   14   42   0   0   0   3   10   14

Sumatoria:        72

Residuo:             72 dividido para 11 da como respuesta 6, y como residuo 6.

Resta:                 11 – 6 = 5.

5 Es el dígito verificador.

El código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
public class ValidaRucEP {
 
	public static final int NUM_PROVINCIAS = 24;
 
	public static Boolean validaRucEP(String ruc) {
		final int prov = Integer.parseInt(ruc.substring(0, 2));
		boolean resp = false;
 
		if (!((prov &gt; 0) &amp;&amp; (prov &lt;= NUM_PROVINCIAS))) {
			resp = false;
		}
 
		// boolean val = false;
		Integer v1, v2, v3, v4, v5, v6, v7, v8, v9;
		Integer sumatoria;
		Integer modulo;
		Integer digito;
		int[] d = new int[ruc.length()];
 
		for (int i = 0; i &lt; d.length; i++) {
			d[i] = Integer.parseInt(ruc.charAt(i) + "");
		}
 
		v1 = d[0] * 3;
		v2 = d[1] * 2;
		v3 = d[2] * 7;
		v4 = d[3] * 6;
		v5 = d[4] * 5;
		v6 = d[5] * 4;
		v7 = d[6] * 3;
		v8 = d[7] * 2;
		v9 = d[8];
 
		sumatoria = v1 + v2 + v3 + v4 + v5 + v6 + v7 + v8;
		modulo = sumatoria % 11;
		if (modulo == 0) {
			return true;
		}
		digito = 11 - modulo;
 
		if (digito.equals(v9)) {
			resp = true;
		} else {
			resp = false;
		}
		return resp;
	}
 
	public static void main(String[] args) {
		String ruc_dato = "1760001550001";
		if (validaRucEP(ruc_dato)) {
			System.out.println("El RUC es correcto");
		} else
			System.out.println("El RUC es incorrecto");
	}
}

Espero que les sirva.

Pueden descargarse el código fuente de esta explicación en el siguiente enlace:

Valida RUC Empresas Públicas del Ecuador
Valida RUC Empresas Públicas del Ecuador
ValidaRucEP.java
Version: 1.0
1.2 KiB
870 Downloads
Details

En la primera parte les mostré cómo validar el RUC de una persona natural. Ahora les mostraré cómo validar el RUC de una persona jurídica o extranjera.

RUC de persona jurídica o extranjera

La estructura de este tipo de RUC se muestra en la siguiente figura:

Estructura del RUC de persona jurídicaLa validación de este tipo de RUC se basa en el algoritmo de Módulo 11. Los coeficientes son: 4, 3, 2, 7, 6, 5, 4, 3, 2.

El procedimiento es el siguiente:

  • Se multiplican los primeros nueve dígitos del RUC por cada uno de los coeficientes que le corresponde en la misma posición.
  • Se suma ese resultado.
  • Se divide ese resultado para el módulo, como este RUC es módulo 11, se divide la suma para 11, y se obtiene su residuo.
  • Se resta el módulo (en este caso 11) de el residuo de la división anterior.
  • El resultado es el dígito verificador. Si ese número coincide con el número del RUC de la posición 10 el RUC es correcto.

Excepción: Si el residuo es cero, el dígito verificador es cero.

Ejemplo:
Coeficiente:     4     3     2    7   6   5   4   3   2

RUC:                   1     7     9    0   0   1    1    6     7   4   0   0   1

Producto:         4   21   18   0   0   5   4   18   14

Sumatoria:        84

Residuo:             84 dividido para 11 da como respuesta 7, y como residuo 7.

Resta:                 11 – 7 = 4.

4 Es el dígito verificador.

El código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
public class ValidaRucSociedades {
 
	/**
	 * @param args
	 */
	private static final int NUM_PROVINCIAS = 24;
	// public static String rucPrueba = “1790011674001″;
	private static int[] coeficientes = { 4, 3, 2, 7, 6, 5, 4, 3, 2 };
	private static int constante = 11;
 
	public static Boolean validacionRUC(String ruc) {
		boolean resp_dato = false;
		final int prov = Integer.parseInt(ruc.substring(0, 2));
		if (!((prov &gt; 0) &amp;&amp; (prov &lt;= NUM_PROVINCIAS))) {
			resp_dato = false;
		}
 
		int[] d = new int[10];
		int suma = 0;
 
		for (int i = 0; i &lt; d.length; i++) {
			d[i] = Integer.parseInt(ruc.charAt(i) + "");
		}
 
		for (int i = 0; i &lt; d.length - 1; i++) {
			d[i] = d[i] * coeficientes[i];
			suma += d[i];
		}
 
		int aux, resp;
 
		aux = suma % constante;
		resp = constante - aux;
 
		resp = (aux == 0) ? 0 : resp;
 
		if (resp == d[9]) {
			resp_dato = true;
		} else {
			resp_dato = false;
		}
		return resp_dato;
	}
 
	public static void main(String[] args) {
		String ruc_dato = "1790011674001";
		if (validacionRUC(ruc_dato))
			System.out.println("El RUC es correcto");
		else
			System.out.println("El RUC es incorrecto");
	}
}

En la tercera parte les enseñaré a validar el RUC para empresas públicas.

Pueden descargarse el código fuente de esta explicación en el siguiente enlace:

Valida RUC Sociedades Ecuador
Valida RUC Sociedades Ecuador
ValidaRucSociedades.java
Version: 1.0
1.2 KiB
881 Downloads
Details

En este nuevo tutorial les voy a enseñar a validar el RUC ecuatoriano. La validación de la cédula del Ecuador lo pueden encontrar en el siguiente enlace: http://www.coplec.org/?q=2008/07/01/validador-de-c%C3%A9dula-ecuatoriana

Les puse ese enlace porque usaremos ese código para validar uno de los tres tipos de RUC que existen en el Ecuador.

Los tres tipos de RUC son:

  1. RUC de persona jurídica o extranjera.- Es del tipo 1790011674001
  2. RUC de persona pública (entidades estatales).- Es del tipo 1760001550001
  3. RUC de persona natura.- Es del tipo 1701300103001

Se mostrará la validación por partes según cada tipo de RUC.

RUC de personas naturales

La estructura de este tipo de RUC se muestra en la siguiente figura:

Estructura del RUC de persona naturalSu validación se explica a continuación:

  • El RUC de una persona natural será 13 dígitos, sin letras, sin caracteres especiales , únicamente números, de los cuales los 10 primeros será la cédula de identidad.
  • Las 2 primeras posiciones corresponden a la provincia donde fue expedida, por lo cual los dos primeros números no será mayor a 24 ni menor a 1.
  • El tercer dígito es menor a 6 ( 0,1,2,3,4,5 ).
  • Del cuarto al noveno dígito es un número consecutivo de 6 dígitos.
  • El décimo dígito es el dígito verificador.
  • Del décimo primer dígito al décimo tercer dígito, identifican en forma consecutiva el número de establecimientos. Empieza siempre con el 0001.

El número de RUC es: 1710034065001 independientemente del número de establecimientos que tenga el contribuyente, no existe un número de RUC tal como 1710034065002.

La validación de la cédula de Identidad pasa un algoritmo “Módulo 10″. Al número se lo divide en 13 partes, las 9 primeras son el número mismo, la 10 es el dígito autoverificador, y las 3 restantes indican si es principal o establecimiento adicional. Los coeficientes usados para verificar el décimo dígito de la cédula, mediante el algoritmo “Módulo 10″ son: 2.1.2.1.2.1.2.1.2

Como se ve en la imagen se usan los 9 primeros dígitos del RUC. Los números de las posiciones impares e multiplican por 2, y los números de las posiciones pares se multiplican por 1. Si el resultado de multiplicar por 2 es mayor a 9, se resta 9. Como en la figura, 12 – 9 = 3.

Luego se suman todos los valores del producto. En este caso la respuesta es 25.

Luego se resta este número de su decena superior. La decena superior a 25 es 30. Por lo tanto queda: 30 – 25 = 5.

Y 5 es el dígito verificador, si este número coincide con el décimo dígito del RUC la cédula es correcta.

Excepción: Si el resultado de la resta es 10, el dígito verificador será 0.

Usando el código de la página que les puse arriba y haciéndole una pequeña modificación, el resultado queda:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
public class ValidaCedula {
	private static final int NUM_PROVINCIAS = 24;
 
	public static Boolean validacionCedula(String cedula) {
		boolean isValid = false;
		if (cedula == null || cedula.length() != 10) {
			isValid = false;
		}
		final int prov = Integer.parseInt(cedula.substring(0, 2));
 
		if (!((prov &gt; 0) &amp;&amp; (prov &lt;= NUM_PROVINCIAS))) {
			isValid = false;
		}
 
		int[] d = new int[10];
		for (int i = 0; i &lt; d.length; i++) {
			d[i] = Integer.parseInt(cedula.charAt(i) + "");
		}
 
		int imp = 0;
		int par = 0;
 
		for (int i = 0; i &lt; d.length; i += 2) { 			d[i] = ((d[i] * 2) &gt; 9) ? ((d[i] * 2) - 9) : (d[i] * 2);
			imp += d[i];
		}
 
		for (int i = 1; i &lt; (d.length - 1); i += 2) {
			par += d[i];
		}
 
		final int suma = imp + par;
 
		int d10 = Integer.parseInt(String.valueOf(suma + 10).substring(0, 1)
				+ "0")
				- suma;
 
		d10 = (d10 == 10) ? 0 : d10;
 
		if (d10 == d[9]) {
			isValid = true;
		} else {
			isValid = false;
		}
 
		return isValid;
	}
 
	public static void main(String[] args) {
		String ruc_dato = "1710034065001";
		if (validacionCedula(ruc_dato.substring(0, 10)))
			System.out.println("El RUC es correcto");
		else
			System.out.println("El RUC es incorrecto");
	}
}

Una explicación del código. Hay una parte donde dice:

d[i] = ((d[i] * 2) > 9) ? ((d[i] * 2) – 9) : (d[i] * 2);

El uso del símbolo de pregunta ? es un equivalente al uso del if. Todo lo que está entre el ? y los dos puntos será lo que suceda en caso de ser verdadero, y lo que está después de los dos puntos sucederá en caso de ser falso.

Validar el ingreso del RUC de Ecuador en Java – Segunda parte

Validar el ingreso del RUC de Ecuador en Java – Tercera parte

Para conocer un poco más sobre la estructura del RUC pueden visitar el siguiente sitio: http://www.campvs.org/legislacion/index.php?option=com_content&task=view&id=18&Itemid=69

Si desean pueden descargarse el archivo en el siguiente enlace:

Valida Cedula del Ecuador
Valida Cedula del Ecuador
ValidaCedula.java
Version: 1.0
1.3 KiB
1187 Downloads
Details

En este tutorial les voy a enseñar a trabajar con imágenes y una base de datos con PHP y MySQL. Vamos a utilizar Dreamweaver CS5, el cual nos va a ahorrar bastante tiempo en algunas cosas.

Al trabajar con imágenes y bases de datos tenemos dos opciones, la primera es guardar la imagen en la base de datos, y la segunda es guardar la ruta de la imagen en la base de datos. El primer caso haría que la base de datos se vuelva un poco pesada, así que usaremos el segundo caso, almacenando únicamente la ruta de la imagen en la base de datos. Esta forma es más fácil y práctico de trabajar con imágenes.

Bueno ahora empecemos. Primero en Dreamweaver  vamos a crear un nuevo sitio. Nos vamos al menú Sitio y escogemos Nuevo sitio en la pestaña Sitio, le ponemos un nombre y su ruta:

Clic en la imagen para ampliar

Luego nos vamos a la pestaña Servidores, ahí damos clic en el símbolo + y llenamos con la siguiente información (en mi caso uso el puerto 8081, si usan otro deben modificar eso):

Clic en la imagen para ampliar

Luego en la pestaña avanzadas realizamos lo siguiente:

Clic en la imagen para ampliar

Luego damos clic en Guardar, en la primera ventana y seleccionamos el servidor que creamos:

Clic en la imagen para ampliar

Luego damos clic en Guardar.

Este proceso es en la version CS5 de Dreamweaver, en la versión 8 es un poco diferente.

Una vez hecho esto creamos un nuevo archivo PHP y lo guardamos en la ruta del sitio, en mi caso C:xampphtdocsPracticaImagenes le vamos a poner el nombre de formulario.php.

Ahora vamos a crear la base de datos que contendrá la información de las imágenes. Usando el phpMyAdmin que trae el XAMPP vamos a crear la base ImagenesPractica y dentro la tabla Catalogo con los siguientes campos:

Ahora en Dreamweaver en el archivo formulario.php nos vamos al menú Ventana -> Bases de datos. En el panel que aparece damos clic en el símbolo + y escogemos “Conexión MySQL” y llenamos los datos como se muestra:

Clic en la imagen para ampliar

Ahora vamos a crear una página que se llame ingreso_exitoso.php la cual contendrá el texto “El dato ha sido ingresado correctamente”.

Cerramos el archivo ingreso_exitoso.php y luego nos vamos al archivo formulario.php. Allí vamos a crear un formulario como el que se muestra en la imagen:

Clic en la imagen para ampliar

Junto a cada elemento del formulario puse el nombre que tiene cada uno, y el cuadro de la derecha muestra los atributos de la lista Tipo. Bueno en la imagen me faltó un botón que se diga Enviar. Ahí lo incluyen. Una vez hecho esto vamos al menú Insertar -> Objetos de datos -> Insertar registros -> Insertar registro y llenamos como se muestra:

Se debe ir escogiendo cada columna y asignarle el valor correspondiente. En tras insertar, ir a escogemos la página que creamos antes que solo tiene un texto. Damos clic en Aceptar.

Ahora en la ruta del sitio que en mi caso es C:xampphtdocsPracticaImagenes vamos a crear una carpeta llamada images y dentro de ella dos carpetas, una llamada Camisetas y otra llamada Accesorios.

Hasta el momento lo que hace Dreamweaver es llenar la base de datos con lo que tenemos en el formulario. Pero todavia no almacena la ruta de la imagen. Eso vamos a hacer ahora. Antes tenemos un combobox que nos pide el tipo, ya sea Camiseta o Accesorio (suponiendo que es una tienda deportiva) si escogemos camiseta se debe guardar la imagen en C:xampphtdocsPracticaImagenesimagesCamisetas y si escogemos  Accesorio se debe guardar en C:xampphtdocsPracticaImagenesimagesAccesorios y además almacenar esa ruta en la base de datos.

Estando en el archivo formulario.php nos vamos en Dreamweaver a la opción de Código (Ver -> Código) y ubicamos la siguiente línea de código:

Clic en la imagen para ampliar

Debajo de la línea subrayada vamos a insertar el siguiente código PHP:

$tipo_prod = $_POST[“lstTipo”];

//Guardar imagen
if(is_uploaded_file($_FILES[‘fleImagen’][‘tmp_name’])) { // verifica haya sido cargado el archivo
$ruta= “images/$tipo_prod/”.$_FILES[‘fleImagen’][‘name’];
move_uploaded_file($_FILES[‘fleImagen’][‘tmp_name’], $ruta);
}

Más abajo tenemos el código:

GetSQLValueString($_POST[‘fleImagen’], “text”),

Lo modificamos y le ponemos lo siguiente:

GetSQLValueString($ruta, “text”),

Listo ahora guardamos el archivo formulario.php y probamos la página web en el navegador.

Al llenar el formulario y escoger una imagen ésta se guarda en la carpeta correspondiente según sea Camiseta o Accesorio y su ruta se guarda en la base de datos:

Clic en la imagen para ampliarla

Ahora vamos a mostrar los datos en otro archivo. Creamos un nuevo archivo llamado catalogo.php

Vamos al menú Ventana -> Vinculaciones. En el panel damos clic en el símbolo + y llenamos el cuadro de diálogo como se muestra:

Clic en la imagen para ampliar

Damos clic en Aceptar. Ahora vamos al menú Insertar -> Objetos de datos -> Datos dinámicos -> Tabla dinámica:

Clic en la imagen para ampliar

Guardamos la página y la ejecutamos en el navegador, y podemos ver los datos de la base. Ahora para ver la imagen en lugar de la ruta nos vamos al código y ubicamos el siguiente código:

Clic en la imagen para ampliar

En la parte que dice <td><?php echo $row_catalogo_imag[‘Imagen’]; ?></td> le modificamos por lo siguiente:

<td><img src=”<?php echo $row_catalogo_imag[‘Imagen’]; ?>” / ></td>

Actualizamos la página y vemos las imágenes:

Clic en la imagen para ampliar

Espero que les haya gustado este tutorial. Espero sus comentarios y preguntas.

Pueden descargar el programa completo en: http://www.mygnet.net/codigos/php/manejodebasedatos/insertar_imagenes_en_una_base_de_datos_de_mysql_con_php.3238

Este es un programa que hicimos en la universidad. Está hecho en un applet de Java en Netbeans. Primero les explico cómo funciona este método de encriptación y desencriptación y luego el funcionamiento del programa.

El método de encriptación simétrica se llama así porque usa la misma clave para encriptar y desencriptar. La clave es un valor numérico.

Para entender cómo funciona vamos a usar un ejemplo.

El mensaje a encriptar será: HOLA MUNDO ES UNA FRASE COMUN y la clave va a ser 4.

Lo que hacemos es agrupar el texto en número de caracteres según la clave y formar una matriz. Así con esa frase y esa clave nos quedaría:

H   O   L   A
_   M  U  N
D   O   _   E
S   _   U   N
A   _   F    R
A   S   E    _
C   O   M   U
N  _    _    _

Para el ejemplo reemplacé los espacios con guiones bajos. Viendo esa frase en una línea sería:

HOLA | _MUN |DO_E | S_UN |A_FR | ASE_ | COMU | N_ _ _ |

Al último puse 3 guiones bajos para completar los 4 caracteres finales. Para encriptar la frase viendo la matriz vamos cogiendo los caracteres de la primera columna, luego de la segunda, etc, la frase nos queda:

H_DSAACN  -> Primera columna
OMO__SO_  -> Segunda columna
LU_UFEM_ -> Tercera columna
ANENR_U_ -> Cuarta columna

La frase encriptada completa nos queda:

H_DSAACNOMO__SO_LU_UFEM_ANENR_U_

Tomando en cuenta que los guiones bajos son en realidad espacios.

Ahora analizando el número de caracteres tenemos que la frase original tiene 29 caracteres incluyendo los espacios, mientras que la frase encriptada tiene 31 caracteres (no se toma en cuenta el último espacio).

Este dato necesitamos para el proceso de desencriptación. Para eso se parte de la frase encriptada y se divide el número de caracteres para la clave. Si el residuo es cero, la respuesta de la división es el número de filas de la matriz, si no es cero el número de filas de la matriz es la respuesta d ela división más uno.

Si dividimos 31 para 4 la respuesta es 7 con residuo 3, como no es exacta entonces el número de filas será 7 + 1 = 8. Quiere decir que debemos agrupar la frase encriptada en grupo de 8 caracteres así:

H_DSAACNOMO__SO_LU_UFEM_ANENR_U    -> Frase encriptada

H_DSAACN | OMO__SO_ | LU_UFEM_ | ANENR_U

Para formar la matriz cada grupo de caracteres es una columna de la matriz, nos queda por tanto:

H   O    L   A
_   M   U   N
D   O    _   E
S    _    U   N
A   _    F    R
A   S    E    _
C    O   M   U
N   _   _

Nuevamente volvemos a la matriz original y ya es cuestión de leer las filas en orden y se obtiene el mensaje desencriptado.

Esto es lo que haremos en el programa hecho en Java.

Lo pueden descargar del siguiente enlace: http://www.mygnet.net/codigos/java/criptografia/encriptacion_simetrica_con_metodo_matricial.3224

Ahora les traigo otro tutorial muy interesante. Vamos a hacer lo siguiente:

  1. Vamos a tener en una página de asp.net insertado el GoogleMaps.
  2. Vamos a crear un buscador con Visual Studio.Net 2008 para encontrar cualquier lugar en GoogleMaps.
  3. El buscador será de dos tipos: podremos buscar por coordenadas, o podremos buscar por el nombre de algún lugar específico.

Esto será lo que vamos a crear:

Clic en la imagen para ampliar

Como se puede ver en la imagen tenemos el buscador por coordenadas o por localidad. Y el resultado nos mostrará en el GoogleMaps que insertamos en nuestra página web.

Para la programación utilizaremos el Visual Studio 2008 (con la versión 2005 también funciona igual). Y vamos a necesitar algunas cosas más que lo iremos diciendo en el tutorial. Ahora si, manos a la obra!!!

Para hacer este programa utilizaremos un API llamado GoogleMaps de Subgurim, para ello nos vamos a la siguiente dirección:

http://googlemaps.subgurim.net/descargar.aspx

Allí nos descargamos un archivo comprimido que contiene el archivo GMaps.dll

Luego con el Visual Studio 2008 creamos un nuevo Sitio web. En el Explorador de soluciones, damos clic derecho al proyecto y escogemos “Agregar referencia”:

Clic en la imagen para ampliar

En la pantalla que aparece nos vamos a la pestaña Examinar y buscamos el archivo dll que nos descargamos:

Clic en la imagen para ampliar

Automáticamente en el Explorador de soluciones se habrá creado una carpeta llamada Bin que contiene el archivo GMaps.dll

Ahora antes de continuar debemos comentarles que para hacer uso del API de Google de GoogleMaps es necesario obtener una clave que nos proporciona Google en la siguiente dirección:

http://code.google.com/intl/es-ES/apis/maps/

Allí nos vamos donde dice “Regístrate para obtener una clave de API de Google Maps”:

Clic en la imagen para ampliar

Ahi Google nos pide que aceptemos el contrato e ingresemos el sitio web donde lo vamos a usar, yo puse el sitio de mi blog, si no tienes página web entonces ingresa http://localhost. Y luego Google te proporciona la clave que vamos a necesitar. También es importante decir que para que Google te proporcione el API debes tener una cuenta en Gmail:

Clic en la imagen para ampliar

Listo una vez que tengamos la clave del API, nos vamos al Visual Studio .Net al Explorador de soluciones y damos doble clic en el archivo web.config allí vamos a encontrar la siguiente línea de código:

<appSettings/>

Allí borramos esa línea de código e insertamos la siguiente:

<appSettings>
<add key=”googlemaps.subgurim.net” value=”tuClave_yourKey“/>
</appSettings>

La parte que está en rojo debe ser reemplazada por el código API que obtuvieron anteriormente en la página de Google. Guardamos el archivo web.config y lo cerramos.

Ahora volvemos a la página principal que es Default.aspx y nos vamos a la sección de Código. Allí al comienzo del documento encontramos la siguiente línea:

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>

Debajo de esa línea de código escribimos la siguiente:

<%@ Register Assembly=”GMaps”  Namespace=”Subgurim.Controles”  TagPrefix=”cc”  %>

Ahora dentro del código HTML tenemos la etiqueta <form> y dentro una etiqueta <div></div> entre esas dos etiquetas div insertamos la siguiente línea de código:

<cc:GMap ID=”GMap1″ runat=”server” />

El nombre del mapa será GMap1 y ese nombre nos servirá para manipularlo. Ahora nos vamos a la parte de Diseño y podremos ver que aparece un recuadro como el siguiente:

Clic en la imagen para ampliar

Estando en el modo Diseño damos doble clic en cualquier parte blanca de la página para ingresar al método Page_Load. Esto abrirá el archivo Default.aspx.vb y cargará el método Page_Load, nos vamos al inicio de ese archivo e importamos las siguientes librerías:

Imports System
Imports System.Web.UI
Imports Subgurim.Controles

Ahora dentro del método Page_Load vamos a insertar el siguiente código:

‘Establecemos la longitud y latitud que se mostrará al cargar la página web
Dim latitud As Double
Dim longitud As Double
latitud = 40.381090
longitud = -3.622205

‘Carga el mapa con los valores establecidos anteriormente
Dim ubicacion As New GLatLng(latitud, longitud)
GMap1.setCenter(ubicacion, 15)

‘Establecemos alto y ancho en px
GMap1.Height = 300
GMap1.Width = 400

‘Adiciona el control de la parte izq superior (moverse, ampliar y reducir)
GMap1.addControl(New GControl(GControl.preBuilt.LargeMapControl))

‘GControl.preBuilt.MapTypeControl: permite elegir un tipo de mapa y otro.
GMap1.addControl(New GControl(GControl.preBuilt.MapTypeControl))

‘Permite hacer zoom con la rueda del mouse
GMap1.enableHookMouseWheelToZoom = True

‘Tipo de mapa a mostrar
GMap1.mapType = GMapType.GTypes.Normal

La explicación del código aparece en los comentarios. Ahí puse un ejemplo de longitud y latitud reales. Puedes probar con estos otros ejemplos de latitud y longitud válidos:

Quito
-0,229498
-78,524277

New York
40,7142691
-74,0059729

Londres
51,5001524
-0,1262362

Luego te mostraré cómo puedes obtener las coordenadas de cualquier lugar en este mismo tutorial. Ahora presionamos Ctrl + F5 para probar el mapa. Te debe cargar algo como esto:

Clic en la imagen para ampliar

Ahora volvemos al archivo Default.aspx a la vista de Diseño y sobre el mapa vamos a insertar los siguientes controles:

Clic en la imagen para ampliar

En la imagen se muestra los nombres de los componentes. Se debe respetar eso para que funcione el código que vamos a poner a continuación.

El RadioButtonList llamado RbtOpciones debe tener habilitada la opción AutoPostBack:

Clic en la imagen para ampliar

Ahora damos doble clic en el elemento rbtOpciones y carga el método rbtOpciones_SelectedIndexChanged allí vamos a copiar el siguiente código:

Dim val As Integer
‘Obtenemos en una variable el índice de la opción escogida
val = rbtOpciones.SelectedIndex()

‘Opcióm cero es por coordenadas y habilitamos los elementos que se requieren para buscar por coordenadas
If val = 0 Then
txtLatitud.Enabled = True
txtLongitud.Enabled = True
btnIr.Enabled = True
txtCiudad.Enabled = False
btnCiudad.Enabled = False

‘Opción uno es por ubicación y habilitamos los elementos que se requieren para buscar por ubicación
ElseIf val = 1 Then
txtLatitud.Enabled = False
txtLongitud.Enabled = False
btnIr.Enabled = False
txtCiudad.Enabled = True
btnCiudad.Enabled = True
End If

Ahora vamos al botón que se llama btnIr (el que contiene el texto Cambiar) le damos doble clic y en el método Click agregamos el siguiente código:

Dim latitud As Double
Dim longitud As Double

‘Almacenamos en variables los datos de los campos de texto de longitud y latitud
latitud = Me.txtLatitud.Text
longitud = Me.txtLongitud.Text

‘Mostramos el mapa en esa ubicación por coordenadas
Dim ubicacion As New GLatLng(latitud, longitud)
GMap1.setCenter(ubicacion, 15)

Ahora nos vamos al botón btnCiudad (el que tiene el texto Ir…) y le damos doble clic y en el método Clic insertamos el siguiente código:

Try
Dim GeoCode As Subgurim.Controles.GeoCode
Dim sMapKey As String = System.Configuration.ConfigurationManager.AppSettings(“googlemaps.subgurim.net”)

‘Obtenemos la ubicación del campo de texto txtCiudad
GeoCode = GMap.geoCodeRequest(Me.txtCiudad.Text, sMapKey)
If GeoCode.valid = True Then
‘Mostramos la longitud y latitud de la ubicación en los labels
Me.lblLatitud.Text = GeoCode.Placemark.coordinates.lat
Me.lblLongitud.Text = GeoCode.Placemark.coordinates.lng

‘Cargamos el mapa en la ubicación por la que se hizo la búsqueda
Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)

GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
‘Mostramos mediante una marca la ubicación
AddMarker(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)

Else
Msg(“No se puede encontrar la ubicación”)
End If
Catch ex As Exception
Msg(ex.Message)
End Try

Ahí seguramente te aparecen dos errores. No te preocupes.  Ahora nos salimos del método Clic, donde termina el End Sub. Allí copiamos el siguiente código:

Private Sub AddMarker(ByVal dLat As Double, ByVal dLong As Double)
Try
Dim gLatLng As New Subgurim.Controles.GLatLng(dLat, dLong)

Dim oOption As New Subgurim.Controles.GMarkerOptions
oOption.draggable = True

GMap1.resetMarkers()
GMap1.resetListeners()

oMarker = New Subgurim.Controles.GMarker(gLatLng, oOption)

GMap1.addGMarker(oMarker)
GMap1.addListener(New Subgurim.Controles.GListener(oMarker.ID, Subgurim.Controles.GListener.Event.dragend, _
“function(){ document.getElementById(‘hidLat’).value=” & oMarker.ID & “.getPoint().lat();document.getElementById(‘hidLng’).value=” & oMarker.ID & “.getPoint().lng() }”))
Catch ex As Exception
Msg(ex.Message)
End Try
End Sub

Fuera de ese método copiamos el siguiente código:

Private Sub Msg(ByVal sText As String)
Response.Write(“<script type=’text/javascript’>alert(‘” & sText & “‘);</script>”)
End Sub

Volvemos al modo Diseño y damos doble clic en el botón btnTipoMapa y dentro copiamos el siguiente código:

Dim val As Integer
Dim tipo_datos As Integer

tipo_datos = rbtOpciones.SelectedIndex()
val = lstTipoMapa.SelectedIndex()
If tipo_datos = 0 Then
If val = 0 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Normal
ElseIf val = 1 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Satellite
ElseIf val = 2 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Hybrid
ElseIf val = 3 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Physical
End If
ElseIf tipo_datos = 1 Then
If val = 0 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Normal
ElseIf val = 1 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Satellite
ElseIf val = 2 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Hybrid
ElseIf val = 3 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Physical
End If
End If

Listo el programa ha sido finalizado. Presionamos F5 para probar. Puedes buscar por coordenadas (arriba te dejé unas 3 coordenadas para que pruebes) o puedes buscar por ubicación. Puedes poner por ejemplo Torre Eiffel, además cuando buscas por ubicación puedes conocer las coordenadas del sitio que buscaste. Además puedes cambiar el tipo de Mapa desde el formulario.

No olvides dejar sus comentarios, sugerencias o preguntas. Por cierto en la versión 2005 del Visual Studio .Net también funciona este tutorial.

Se pueden descargar el programa de la siguiente página: http://www.mygnet.net/codigos/aspdotnet/net/manipular_googleearth_desde_asp_dot_net.3190

Para ejecutarlo deben ingresar el API de Google en el archivo web.config

Publiqué unos videos sobre este tutorial. Aquí les comparto:

  • Primera parte

[youtube=http://www.youtube.com/watch?v=Z4mAyS_m1vg]

  • Segunda parte

[youtube=http://www.youtube.com/watch?v=yJl4NlybAT8]

  • Tercera parte

[youtube=http://www.youtube.com/watch?v=DPVmc8wwP0U]

Créditos del video:

Realizador del video: Hugo Mora (cyberexplorador)

Voz y edición del video: Pablo Yacelga

En otro manual les expliqué cómo realizar manejo se sesiones con PHP y MySQL sin programar nada con Dreamweaver. Esta vez les voy a explicar cómo realizar consultas a bases de datos, ingreso de registros a bases de datos y modificación de estos registros sin programar nada usando Dreamweaver. En este caso usaré una vez más la versión 8 de Dreamweaver (cuando todavía era de Macromedia), sin embargo, ya hice la misma práctica con la versión de Adobe CS3 y es exactamente igual.

Vamos a copiar algunos parámetros del otro manual que hice ya que el comienzo es exactamente igual.

Las herramientas que vamos a utilizar son:

Una vez que tengamos instalado nuestro servidor web, en este caso Wamp Server vamos a proceder a explicar este tutorial.

Primero vamos a crear una base de datos en MySQL usando phpmyadmin que viene con el WAMP Server. La base de datos para este tutorial se llamará “tienda”  y contendrá una tabla llamada “Libros” (sin comillas). Esta tabla contiene 5 campos:

Vamos a ingresar 3 libros para tener datos en la base:

Ahora vamos a realizar la página web. Primero creamos una carpeta en el directorio de nuestro servidor web. Es este caso el servidor web es WAMP, por lo tanto voy a crear un directorio llamado TiendaPráctica en la ruta C:wampwww

Esa ruta varía según el servidor que usemos. Así por ejemplo si el servidor es XAMPP, la ruta sería C:xampphtdocs

Una vez realizado eso nos vamos a Dreamweaver, y antes de abrir algún tipo de documento nos vamos a Sitio -> Nuevo sitio.  Vamos a la opción “Avanzadas” y en la opción Datos locales llenamos los campos como muestra la figura:

Clic en la imagen para ampliar

Luego en la opción de Servidor de pruebas ponemos los siguientes datos:

Clic en la imagen para ampliar

No estoy dando muchas explicaciones de los campos debido a que ya lo hice en el otro tutorial. Sin embargo, en este último paso solo vale acotar que deberían cambiar (de ser necesario) el “Prefijo de URL”, yo uso el url http://localhost:8081/TiendaPractica con el puerto 8082, debido a que le configuré al Apache para salir por ese puerto, ya que el puerto por defecto (el 80) lo usa el IIS. Así que ese campo deben cambiar de ser necesario.

No olviden realizar estos pasos previos, si no no funcionará la conexión a la base de datos.

Luego nos vamos al menú Archivo -> Nuevo y seleccionamos un archivo de tipo PHP. Vamos a guardar el archivo como index.php en la ruta que creamos anteriormente C:wampwwwTiendaPractica

Ahora vamos a enlazar la base de datos que creamos a Dreamweaver. Nos vamos al menú Ventana -> Bases de datos. Se abre un panel lateral a la derecha. Ahí damos clic en el símbolo + y damos clic en “Conexión MySQL”. Se abre un cuadro de diálogo y lo llenamos con los siguientes datos:

Clic en la imagen para ampliar

En el campo nombre de la conexión va cualquier nombre. En el panel de la derecha aparece la conexión a la base de datos especificada.

Ahora nos vamos al menú Ventana -> Vinculaciones. Se aparece un panel en la parte derecha, se da clic en el símbolo +, y seleccionar “Juegos de registro (consulta)” . Ahí llenar los datos de la siguiente manera:

Clic en la imagen para ampliar

Ya tenemos la conexión a la base de datos. Ahora vamos a visualizar los datos en la página web. Vamos al menú Insertar -> Objetos de aplicación -> Datos dinámicos -> Tabla dinámica. Llenamos el cuadro que aparece de la siguiente manera:

Clic en la imagen para ampliar

Esto se ha creado automáticamente en Dreamweaver:

Clic en la imagen para ampliar

Ahí podemos modificar los encabezados de las columnas y presionamos F12 para visualizar una vista previa de la página en el explorador:

Visualización de los datos. Clic en la imagen para ampliar

Hasta el momento hemos cargado los datos de una base de datos sin programar absolutamente nada. Todo lo ha hecho Dreamweaver. Por cierto, arriba especificamos que nos muestre solo 10 registros cada vez, en caso de haber más registros se crearán enlaces de navegación para mostrar los siguientes registros.

Ingresar registros

Ahora vamos a ingresar registros a la base de datos. Vamos a usar el mismo archivo.

Primero vamos a crear una página web PHP llamada ingreso_exitoso.php Usaremos esa página para decirle al usuario que el dato que ingresó en la base se insertó correctamente. Esa página solo tendrá un mensaje y un enlace, el enlace será hacia la página index.php como se muestra en la figura:

Clic en la imagen para ampliar

Ahora nos vamos al archivo index.php y ubicamos el cursor después de la tabla creada por Dreamweaver, Luego nos vamos al menú Insertar -> Objetos de aplicación -> Insertar registro -> Asistente de formulario de inserción de registros. Allí llenamos el cuadro de diálogo con las siguientes opciones:

Clic en la imagen para ampliar

Automáticamente Dreamweaver agrega un formulario para poder ingresar registros a la base de datos:

Clic en la imagen para ampliar

Ahora presionamos F12 para probar el ingreso de datos.

En esta versión de Dreamweaver no se inserta el menú de navegación de registros automáticamente. Para hacer eso nos ubicamos debajo de la tabla que contiene los datos y vamos al menú Insertar -> Objetos de aplicación -> Paginación de juegos de registros -> Barra de navegación de juego de registros. En el cuadro que se aparece llenamos de la siguiente manera:

Clic en la imagen para ampliar

En la página web nos queda así:

Clic en la imagen para ampliar

Ahora tenemos un formulario que nos permite ingresar datos a la base de datos de MySQL con PHP y no hemos ingresado una sola línea de código.

Modificar un registro

Para modificar un registro vamos a usar un poco de código PHP adicional. Primero debemos agregar lo siguiente en el archivo index.php En la tabla de los datos vamos a ingresar dos columnas al final de forma que tengamos lo siguiente:

Clic en la imagen para ampliar

Una vez hecho eso vamos a crear una página web nueva que se llame modificar.php y creamos una pagina php que se llame modificar_exitoso.php. Es ésta última página insertamos un mensaje que diga “El dato ha sido actualizado correctamente” y debe tener un enlace a la página index.php tal cual como se hizo con ingreso_exitoso.php.

Ahora regresamos a la página modificar.php y debemos crear una vinculación de juegos de registros (la conexión a la base de datos se crea una sola vez para todo el sitio web, sin embargo, las vinculaciones se deben crear en cada nueva página web del sitio). Para ello nos vamos a Ventana -> Vinculaciones. En el símbolo + damos clic en Juego de Registros (consulta). Ponemos un nombre a la consulta y seguimos los pasos anteriores para hacer una vinculación.

Hecho eso vamos al menú Insertar -> Objetos de aplicación -> Actualizar registro -> Asistente de formulario de actualización de registro y llenamos el cuadro de diálogo con la siguiente información (en mi caso le puse de nombre  a la vinculación modificar_consulta):

Clic en la imagen para ampliar

Al dar clic en Aceptar se creará automáticamente un formulario como el siguiente:

Ahora vamos a buscar el siguiente código en la página web que hizo Dreamweaver:

Clic en la imagen para ampliar

Ahí vamos a insertar la siguiente línea después de mysql_select_db($database_conexion_libros, $conexion_libros);:

$valor = $_GET[‘IdLibro’];

Y la línea que dice $query_modificar_consulta = “SELECT * FROM libros”; la modificamos de la siguiente manera:

$query_modificar_consulta = “SELECT * FROM libros where IdLibro=$valor”;

Nos queda algo así:

Clic en la imagen para ampliar

Como vemos lo único que hacemos es usar el método GET para obtener el ID del libro y cargamos los datos completos que se refieren a ese libro. Ahora nos vamos a index.php y seleccionamos la palabra Modificar y le hacemos un vínculo al siguiente enlace:

modificar.php?IdLibro=<?php echo $row_consulta_libros[‘IdLibro’]; ?>

Nos queda de la siguiente manera:

Clic en la imagen para ampliar

Presionamos F12 para probar.

Eliminar un registro

Primero creamos una página web llamada borrado_exitoso.php allí escribimos un mensaje que diga “El dato ha sido borrado correctamente” y ponemos un link a la página index.php.

Una vez hecho eso creamos un archivo llamado borrar.php y nos vamos al menú Insertar -> Objetos de aplicación -> Eliminar registro y llenamos el cuadro de diálogo con la siguiente información:

Clic en la imagen para ampliar

Hecho eso regresamos al archivo index.php y seleccionamos la palabra Borrar y le hacemos un link al siguiente enlace:

borrar.php?IdLibro=<?php echo $row_consulta_libros[‘IdLibro’]; ?>

Hecho eso presionamos F12 para probar la página web.

Listo!! Hemos creado una página web que permite interactuar con una base de datos de MySQL usando PHP sin programa casi nada. Todo lo hizo Dreamweaver.

Detalle de registros

Ahora les voy a enseñar una última opción que tiene Dreamweaver. Consiste en mostrar, para este caso, el Id del libro y el nombre. Al dar clic sobre el nombre nos mostrará toda la información del libro obtenida de la base de datos, y al igual que antes, sin programar absolutamente nada.

En el archivo index.php debajo y fuera del formulario de ingreso creamos un link a una página llamada libros.php (esto es solo para poder dirigirnos a la página que vamos a crear).

Hecho eso creamos una página llamada libros.php. En esa página creamos una nueva vinculación a la base de datos con el método que ya explicamos antes. A esta vinculación la llamaremos libros_consulta.

Ahora creamos otra página web que se llamará detalles_libros.php.

Hecho eso volvemos a la página libros.php y nos vamos a Insertar -> Objetos de aplicación -> Juego de páginas Maestro/Detalle. Llenamos el cuadro de diálogo de la siguiente manera:

Clic en la imagen para ampliar

Ahora explicaremos cada campo:

  • Juego de registros: Es el nombre de la vinculación.
  • Campos de página maestro: Son los campos que se visualizarán en la página maestro. En este caso solo queremos ver el Id del libro y el nombre del autor. Para quitar registros lo seleccionamos y damos clic en el símbolo menos.
  • Vincular con detalle desde: Es el campo que contendrá el enlace para ver el detalle del registro.
  • Pasar clave exclusiva: Es la clave primaria de la tabla.
  • Mostrar: Es el número de registros que se podrán ver en la tabla maestro.
  • Nombre de página detalle: Dirección de la página web donde se mostrará los detalles del registro.
  • Campos de la página Detalle: Son los campos que mostrará la página al dar clic en un elemento.

Damos clic en Aceptar. Hecho eso guardamos la página libros.php y la página detalle_libros.php. Pues ya te habrás dado cuenta que ambas páginas se modificaron.

Esto se crea en la página libros.php:

Clic en la imagen para ampliar

Y esto se crea en la página detalle_libros.php:

Clic en la imagen para ampliar

Ahora vamos a la página index.php y presionamos F12 para probar. Damos clic en el enlace a la página libros.php y tenemos lo siguiente:

Clic en la imagen para ampliar

Al dar clic en el nombre de un libro nos dará más detalles sobre el mismo:

Detalle de registros

Bien este es el final del tutorial Espero que les sirva. No olviden dejar sus preguntas, comentarios o sugerencias.

Pueden descargarse el programa completo en la siguiente dirección: http://mygnet.net/codigos/php/manejodebasedatos/consultar_ingresar_modificar_y_eliminar_registros_de_una_base_de_datos_de_mysql_con_php.3164

En esta ocasión haré un tutorial donde aprenderemos a hacer un mapa interactivo usando Flash.

El resultado final será el siguiente:

This movie requires Flash Player 9

En la universidad nos enviaron a hacer un mapa así en Flash, y la verdad nunca antes había hecho algo así. Después de buscar en Google algún tutorial en español, vi que no había suficiente información al respecto. Fue entonces que hice una búsqueda en inglés, puse en Google algo como “how to create an interactive map with flash” o “how to make an interactive map with flash”. Así conseguí dos páginas muy interesantes. Una de esas me sirvió para hacer el mapa y lo explicaré aquí. El otro me puede servir algún otro momento. Aunque ambos tutoriales son en inglés, están muy fáciles de entender, y si no lo entiendes puedes usar el traductor de Google.

Las páginas son:

Bueno ahora si pongamos manos a la obra. La herramienta que vamos a necesitar será Flash. En mi caso uso Macromedia Flash 8 (ahora de la Adobe). Con la versión CS3 y CS4 debe ser igual.

En este tutorial haremos un mapa interactivo del Ecuador. Ecuador tiene 24 provincias, en este ejemplo usaremos solo 2. El proceso con cada provincia es similar. En la Universidad hicimos un mapa de las provincias de Ecuador, pero como son 24 sería muy extenso explicarlo aquí.

Creando el mapa

1. Primero debemos conseguirnos un mapa el cual usaremos para el trabajo. Yo usaré este mapa:

Mapa político de Ecuador (clic en la imagen para ampliar)

Mapa político del Ecuador (clic en la imagen para ampliar)

2. Dentro del programa Flash nos vamos a Archivo -> Importar -> Importar a biblioteca y seleccionamos la imagen del mapa a usar.

3. Cambiamos las dimensiones del escenario de acuerdo a las dimensiones del mapa. En este caso las dimensiones son 700 x 492 pixeles. Como se muestra en la siguiente figura:

Clic en la imagen para ampliar

4. Arrastramos la imagen desde la Biblioteca al escenario y mientras está seleccionada la imagen en el panel de propiedades en posición X y posición Y escribimos el cero.

Clic en la imagen para ampliar

5. Cambiamos el nombre de la capa a “Fondo” (sin comillas, para cambiar el nombre damos doble clic sobre Capa 1) y la bloqueamos:

6. Ahora agregamos otra capa en Insertar -> Línea de tiempo -> Capa y la nombramos Mapa.

7. Escogemos la herramienta Pincel del panel de herramientas o presionamos la tecla B. Escogemos el tamaño del pincel que aparece en segundo lugar y el tipo circular y escogemos un color como se muestra en la siguiente figura:

Clic en la imagen para ampliar

7. Una vez seleccionada la herramienta pincel procedemos a pintar las provincias de la cual mostraremos algún tipo de información. En este caso solo serán dos provincias. Entonces siguiendo el mapa de fondo dibujamos de nuevo las provincias con el pincel, es decir, vamos a dibujar los botones del mapa interactivo:

Clic en la imagen para ampliar

En la imagen como pueden ver dibujé con el pincel dos provincias y luego usando la herramienta Cubo de pintura con el color #FFCC00 pinté sobre las provincias que acabé de dibujar.

8. Ahora damos clic en cualquier lugar fuera del escenario para asegurarnos que nada esté seleccionado. Luego seleccionamos con la herramienta Selección cualquiera de las provincias que hemos dibujado. Y mientras está seleccionada presionamos F8 para convertir en símbolo (también ésta opción está en Modificar -> Convertir en símbolo). En las opciones que aparecen le ponemos un nombre cualquiera  y en tipo escogemos la opción Botón.

Luego hacemos lo mismo con la otra provincia pero le ponemos otro nombre, en mi caso le pondré Guayas.

9. Ahora le pondremos un nombre a la instancia del botón. Para ello seleccionamos la provincia dándole un solo clic y en el panel de propiedades le ponemos un nombre, en este caso será pichincha_btn el primer botón y guayas_btn el segundo botón como se muestra en la siguiente imagen:

Clic en la imagen para ampliar

10. Damos doble clic en cualquiera de los botones (provincias) que tenemos para entrar en la opción del botón. Ahí tenemos cuatro opciones:

  • Reposo: Es cuando el botón aparece en la pantalla.
  • Sobre: Es cuando el puntero está sobre el botón.
  • Presionado: Es cuando se da clic sobre el botón pero sin soltar el clic.
  • Zona activa: Es el área del botón.

Lo que debemos hacer es dar clic sobre la opción Sobre y presionar 3 veces F6. De esta forma estamos creando fotogramas clave en la opción Reposo (que ya es fotograma clave por defecto), Sobre, Presionado y Zona Activa. Nos queda de esta manera:

11. Ahora damos clic sobre la opción Sobre y seleccionamos la provincia que creamos y en el panel de propiedades escogemos otro color:

Clic en la imagen para ampliar

Se debe hacer lo mismo con cada provincia. Lo que estamos haciendo es que la provincia cambie de color cuando el puntero pase por encima de la provincia. Se puede probar la aplicación presionado Ctrl + Enter.

Se puede hacer lo mismo en la opción Presionado (cambiar el color).

Una vez terminados estos pasos bloqueamos la capa.

12. Creamos otra capa y la nombramos Marker. Con esa capa seleccionada importamos al escenario la siguiente imagen:

Aceptamos tal cual aparecen las opciones. Ubicamos esta imagen fuera del escenario como se muestra en la siguiente figura:

Clic en la imagen para ampliar

13.  Damos clic en cualquier parte fuera del escenario para asegurarnos que nada está seleccionado. Luego seleccionamos la imagen que acabamos de insertar y presionamos F8 para convertirlo en símbolo.

En el cuadro que aparece le ponemos el nombre myMarker y en tipo escogemos Clip de película como se muestra en la siguiente imagen.

14. Damos doble clic en la imagen del marker para entrar al clip de película. Ahí encontramos la imagen del marker y un símbolo de más en el centro de la figura:

Lo que debemos hacer es seleccionar la figura del marker y moverlo hasta que el símbolo del + aparezca en la punta inferior de la figura, como se muestra a continuación:

15. Estando dentro del marker renombramos la Capa1 y la llamamos Marker y añadimos otra capa adicional llamada Cities:

16. Seleccionamos el Fotograma 1 de la capa Cities y presionamos F9 para entrar al panel de Acciones, ahí escribimos el código:

stop();

Clic en la imagen para ampliar

17.  Ahora seleccionamos el fotograma 1 de la capa Marker y presionamos F5 (estamos solo agregando un fotograma, no un fotograma clave) el número de veces que tengamos botones o en este caso provincias. Para este ejemplo, tengo dos provincias, por lo tanto presionaré F5 dos veces.

18. Damos clic en el fotograma 2 de la capa Cities y presionamos F6 para crear un fotograma clave. Y hacemos el mismo procedimiento en el fotograma 3 de la capa Cities y tenemos algo así:

Antes de avanzar para este ejemplo voy a usar las siguientes imágenes:

Thumbnail de la provincia de Pichincha

Thumbnail de la provincia del Guayas

19. Damos clic en el fotograma 2 de la capa Cities. Nos vamos a Archivo -> Importar -> Importar a escenario y escogemos la imagen pichincha.jpg que está arriba. En el mensaje que aparece escogemos “No reemplazar elementos ya existentes”. Si la imagen no aparece con las dimensiones que es, la seleccionamos y en propiedades ponemos en ancho 150 y  en alto 100. Ubicamos la imagen sobre la imagen marker. Luego con la herramienta Texto (letra T) escribimos la palabra Pichincha y la ponemos bajo la imagen.

Nos debe quedar algo como esto:

Cuando escribimos la palabra Pichincha seleccionamos el texto y en el panel de propiedades debemos asegurarnos que no esté habilitada la opción “Seleccionable”:

Clic en la imagen para ampliar

20. Ahora seleccionamos el mismo fotograma 2 de la capa Cities y en el panel de propiedades le ponemos el nombre “pichincha” (sin comillas).

Clic en la imagen para ampliar

21. Ahora repetimos los pasos 19 y 20 en el fotograma 3 de la capa Cities, pero usamos la imagen guayas.jpg el texto será Guayas y el nombre del fotograma 3 es guayas:

Clic en la imagen para ampliar

No olvidemos guardar el documento. Ahora bloqueamos ambas capas y volvemos al escenario principal dando clic en Escena 1.

Estando en el escenario seleccionamos la figura marker y en el panel de propiedades el ponemos el nombre marker_mc:

22. Creamos una nueva capa llamada Actions (no olvidemos que ya estamos en el escenario principal, es decir, fuera de la imagen marker). Damos clic en el fotograma 1 de la capa Actions y presionamos F9. Ahí vamos a ingresar el siguiente código que saqué de una de las páginas web que puse  anteriormente:

stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;

var cities:Array = [“pichincha”, “guayas”]

function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, “_x”,
Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, “_y”,
Back.easeOut, currentY, targetY, 1.5, true);
}

for (var i = 0; i<cities.length; i++){
var my_btn = this[cities[i]+”_btn”];
my_btn.myCity = cities[i];
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}

my_btn.onRollOut = function() {
mover( 0, 0);
marker_mc.gotoAndStop(this.myCity);
}
}

Dentro de la variable var cities:Array = [“pichincha”, “guayas”] debemos agregar los nombre de cada botón que hemos creado (cada provincia que dibujamos con el pincel es un botón). El nombre pichincha ES EL MISMO NOMBRE QUE TIENE EL FOTOGRAMA 1 DE LA CAPA CITIES DE MARKER QUE HICIMOS ANTERIORMENTE. Debe ser el mismo nombre. Además recordemos que pusimos al botón el nombre pichincha_btn, pichincha antes del btn debe ser igual al nombre del array también.

Con este código estamos dando el efecto para que el marker se aparezca sobre la provincia cuando el puntero esté encima, y cuando quitemos el puntero el marker regresa a la posición X=0 y Y=0.

Guardamos el documento y presi0namos Ctrl + Enter. Ahora cuando pongamos el puntero sobre una provincia nos debe aparecer la imagen:

Clic en la imagen para ampliar

Agregando contenido al mapa

Ahora vamos a la segunda parte de este tutorial. Vamos a hacer que al dar clic en la provincia aparezca un menú, y según donde demos clic nos muestre cierta información.

Vamos a bloquear las capas Fondo, Mapa, Marker y Actions dando clic en el candado en la capa correspondiente.

23. Estando en la Escena 1 vamos a crear una nueva capa llamada “stop” (sin comillas). Nos ubicamos en el fotograma 1 y presionamos F6 dos veces (porque tenemos solo dos botones o provincias).

24. Damos clic en el fotograma 1 de la capa stop y presionamos F9 y escribimos el código:

stop();

Y repetimos el mismo paso en los fotogramas 2 y 3 de la capa stop. Uva vez finalizado bloqueamos la capa stop. Recordemos que podemos agregar código ActionScript a una capa aunque esté bloqueada. No olvidemos desbloquear una capa si necesitamos modificar algo en ella.

25. Creamos una nueva capa llamada “Contenido” (sin comillas). Damos clic en el fotograma 1 de la capa Contenido y presionamos F6 dos veces (porque tenemos dos provincias).

26. Seleccionamos el fotograma 1 de la capa Contenido y le ponemos el nombre de instancia “Inicio” (sin comillas), repetimos el procedimiento con el fotograma 2 pero le llamamos “cont_pichincha” y al fotograma 3 le llamamos “cont_guayas” (ambos sin comillas).

Tenemos algo así:

Clic en la imagen para ampliar

27. Damos clic en el fotograma 2 de la capa Contenido (es decir, en el fotograma llamado cont_pichincha). Escogemos la herramienta Rectángulo escogemos un color de fondo blanco y sin línea de borde. y dibujamos un rectángulo que cubra todo el escenario (no importa que se salga de los límites).

28. Una vez dibujado tenemos un escenario blanco, ahora seleccionamos el rectángulo que acabamos de dibujar y vamos al panel de Mezclador de colores (si no aparece vamos al menú Ventana -> Mezclador de colores) damos clic en el botón color de relleno  y en la opción Alfa escogemos 92%:

Clic en la imagen para ampliar

29. Dentro del rectángulo escribimos el texto Pichincha o cualquier otra cosa que queramos mostrar. Recordemos que estamos en el fotograma 2 de la capa Contenido.

Luego repetimos el procedimiento para el fotograma 3 de la capa Contenido, es decir, cont_guayas.

A partir de aquí explicaré los ejemplos solo para la provincia de Pichincha. Se debe hacer lo mismo para cada provincia o botón que tenga nuestro mapa interactivo.

Una vez tengamos el texto que queramos mostrar en cada capa de cada provincia bloqueamos la capa. En mi caso me quedó así:

Clic en la imagen para ampliar.

30. Ahora creamos otra capa que se llamará “Volver” (sin comillas). Y damos clic en el fotograma 2 de la capa Volver y presionamos F6 una sola vez. En esta capa lo que vamos a hacer es que aparezca la palabra Volver, para regresar a la pantalla principal. Obviamente este texto debe aparecer únicamente desde el fotograma 2, ya que el 1 es a donde queremos volver. Así que si tenemos en la capa contenido 24 fotogramas de las 24 provincias del Ecuador, basta con poner el fotograma clave en el fotograma 2 de la capa Volver y no en cada fotograma. Para entender mejor haz la prueba con este ejercicio. Tenemos el fotograma cont_pichincha y cont_guayas, con solo poner el fotograma clave en el fotograma 2 de la capa volver aparecerá el texto en todos los fotogramas de la capa Contenido desde el fotograma 2 en adelante.

31. Damos clic en el fotograma 2 de la capa Volver y escogemos la herramienta de texto y escribimos la palabra Volver en cualquier parte del rectángulo que dibujamos anteriormente.

32. Seleccionamos el texto que acabamos de escribir y presionamos F8 para convertirlo en símbolo. Le ponemos el nombre volver_btn y en tipo escogemos Botón:

33. Damos doble clic al texto volver para entrar en las opciones de botón. Damos clic en la opción Sobre y presionamos F6 tres veces.

34. Damos clic en Sobre, seleccionamos el texto y lo cambiamos de color.

35. Damos clic en Zona activa y escogemos la herramienta Rectángulo, escogemos cualquier color de fondo y dibujamos un rectángulo que cubra la palabra Volver (así el usuario podrá dar clic sobre el rectángulo que dibujamos y no necesariamente sobre la palabra Volver, además tomemos en cuenta que el rectángulo será invisible, por eso no importa el color que escojamos).

Clic en la imagen para ampliar

Volvemos a Escena 1 y bloqueamos la capa Volver.

36. Creamos otra capa llamada Menu_botones.  Vamos al fotograma 1 de la capa Menu_botones y presionamos F6 una vez.

37. Damos clic en el fotograma 2 de la capa Menu_botones y escogemos la herramienta Rectángulo y dibujamos un rectángulo de 160 x 35 pixeles con cualquier color y lo ubicamos a la izquierda del escenario. Mientras esté seleccionado el rectángulo nos vamos al panel Mezclador de colores y en tipo escogemos Lineal. El color de la izquierda le ponemos #FFCC00 y el de la derecha le ponemos #000000 (blanco).

Clic en la imagen para ampliar

38. Seleccionamos el rectángulo y presionamos F8. Le ponemos el nombre menu_btn y el tipo Botón.

39. Damos doble clic el rectángulo para ingresar a las propiedades del botón. Damos clic en Sobre y presionamos F6 tres veces.

40. Damos clic de nuevo en Sobre seleccionamos el rectángulo y vamos al menú Modificar -> Transformar -> Voltear Horizontalmente. Luego regresamos a Escena 1.

41. En la Biblioteca (Ventana -> Biblioteca) nos aparece el símbolo que acabamos de crear, lo seleccionamos y lo arrastramos al escenario. Así tenemos dos botones. Escogemos la herramienta de Texto y escribimos sobre cada rectángulo cualquier texto. En mi caso voy a poner “Menú 1″ y “Menú 2″.  Este texto también tiene que tener deshabilitada la opción Seleccionable. Tenemos algo así:

Clic en la imagen para ampliar

41. Ahora que ya tenemos el menú damos clic en el fotograma 3 de la capa Menu_botones y presionamos F6 para que el menú se copie en esa capa.

Antes de asignar los eventos a los botones vamos a agregar un poco de código ActionScript.

42. Vamos a la capa Contenido y hacemos clic en el fotograma 2 (en nuestro caso el fotograma que se llama cont_pichincha) y presionamos la tecla F9 y agregamos el siguiente código:

marker_mc._visible=false
pichincha_btn.enabled=false
guayas_btn.enabled=false

De esta forma estamos haciendo invisible al marker y estamos inhabilitando las provincias (botones).

43. Repetimos el paso anterior en el fotograma 3 de la capa Contenido (cont_guayas).

44. Damos clic en el fotograma 2 de la capa Volver y seleccionamos el texto Volver que escribimos antes (primero debemos asegurarnos que la capa esté desbloqueada). Una vez SELECCIONADA la palabra Volver vamos al menú Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta:

Clic en la imagen para ampliar

En el cuadro de diálogo donde dice “Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película” escribimos Inicio (es el nombre del fotograma 1 de la capa Contenido) . Y damos clic en Aceptar.

45. Estando seleccionado el texto Volver presionamos F9 y vemos que Flash ha escrito automáticamente el siguiente código ActionScript:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(“Inicio”);
//End Behavior

}

Después de donde dice //End Behavior agregamos el siguiente código:

//activar mapa
marker_mc._visible=true
pichincha_btn.enabled=true
guayas_btn.enabled=true

Con esto hacemos visible el marker y habilitamos los botones del mapa.

46. Ahora vamos a dar comportamientos a las provincias. Para eso desbloqueamos la capa Mapa y seleccionamos la provincia Pichincha (es la que está en la parte superior, al medio) y nos vamos al menú Ventana -> Comportamientos y seguimos los mismos pasos que antes: damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en “Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película” escribimos cont_pichincha y damos clic en Aceptar.

47. Repetimos el paso anterior para la provincia del Guayas, ahí el nombre del fotograma a especificar es cont_guayas.

Guardamos el proyecto y presionamos Ctrl + Enter para probar nuestra película. Ahora al dar clic sobre una provincia se aparece el contenido de cada una de ellas.

Ahora vamos a crear las pantallas que se mostrarán al hacer clic sobre Menú 1 y Menú 2-

48. Creamos una capa capa y la nombramos “Menu 1″ (sin comillas). Hacemos clic en el fotograma 2 de la capa Menu 1 y presionamos F6 y nombramos a este fotograma como “menu1_pichincha” (sin comillas).

Clic en la imagen para ampliar

49. Estando en ese fotograma escogemos la herramienta texto y escribimos cualquier cosa en el espacio que tenemos. En mi caso me quedó así:

Clic en la imagen para ampliar

En las propiedades el texto debemos asegurarnos que en tipo de línea esté multilínea:

Clic en la imagen para ampliar

50. Escogemos el texto que escribimos con la herramienta de selección y le ponemos el nombre de instancia “txt_pichinchainfo”:

Clic en la imagen para ampliar

51. Escogemos el fotograma 2 de la capa Menu 1 (el que se llama menu1_pichincha) y presionamos F9 allí escribimos el siguiente código:

txt_pichinchainfo._visible=false

Con esto estamos haciendo invisible el cuadro de texto que creamos antes.

52. Damos clic en el fotograma 3 de la capa Menu 1 y presionamos F6 para copiar el contenido del anterior fotograma. Llamamos a este fotograma “menu1_guayas” (sin comillas). Escogemos el texto que aparece y le cambiamos. Seleccionamos el texto y le ponemos como nombre de instancia “txt_guayasinfo” (sin comillas). Seleccionamos el fotograma 3 de la capa Menú 1 y presionamos F9 y agregamos el código:

txt_guayasinfo._visible=false

Hasta ahora tenemos el contenido del Menú 1. Vamos a hacer el contenido del Menú 2.

53. Creamos otra capa y le llamamos “Menu 2″ (sin comillas). Luego bloqueamos y hacemos invisible la capa Menu 1, para eso hacemos clic en la imagen del candado y del ojo a lado de la capa:

54. Damos clic en el fotograma 2 de la capa Menu 2 y presionamos F6 y nombramos al fotograma como “menu2_pichincha” (sin comillas).

55. Escogemos la herramienta de texto y escribimos cualquier texto. Seleccionamos el texto con la herramienta de Selección (V) y le ponemos el nombre de instancia “txt_pichinchainfo2″ (sin comillas).

Clic en la imagen para ampliar

56. Damos clic en el fotograma 2 de la capa Menu 2 y presionamos F9 y agregamos el siguiente código:

txt_pichinchainfo2._visible=false

57. Damos clic en el fotograma 3 de la capa Menu 2 y presionamos F6. Llamamos a este fotograma “menu2_guayas” (sin comillas). Cambiamos el contenido del texto, lo seleccionamos y lo llamamos “txt_guayasinfo2″ (sin comillas). Damos clic en el fotograma 3 de la capa Menu 2 y presionamos F9, ahi escribimos el siguiente código:

txt_guayasinfo2._visible=false

Ya para finalizar vamos a llamarles a estos contenidos con los botones que creamos anteriormente. Ahora bloqueamos y hacemos invisible la capa Menu 2.

58. Vamos a la capa Menu_botones (nos aseguramos de que esté desbloqueada) y damos clic en el fotograma 2 y seleccionamos el primer botón (el que tiene el texto Menú 1, pero nos aseguramos que esté seleccionado el botón, no el texto pues son dos elementos distintos). Luego vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en “Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película” escribimos “menu1_pichincha” (sin comillas) y damos clic en Aceptar.

Clic en la imagen para ampliar

59. Ahora seleccionamos nuevamente el botón del menú 1 y presionamos F9. Ahí aparece el siguiente código:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(“menu1_pichincha”);
//End Behavior

}

Después de //End Behavior agregamos el siguiente código:

txt_pichinchainfo._visible=true
txt_pichinchainfo2._visible=false

Con esto hacemos visible el contenido de txt_pichinchainfo y hacemos invisible el contenido de txt_pichinchainfo2.

60. Ahora seleccionamos el botón que dice Menú 2 y seguimos los pasos anteriores: vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en “Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película” escribimos “menu2_pichincha” (sin comillas) y damos clic en Aceptar.

61. Seleccionamos el botón del Menú 2 y presionamos F9 y existe el siguiente código:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(“menu2_pichincha”);
//End Behavior

}

Después de //End Behavior escribimos el siguiente código:

txt_pichinchainfo._visible=false
txt_pichinchainfo2._visible=true

Presionamos Ctrl + Enter para probar la película. Por el momento debe funcionar la provincia de Pichincha con su respectivo menú.

Ahora le vamos a dar funciones al menú de la provincia del Guayas.

62. Damos clic en el fotograma 3 de la capa Menu_botones. Damos clic fuera del escenario para asegurarnos que nada esté seleccionado. Luego seleccionamos el botón que dice Menú 1 y seguimos los pasos anteriores: vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en “Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película” escribimos “menu1_guayas” (sin comillas) y damos clic en Aceptar.

63. Seleccionamos el botón de Menú 1 y presionamos F9 y aparece el código:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(“menu1_guayas”);
//End Behavior

}

Después de //End Behavior agregamos el código:

txt_guayasinfo._visible=true
txt_guayasinfo2._visible=false

64. Repetimos los pasos 62 y 63 pero el nombre del comportamiento será: menu2_guayas. Al presionar F9 al código existente le agregamos:

txt_guayasinfo._visible=false
txt_guayasinfo2._visible=true

Guardamos el proyecto y presionamos Ctrl + Enter para probar la película.

Y eso es todo para este tutorial. Como pueden ver hacer un mapa interactivo es de mucho trabajo, aquí expliqué solo con 2 provincias, en la universidad tocó hacer con las 24 provincias y cada una tenía un menú con tres opciones.

Espero que les guste este tutorial. No olviden dejar sus comentarios, preguntas o sugerencias.

Pueden descargar el programa completo en el siguiente enlace: http://mygnet.net/it/descargas/codigos/mapa_interactivo_hecho_en_flash.3125.zip

Polls

¿Qué lenguaje de programación utilizas más?

View Results

Loading ... Loading ...
Síguenos en Twitter
Cyberexplorador en Twitter
Comparte este blog
Bookmark and Share
Publicidad
Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: