En este ejemplo con el CANVAS de HTML5 vamos a generar una cuadrícula sobre el CANVAS , generando el efecto de un papel cuadriculado. De esta forma veremos como funcionan los métodos .moveTo() y la capacidad de dibujar líneas con .lineTo().
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
Para generar el efecto de cuadrícula sobre el CANVAS vamos a crear dos bucles que dibujen líneas: uno horizontal y otro verticalmente. En el bucle lo que iremos será ir moviendo el punto de inicio de 10 pixels en 10 pixels hacía un lado o hacía otro.
for (var x=0; x<=300; x=x+10){
ctx.moveTo(x,0);
ctx.lineTo(x,300);
}
Vemos que vamos cambiando las coordenadas del origen de la línea mediante el método .moveTo(), el cual nos pone en el inicio de la trazada y con .lineTo() dibujamos la línea. Todo respetando los límites del CANVAS.
Ahora en la otra dirección, por la coordenada Y.
for (var y=0; y<=300; y=y+10){
ctx.moveTo(0,y);
ctx.lineTo(300,y);
}
Para que finalmente se pueda dibujar la cuadrícula nos quedan dos cosas: definir el color de las líneas y forzar su pintado mediante el método .stroke().
ctx.strokeStyle = "#f00";
ctx.stroke();
Ya tenemos creada una cuadrícula sobre un CANVAS de HTML5.
Vídeos sobre HTML5
Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.
Ahora vamos a ver cómo cargar una ruta con Google Maps v3. Lo primero que haremos será cargar el API de Google Maps v3.
E instanciamos nuestro Mapa mediante la clase google.maps.Map:
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.674389,-4.700432),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
Vemos que en el objeto mapOptions pasamos toda la parametrización del mapa.
Ahora vamos a definir la Ruta. Para la Ruta tenemos que saber que Google Maps v3 nos ofrece un par de objetos. El primero y más importante es google.maps.DirectionsService. Este objeto será el encargado de calcularnos una ruta y devolvernos un objeto DirectionsResult con toda la información de la ruta.
Para que el objeto DirectionsService nos calcule la ruta le tenemos que pasar un objeto DirectionsRequest indicándole la información de la ruta: origen, dsetino, forma de desplazamiento,…
var request = {
origin:"Madrid",
destination:"Avila",
travelMode: google.maps.TravelMode.DRIVING
};
Este objeto DirectionsRequest se lo pasamos al DirectionsService para que calcule la ruta. Para ello ejecutamos el método .route()
El resultado del método .route() devuelve el DirectionsResult dentro del atributo result.
Una vez que tenemos el Resultado podemos hacer dos cosas. La primera será explotarlo para acceder a toda la información que contiene de las rutas y la segunda será representarlo visualmente. Para este segundo caso contamos con el objeto google.maps.DirectionsRenderer. Dicho objeto es capaz de renderizar un mapa o un texto con un DirectionsResult.
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
Para configurar el DirectionsRender utilizamos .setMap() para indicarle cual es el mapa -objeto Map- y .setPanel() para saber cual es la capa del documento HTML en la que volcar la ruta.
Solo nos quedará pasarle el DirectionsResult en la ejecución del método .route()
Hemos visto múltiples ejemplos para manipular el CANVAS. Pero ¿cómo podemos saber si nuestro navegador soporta el elemento CANVAS de HTML5? Pues para detectar el soporte del CANVAS de HTML5 tenemos dos opciones. La primera es recurrir a una librería que detecte capacidades del navegador, como Modernizr, mientras que la segunda será accediendo directamente a las propiedades del DOM.
En el caso de utilizar Modernizr lo primero que tenemos que hacer es cargar la librería:
Ahora, mediante el objeto Modernizr vamos a preguntar por la capacidad canvas.
if (Modernizr.canvas)
soporte.innerHTML=soporte.innerHTML + "<br>SI hay soporte del CANVAS (por Modernizr)";
else
soporte.innerHTML=soporte.innerHTML + "<br>NO hay soporte del CANVAS (por Modernizr)";
Si no queremos depender de una librería como Modernizr podemos utilizar directamente el DOM, así lo primero que haremos será obtener una referencia a la capa sobre la que queremos cargar el mapa.
var canvas = document.getElementById("micanvas");
Y lo siguiente que haremos será comprobar si tiene el método .getContext. En caso afirmativo es que tenemos soporte del CANVAS.
if (canvas.getContext) {
soporte.innerHTML="SI hay soporte del CANVAS";
} else {
soporte.innerHTML="NO hay soporte del CANVAS";
}
En este segundo caso nos ahorramos la necesidad de depender de una librería de terceros como Modernizr.
Por último indicar que no está de más el insertar un contenido aleatorio a la etiqueta CANVAS dentro de la estructura del documento HTML5, ya sea un texto avisando de la falta de soporte del CANVAS o una imagen representativa de lo que iba a cargar el CANVAS.
Vídeos sobre HTML5
Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.
Ahora pasaremos a crear nuestro código Javascript. Lo que vamos a hacer es crear un objeto de tipo google.maps.Map. A este constructor le vamos a pasar una referencia de la capa sobre la que se va a cargar y las opciones del mapa.
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
Como podemos apreciar en el código le hemos pasado un campo mapOptions. Dicho campo reune las propiedades relativas al mapa, como el punto central del mapa, el tipo de mapa a cargar, el zoom a aplicar,… el código nos queda de la siguiente forma:
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.674389,-4.700432),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Todo este código lo vamos a poner en un método initialize.
function initialize(){
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.674389,-4.700432),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
Y es que este método initialize lo vamos a ejecutar nada más cargar la página. Es por ello, que a la ejecución del evento onLoad de la página le asociamos este método.
Por último tenemos que tener unas consideraciones para el funcionamiento de Google Maps v3 y es que tanto el BODY como el HTML del documento dónde carguemos el mapa tienen que tener una altura de 100%. Es por ello que vamos a añadir el siguiente estilo:
En múltiples ejemplos hemos visto cómo poner contenido sobre un CANVAS de HTML5. En este caso vamos a aprender como podemos limpiar el contenido del CANVAS. Es decir, eliminar cualquier dibujo o trazo que hayamos insertado en él.
Así que para empezar necesitamos tener un elemento CANVAS con contenido. Podemos volcar lo siguiente:
<canvas id="micanvas" width="300px" height="300px">
Su navegador no soporta en elemento CANVAS</canvas>
<br>
<button id="limpiar">Limpiar Canvas</button>
El insertarle contenido:
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
for (var x=0; x<=300; x=x+10){
ctx.moveTo(x,0);
ctx.lineTo(x,300);
}
for (var y=0; y<=300; y=y+10){
ctx.moveTo(0,y);
ctx.lineTo(300,y);
}
ctx.strokeStyle = "#f212aa";
ctx.stroke();
Hemos creado un elemento CANVAS y hemos dibujado líneas sobre él. Además hemos añadido un botón, con id «limpiar», que será el encargado de limpiar el contenido de nuestro CANVAS.
Para proceder a la limpieza del CANVAS solo tenemos que recurrir a un «pequeño truco», el cual consiste en asignar un nuevo ancho al elemento CANVAS. Pero, ¿cuál será el nuevo ancho? Pues exactamente el mismo ancho que tiene en ese momento. Si bien, por el acto de asignar el nuevo ancho se limpiará el contenido del CANVAS.
El código quedará de la siguiente forma:
var limpiar = document.getElementById("limpiar");
limpiar.addEventListener("click",function(){
canvas.width=canvas.width;
},false);
Lo que hemos hecho ha sido dar el mismo valor de la propiedad width del CANVAS. Y ya tenemos en blanco, de nuevo, nuestro CANVAS.
Vídeos sobre HTML5
Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.
Java ME (Java Micro Edition) es una tecnología que esta enfocada no solo a teléfonos móviles si no a todo dispositivo que funcione con Java. En ese grupo podemos encontrar decodificadores de TV, lectores de tarjeta y demás.
En este primer artículo vamos a realizar un código sencillo que nos muestre un Hola Mundo con Java ME Mediante este codigo lo podras probar mas facilmente en un IDE el cual sea de tu preferencia ya sea Netbeans o Eclipse. Este codigo esta enfocado a telefonos móviles los cuales tienen una cierta configuracion y perfil.
Cuando hablamos de configuracion nos referimos a que debido a las diferentes capacidades de procesamiento de los telefonos móviles, el API de Java, se reduce dejando solo las funcionalidades básicas de dicho dispositivo.
En cuanto al perfil nos referimos a que diferentes móviles pueden tener diferentes caracteristicas, las cuales podrían ser una camara integrada o una pantalla tactil es en esto en las caracteristicas extra o especificas de los móviles.
Este código de Hola Mundo con Java ME vamos a realizarlo con un Perfil MIDP 2.0 y una configuracion CLDC 1.0 , el cual solo nos imprimirá en la pantalla de nuestro móvil el mensaje HOLA MUNDO.
Descargando Java ME
Lo primero que tienes que hacer antes de empezar a desarrollar el código Hola Mundo con Java ME es el descargarte la librería Java ME.
En este Kit encontraremos, entre otras cosas, las definiciones de los dispositivos y los perfiles y configuraciones a los que hemos hecho mención anteriormente.
Empezando a codificar el Hola Mundo con Java ME
Lo primero que tenemos que saber es que las clases que construyamos para Java ME extenderán de la clase MIDlet. Esta clase MIDlet es la que nos proporcionara los metdos para el ciclo de vida de la aplicacion
public class HolaMundo extends MIDlet {...}
Como la clase MIDlet es abstracta necesitamos sobreescribir sus metodos.
Por lo cual tendremos que importarlas antes de nuestro código.
Definiremos dos variables que nos servirán para mostrar en pantalla mi mensaje. Por un lado Display es sencillamente mi pantalla en el móvil, la variable mycanvas es en la que nostros dibujamos nuestro mensaje.
Como hemos visto antes, la gestión de insertar la cadena se la hemos dejado a nuestra clase MyCanvas. La clase MyCanvas extiende de Canvas la cual es abstracta, debemos implementar su metodo paint(Graphics).
En el método paint tenemos un objeto Graphics el cual servirá para escribir nuestro «Hola Mundo», una característica de esta clase es que cuando se hace una instacia de ella, se llama al metodo paint para que dibuje lo que nosotros pusimos dentro del método.
También hemos añadido el método .setColor, el cual indica que el texto a insertar es blanco. Esto lo necesitamos ya que el fondo del Canvas es negro y no se verían las letras.
Probando la aplicación en emulador
Si probais la aplicación en el emulador que viene con el Kit de desarrollo de Java ME de Oracle obtendréis un resultado como el que se a continuación:
Pues con este código tenemos nuestra primera aplicación Hola Mundo con Java ME. Espero que os haya gustado.
Vídeos sobre Java
Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.
Con esto de estar en plenas Olimpiadas de Londres 2012 y explicando ejemplos de uso de círculos en HTML5, se me ocurrió explicar el uso del Canvas y del HTML5 para recrear los aros olímpicos.
Veamos lo sencillo que es crear los aros olímpicos con el elemento Canvas y HTML5. Una vez que tenemos nuestro Canvas dentro de la página y una referencia a él…
<canvas id="micanvas" width="600px" height="300px">
Su navegador no soporta en elemento CANVAS</canvas>
<script>
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
</script>
Nos vamos a dedicar a describir los círculos de la parte superior. El azul, negro y rojo. Tal y como vimos en el ejemplo de Dibujar un círculo sobre el Canvas de HTML5 lo que tenemos que hacer es jugar con la función .arc().
Los tres círculos superiores los describiríamos de la siguiente forma:
En este código podemos ver cosas muy interesantes. La primera es que para cada círculo las secuencias de pintado empiezan con un .beginPath() y terminan con un .stroke(). Si no hacemos esto, se aplicará la última configuración indicada.
El color del aro lo hacemos mediante el borde y sus propiedades .strokeStyle y .lineWidth.
Importante es el relleno del círculo. Y es que en verdad el círculo no tiene relleno. Tiene un interior transparente, ya que los aros se entrelazan entre si. Es por ello que recurrimos a la función rgba, cuyo último parámetro es la transparencia del color. En este caso, aplicamos una transparencia total, es decir 0.
ctx.fillStyle="rgba(255,255,0,0)";
El círculo completo lo obtenemos dibujando un arco de 0 a 360 grados.
ctx.arc(300,60,50,0,(Math.PI/180)*360,true);
Una vez que tenemos los circulos superiores vamos a por los inferiores. A por el amarillo y el verde. En este caso vemos que tienen el efecto de entrelazado, y es por ello que vemos que no son dos círculos enteros, si no que son dos arcos. Si bien, para nuestro uso del Canvas y del HTML5 no será un problema, ya que pintamos arcos y no círculos.
Por lo tanto para los aros inferiores vamos dibujar dos arcos. El primero será el de la derecha que irá del ángulo 0 al 265 y el segundo el de la izquierda que irá del ángulo 248 al angulo 20.
El resto de técnicas serán las mismas que para los aros de la parte superior. Con este sencillo código tenemos creados nuestros aros olímpicos con Canvas y HTML5.
Vídeos sobre HTML5
Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.
Como muchos sabréis Mozilla lleva ya bastante tiempo desarrollando Mozilla Persona (Antes llamado BrowserID) para ser uno de los estándares en identificación centralizada y dar una alternativas a los actuales sistemas.
¿Pero que tiene de diferente Mozilla Persona de OpenID o Facebook Connect?
La primera diferencia significativa es que Mozilla no filtra información a terceros.
Es mucho más sencillo para el usuario a la hora de registrarse.
Facilidades al desarrollador, con una comunidad entera de personas que colaboran entre si para facilitar la documentación.
A mi personalmente me parece un gran avance a la hora de intentar unificar Internet, y mas de una empresa como Mozilla (si lo reconozco soy algo mitómano), ademas de que respeta todos los estándares, utiliza un diseño bastante minimalista y queda bien en todos los sitios web.
Bien después de esta pseudo presentación, vamos a ver como podemos conectarnos desde PHP5 a los servidores de Mozilla para verificar las sesiones, también tocaremos algo de front-end para explicar la fachada.
Vamos a empezar hablando del back-end que debemos utilizar en nuestro servidor, para el ejemplo que voy a dar es necesario una versión de PHP igual o superior a la 5, tener activado el modulo Open SSL, tener activado fopen.
Contectando con Mozilla Personas
En primer lugar vamos a crear una clase que nos realice todas las gestiones de la conexión con Mozilla Personas. Esta clase la llamaremos class.mozilla.php. Dentro de ella encapsularemos los métodos necesarios para conectarnos a Mozilla Personas y para que podamos instanciarla desde varios sitios.
En primer lugar definiremos una constante con el servidor de Mozilla Personas que realiza las validaciones:
El primer método será build_query. Este método será el que construya la query que le vamos a enviar a Mozilla Personas.
private function build_query(){
//Creamos un array con la solicitud recibida por el cliente y la direccion url de nuestro dominio.
$httpArray = array( 'assertion' => $this->_assertion,
'audience' => urlencode($this->_localURL));
//Codificamos los datos en formato URL
$data = http_build_query($httpArray);
// Creamos la peticion y las cabezeras HTTP.
$this->_QueryHTTP = array('http' => array( 'method' => 'POST',
'content' => $data,
'header' => "Content-type: application/x-www-form-urlencoded\r\n"
. "Content-Length: " . strlen($data) . "\r\n")
);
}
El conjunto de datos que enviamos estará compuesto por el assertion, que nos llega desde el cliente, y por la URL sobre la que queremos realizar la validación.
Lo siguiente será realizar el envío de estos datos al servidor de Mozilla Personas. Para ello nos vamos a apoyar en la clase fopen.
public function set_http_request(){
//Creamos el flujo de texto que sera enviado a Mozilla desde la propiedad _QueryHTTP.
$ctx = stream_context_create($this->_QueryHTTP);
//Creamos la conexión con mozilla y enviamos el contexto de la petición.
$fp = fopen(self::REMOTE_URL, 'rb', false, $ctx);
//Si la conexión fue correcta.
if ($fp) {
//Leemos el contenido de la respuesta.
$result = stream_get_contents($fp);
//Asignamos a la propiedad _RequestJSON la respuesta descodificada en Json.
$this->_RequestJSON = json_decode($result);
return true;
}
}
Si la validación es correcta Mozilla Personas nos devolverá algo del estilo:
Nosotros nos los guardamos para poder acceder al contenido del resultado. Sobre todo a los campos status y email.
Proceso de login
En el proceso de login lo que haremos será interactuar con los métodos de nuestra clase class.mozilla.php. Para ello lo primero que haremos será incluirla e instanciarla.
//Requerimos de la clase ya antes expuesta
require_once('class.mozilla.php');
//Creamos el objecto con el valor que se recibe desde el POST y nuestro Dominio
$objMozilla = new Mozilla_Persona($_POST['assertion'], 'lineadecodigo.com');
Como podéis ver le pasamos el nombre del servidor sobre el que queremos crear la validación.
Lo siguiente será realizar el envío de datos con el método que creamos anteriormente, set_http_request, y validar si se ha producido el login de forma correcta. Si es así accedemos al email, guardandolo en la sesión y devolvemos mediante JSON los datos el estado y la acción de new. Esta acción nos servirá para refrescar la página.
//Comprobamos que la conexión se haya efectuado correctamente
if($objMozilla->set_http_request()){
//Comprobamos si la identificación fue correta
if($objMozilla->get_is_login()) {
//Asignamos el correo a la variable de session
$_SESSION['email'] = $objMozilla->get_email();
//Se imprime que todo fue correcto en formato Json
echo json_encode(array("status" => "okay", "action" => 'new'));
}
}
Front-end de nuestra aplicación
Ahora pasaremos a el front-end, es necesario JQuery y la librería include.js de Mozilla Persona.
El uso de la librería include.js es primordial ya que es la que tiene toda la parte visual de la autentificación de Mozilla Personas. Para ello tendremos que llamar al método navigator.id.get.
Este método espera una función que realizará comunicación AJAX vía JSON con nuestro proceso de login.
function gotAssertion(assertion) {
if (assertion !== null) {
$.ajax({
type: 'POST',
url: 'login.php',
data: { assertion: assertion, browserid: true },
success: function(res, status, xhr) {
if (res !== null) {
var oJson = jQuery.parseJSON(res);
if(oJson.status == 'okay'){
//Si todo es correcto la pagina se refresca.
if(oJson.action == 'new') location.reload(true);
} else {
alert("Error");
}
}
},
error: function(res, status, xhr) {
alert("Error de conexion");
}});
}
}
Como podéis ver son unos ejemplos muy sencillos y muy fáciles para el programador, si os interesa mucho mas el tema podéis ir a la pagina para desarrolladores que tiene Mozilla aquí.
Espero que os animéis a probarlos en vuestros sistemas web y también a contribuir por un Internet mas limpio y seguro.
En el siguiente ejemplo vamos a ver como podemos dibujar un círculo sobre un Canvas de HTML5. La realidad es que dentro de la especificación del Canvas de HTML5 no existe ningún método que nos dibuje un círculo directamente, si no, que nos ofrece un método que dibuja arcos. Y por definición un círculo no deja de ser un arco de 360º.
Así tenemos que conocer en profundidad la función .arc(), con la cual vamos a dibujar nuestro círculo sobre el Canvas. La sintaxis de este método sería:
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise Optional );
Echándole un vistazo por encima lo que vemos es que podemos dibujar un arco en unas coordenadas (x,y), cuyo radio será el del valor del radius y tendrá un angulo de inicio y otro de fin.
Nos vamos a detener en estos dos valores y es que los valores de los ángulos hay que expresarlos en radianes. Así que, tendremos que desempolvar nuestros conocimientos de trigonometría y recordar que:
180 grados = π radianes
Por lo tanto, si queremos trabajar con grados, tendremos que utilizar la siguiente ecuación:
(π/180)*grados
Si queremos especificar 90º:
(π/180)*90
Una vez aprendido esto revisemos el último parámetro. Que es el anticlockwise. Es decir, si queremos trazar el arco el la dirección de las agujas del reloj, le damos un valor de false, si queremos al revés que la dirección de las agujas, pues le damos true.
Para pintar nuestro primer arco, vamos a crear uno que vaya del 0 a 270 grados.
ctx.arc(100,70,50,0,(Math.PI/180)*270,true);
O que sea medio círculo, del 0 al 180:
ctx.arc(230,70,50,0,(Math.PI/180)*180,true);
Y para dibujar un círculo completo en el Canvas tendríamos que ir del 0 al 360. De la siguiente forma:
ctx.arc(360,70,50,0,(Math.PI/180)*360,true);
Ya solo nos queda saber dos cosas. La primera es cómo indicar el color del relleno del círculo. Esto lo hacemos con la propiedad .fillStyle y siempre ejecutando el método .fill() Ya que si no, no se ejecutara el pintado del relleno.
Y si queremos poner un borde al círculo tenemos las propiedades .strokeStyle y .lineWidth. En la primera le damos el color al borde mediante un formato RGB y la segunda, en pixels, indicamos el ancho del borde.
Javascript es un lenguaje de programación que permite ampliar las posibilidades de las páginas HTML. El navegador se encarga por completo de interpretar el código escrito y no hay necesidad de compilación.
Para incluir código Javascript en páginas HTML es necesario hacer uso de la etiqueta
De esta forma insertaremos código Javascript de la siguiente forma:
También se pueden usar scripts externos:
Así, por ejemplo, vamos realizar algo de programación orientada a objetos con Javascript. De esta forma haremos un ejemplo para obtener el valor futuro de una inversión (su valor) dado una tasa de interés y periodo o plazo final. Tenemos entonces tres datos:
valor presente
tasa de interés
periodo final
La fórmula para calcular el valor futuro es:
valor_futuro=valor*Math.pow(1+tasa/100,periodo)
Vamos a definir una función que sirva como "constructor" de la clase Economica:
console.log("Creo el Constructor");
function Economica(valor,tasa,periodo){
this.valor=valor;
this.tasa=tasa;
this.periodo=periodo;
// Este es un método que nos mostrará el resultado de la operación
this.desplegarResultado=desplegarResultado;
}
Ahora creamos una función para visualizar los datos:
function ver(string){
alert(string);
}
Definimos el método "desplegarResultado"
function desplegarResultado(){
var valorFuturo=parseFloat(this.valor)*Math.pow(1+parseFloat(this.tasa)/100,parseInt(this.periodo));
console.log("valor futuro: "+valorFuturo);
var result="\n..valor: "+this.valor+" \n..tasa: "+this.tasa+" \n..periodo: "+this.periodo;
result+=" \nresultado: "+valorFuturo.toString();
ver(result);
}
También es necesario crear un método que solicite los datos al usuario:
function datos(){
var valor=prompt("Valor:","");
var tasa=prompt("Tasa:","");
var periodo=prompt("Periodo:","");
//creamos una instancia de la "clase" Economica y le pasamos los parámetros
obj1=new Economica(parseFloat(valor),parseFloat(tasa),parseInt(periodo));
//invocamos al método "desplegarResultado" para ver el resultado
obj1.desplegarResultado();
}
Por último creamos un botón que active el método "datos":
El resultado que obtendremos por pantalla una vez que hayamos introducido el valor de la inversión, la tasa de interés y periodo o plazo de pago será el siguiente: