FPDF es una clase escrita en PHP que permite generar documentos PDF directamente desde PHP, es decir, sin usar la biblioteca PDFlib. La F de FPDF significa Free (gratis y libre): puede usted usarla para cualquier propósito y modificarla a su gusto para satisfacer sus necesidades.
FPDF tiene otras ventajas: funciones de alto nivel. Esta es una lista de sus principales características:
Elección de la unidad de medida, formato de página y márgenes
Gestión de cabeceras y pies de página
Salto de página automático
Salto de línea y justificación del texto automáticos
Admisión de imágenes (JPEG, PNG y GIF)
Colores
Enlaces
Admisión de fuentes TrueType, Type1 y codificación
Compresión de página
FPDF no necesita de ninguna extensión para PHP (excepto Zlib para activar la compresión y GD para soporte a GIF) y funciona con PHP5 (≥ 5.1).
Los tutoriales le permitirán empezar rápidamente a usar FPDF. La documentación completa (on line) se encuentra aquí y el área de descarga, aquí. Se recomienda encarecidamente que lea las FAQ (o PMF: preguntas más frecuentes), que listan las preguntas y problemas más comunes (especialmente los relacionados con los navegadores).
Existe una sección de scripts que incluye algunas extensiones útiles.
¿Qué idiomas puedo usar?
La clase genera documentos en muchos otros idiomas aparte de los europeos occidentales: europeo central, ciríloco, griego y báltico, si se dispone de fuentes TrueType o Type1 con el conjunto de caracteres adecuado. UTF-8 también está disponible.
¿Y qué hay de la eficiencia?
Como es lógico, la velocidad de generación de un documento es menor que con PDFlib. Sin embargo, la desventaja en cuanto a rendimiento es muy razonable y se adecúa a la mayoría de los casos, a no ser que sus documentos vayan a ser especialmente complejos o extensos.
Para cualquier observación, pregunta o problema, no dude en dejar un mensaje en el foro.
También puede escribirme a mí (in French or English please ;-)).
6.2. Modelo básico de eventos
6.2.1. Tipos de eventos
En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo del ratón) puede estar definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes.
El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.
La siguiente tabla resume los eventos más importantes definidos por JavaScript:
El ratón "sale" del elemento (pasa por encima de otro elemento)
Todos los elementos
onmouseover
El ratón "entra" en el elemento (pasa por encima del elemento)
Todos los elementos
onmouseup
Soltar el botón que estaba pulsado en el ratón
Todos los elementos
onreset
Inicializar el formulario (borrar todos sus datos)
<form>
onresize
Se ha modificado el tamaño de la ventana del navegador
<body>
onselect
Seleccionar un texto
<input>, <textarea>
onsubmit
Enviar el formulario
<form>
onunload
Se abandona la página (por ejemplo al cerrar el navegador)
<body>
Los eventos más utilizados en las aplicaciones web tradicionales son onload para esperar a que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para controlar el ratón y onsubmit para controlar el envío de los formularios.
Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset, onsubmit) permiten evitar la "acción por defecto" de ese evento. Más adelante se muestra en detalle este comportamiento, que puede resultar muy útil en algunas técnicas de programación.
Las acciones típicas que realiza un usuario en una página web pueden dar lugar a una sucesión de eventos. Al pulsar por ejemplo sobre un botón de tipo <input type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.
6.2.2. Manejadores de eventos
Un evento de JavaScript por sí mismo carece de utilidad. Para que los eventos resulten útiles, se deben asociar funciones o código JavaScript a cada evento. De esta forma, cuando se produce un evento se ejecuta el código indicado, por lo que la aplicación puede responder ante cualquier evento que se produzca durante su ejecución.
Las funciones o código JavaScript que se definen para cada evento se denominan "manejador de eventos" y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores:
Manejadores como atributos de los elementos XHTML.
Manejadores como funciones JavaScript externas.
Manejadores "semánticos".
6.2.2.1. Manejadores de eventos como atributos XHTML
Se trata del método más sencillo y a la vez menos profesional de indicar el código JavaScript que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el ratón sobre un botón:
<inputtype="button"value="Pinchame y verás"onclick="alert('Gracias por pinchar');"/>
En este método, se definen atributos XHTML con el mismo nombre que los eventos que se quieren manejar. El ejemplo anterior sólo quiere controlar el evento de pinchar con el ratón, cuyo nombre es onclick. Así, el elemento XHTML para el que se quiere definir este evento, debe incluir un atributo llamado onclick.
El contenido del atributo es una cadena de texto que contiene todas las instrucciones JavaScript que se ejecutan cuando se produce el evento. En este caso, el código JavaScript es muy sencillo (alert('Gracias por pinchar');), ya que solamente se trata de mostrar un mensaje.
En este otro ejemplo, cuando el usuario pincha sobre el elemento <div> se muestra un mensaje y cuando el usuario pasa el ratón por encima del elemento, se muestra otro mensaje:
<divonclick="alert('Has pinchado con el ratón');"onmouseover="alert('Acabas de pasar el ratón por encima');">
Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima
</div>
Este otro ejemplo incluye una de las instrucciones más utilizadas en las aplicaciones JavaScript más antiguas:
<bodyonload="alert('La página se ha cargado completamente');">
...
</body>
El mensaje anterior se muestra después de que la página se haya cargado completamente, es decir, después de que se haya descargado su código HTML, sus imágenes y cualquier otro objeto incluido en la página.
El evento onload es uno de los más utilizados ya que, como se vio en el capítulo de DOM, las funciones que permiten acceder y manipular los nodos del árbol DOM solamente están disponibles cuando la página se ha cargado completamente.
6.2.2.2. Manejadores de eventos y variable this
JavaScript define una variable especial llamada this que se crea automáticamente y que se emplea en algunas técnicas avanzadas de programación. En los eventos, se puede utilizar la variable this para referirse al elemento XHTML que ha provocado el evento. Esta variable es muy útil para ejemplos como el siguiente:
Cuando el usuario pasa el ratón por encima del <div>, el color del borde se muestra de color negro. Cuando el ratón sale del <div>, se vuelve a mostrar el borde con el color gris claro original.
Elemento <div> original:
<divid="contenidos"style="width:150px; height:60px; border:thin solid silver">
Sección de contenidos...
</div>
Si no se utiliza la variable this, el código necesario para modificar el color de los bordes, sería el siguiente:
<divid="contenidos"style="width:150px; height:60px; border:thin solid silver"onmouseover="document.getElementById('contenidos').style.borderColor='black';"onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
Sección de contenidos...
</div>
El código anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del código de un evento, JavaScript crea automáticamente la variable this, que hace referencia al elemento XHTML que ha provocado el evento. Así, el ejemplo anterior se puede reescribir de la siguiente manera:
<divid="contenidos"style="width:150px; height:60px; border:thin solid silver"onmouseover="this.style.borderColor='black';"onmouseout="this.style.borderColor='silver';">
Sección de contenidos...
</div>
El código anterior es mucho más compacto, más fácil de leer y de escribir y sigue funcionando correctamente aunque se modifique el valor del atributo id del <div>.
6.2.2.3. Manejadores de eventos como funciones externas
La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es que se complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es recomendable para los casos más sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario, es aconsejable agrupar todo el código JavaScript en una función externa y llamar a esta función desde el elemento XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un botón:
<inputtype="button"value="Pinchame y verás"onclick="alert('Gracias por pinchar');"/>
Utilizando funciones externas se puede transformar en:
function muestraMensaje(){
alert('Gracias por pinchar');}<input type="button" value="Pinchame y verás" onclick="muestraMensaje()"/>
Esta técnica consiste en extraer todas las instrucciones de JavaScript y agruparlas en una función externa. Una vez definida la función, en el atributo del elemento XHTML se incluye el nombre de la función, para indicar que es la función que se ejecuta cuando se produce el evento.
La llamada a la función se realiza de la forma habitual, indicando su nombre seguido de los paréntesis y de forma opcional, incluyendo todos los argumentos y parámetros que se necesiten.
El principal inconveniente de este método es que en las funciones externas no se puede seguir utilizando la variable this y por tanto, es necesario pasar esta variable como parámetro a la función:
function resalta(elemento){switch(elemento.style.borderColor){case'silver':case'silver silver silver silver':case'#c0c0c0':
elemento.style.borderColor='black';break;case'black':case'black black black black':case'#000000':
elemento.style.borderColor='silver';break;}}<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)">
Sección de contenidos...
</div>
En el ejemplo anterior, la función externa es llamada con el parámetro this, que dentro de la función se denomina elemento. La complejidad del ejemplo se produce sobre todo por la forma en la que los distintos navegadores almacenan el valor de la propiedad borderColor.
Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor black, Internet Explorer lo almacena como black black black black y Opera almacena su representación hexadecimal #000000.
6.2.2.4. Manejadores de eventos semánticos
Los métodos que se han visto para añadir manejadores de eventos (como atributos XHTML y como funciones externas) tienen un grave inconveniente: "ensucian" el código XHTML de la página.
Como es conocido, una de las buenas prácticas básicas en el diseño de páginas y aplicaciones web es la separación de los contenidos (XHTML) y su aspecto o presentación (CSS). Siempre que sea posible, también se recomienda separar los contenidos (XHTML) y su comportamiento o programación (JavaScript).
Mezclar el código JavaScript con los elementos XHTML solamente contribuye a complicar el código fuente de la página, a dificultar la modificación y mantenimiento de la página y a reducir la semántica del documento final producido.
Afortunadamente, existe un método alternativo para definir los manejadores de eventos de JavaScript. Esta técnica es una evolución del método de las funciones externas, ya que se basa en utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones externas que actúan de manejadores de eventos. Así, el siguiente ejemplo:
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');"/>
Se puede transformar en:
// Función externafunction muestraMensaje(){
alert('Gracias por pinchar');}// Asignar la función externa al elemento
document.getElementById("pinchable").onclick= muestraMensaje;// Elemento XHTML<input id="pinchable" type="button" value="Pinchame y verás"/>
La técnica de los manejadores semánticos consiste en:
Asignar un identificador único al elemento XHTML mediante el atributo id.
Crear una función de JavaScript encargada de manejar el evento.
Asignar la función externa al evento correspondiente en el elemento deseado.
El último paso es la clave de esta técnica. En primer lugar, se obtiene el elemento al que se desea asociar la función externa:
document.getElementById("pinchable");
A continuación, se utiliza una propiedad del elemento con el mismo nombre que el evento que se quiere manejar. En este caso, la propiedad es onclick:
document.getElementById("pinchable").onclick= ...
Por último, se asigna la función externa mediante su nombre sin paréntesis. Lo más importante (y la causa más común de errores) es indicar solamente el nombre de la función, es decir, prescindir de los paréntesis al asignar la función:
Si se añaden los paréntesis después del nombre de la función, en realidad se está ejecutando la función y guardando el valor devuelto por la función en la propiedad onclick de elemento.
// Asignar una función externa a un evento de un elemento
document.getElementById("pinchable").onclick= muestraMensaje;// Ejecutar una función y guardar su resultado en una propiedad de un elemento
document.getElementById("pinchable").onclick= muestraMensaje();
La gran ventaja de este método es que el código XHTML resultante es muy "limpio", ya que no se mezcla con el código JavaScript. Además, dentro de las funciones externas asignadas sí que se puede utilizar la variable this para referirse al elemento que provoca el evento.
El único inconveniente de este método es que la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos XHTML. Una de las formas más sencillas de asegurar que cierto código se va a ejecutar después de que la página se cargue por completo es utilizar el evento onload:
La técnica anterior utiliza el concepto de funciones anónimas, que no se va a estudiar, pero que permite crear un código compacto y muy sencillo. Para asegurarse que un código JavaScript va a ejecutarse después de que la página se haya cargado completamente, sólo es necesario incluir esas instrucciones entre los símbolos { y }:
window.onload=function(){
...
}
En el siguiente ejemplo, se añaden eventos a los elementos de tipo input=text de un formulario complejo:
HTML5 nos permite definir patrones de validación para los diferentes campos de un formulario sin utilizar ni una sola línea de javascript. Esta característica nos permite ahorrarnos algunas solicitudes inadecuadas y el consiguiente gasto innecesario de recursos del servidor, aunque sin duda la principal ventaja es la mejora de la experiencia del usuario.
Es importante anotar que la validación de formularios con HTML5, al igual que la validación con javascript, se realiza en el lado del cliente (navegador web) y, por tanto, puede ser modificada por el usuario o ignorada totalmente. Esto quiere decir que las cuestiones relativas a la seguridad del formulario no deben basarse en esta validación ni es sustituta de la validación server-side.
Métodos de validación de formularios con HTML5
HTML5 ofrece diferentes métodos de validación de formularios client-side utilizando diferentes atributos para el elemento <input>. Los más destacados son type, pattern y required. Veamos cada uno de estos atributos y ejemplos de uso. Las imágenes ilustrativas son obtenidas utilizando el navegador firefox y pueden variar si se utiliza otro navegador.
El atributo type
Con el atributo type indicamos al navegador el tipo de control que debe ejercer sobre el elemento <input>. Ya en HTML4 nos acostumbramos a <input type="text" /> pero a partir de HTML5 podemos utilizar una amplia gama:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Si los datos introducidos en el campo del formulario no coinciden con el tipo especificado, el navegador lanzará un aviso al usuario y el formulario no se enviará. Por ejemplo, podemos requerir que se introduzca una dirección de correo electrónico:
<inputtype="email"name="email">
Dará el siguiente aviso si se introduce un email no válido:
Validación email con HTML5 type=”email”
Es el propio navegador el que valida los datos introducidos según el tipo especificado. La validación para algunos valores de type puede ser muy diferente de unos países a otros y por ello algunos tipos no son universalmente soportados. Por ejemplo, el type="tel", utilizado para números de teléfono, necesita un patrón de validación diferente para diferentes países y regiones. La solución para seguir con HTML5 y no utilizar javascript es definir patrones de validación propios con el atributo pattern.
El atributo pattern
Este atributo es sencillamente espectacular. Nos permite definir patrones de validación client-side personalizados sin prácticamente límite. El valor de este atributo ha de ser un formato de datos con notación de expresión regular javascript. Las expresiones regulares, conocidas como regex (del inglés regular expression), son incluidas en prácticamente todos los lenguajes de programación y permiten validar una cadena de texto frente a palabras, caracteres y patrones de una forma muy flexible a la vez que concisa.
Al poner un regex como valor del atributo pattern en un <input> decimos al navegador cuál es el valor aceptable para este campo del formulario. Familiarizarse con las expresiones regulares puede llevar algún tiempo y práctica, puedes empezar con la documentación para regex en javascript ofrecida por mozilla.
Por ejemplo, en España un número de teléfono fijo comienza por 9 o por 8 y un número móvil comienza por 6 o por 7 y en ambos casos le sigue un número de 8 dígitos. Un regex para aceptar números de teléfono de España podría ser:
<labelfor="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label><inputtype="text"pattern="^[9|8|7|6]\d{8}$">
Este regex dice: aceptar sólo un número que comiencen por 9, 8, 6 o 7 seguido de 8 dígitos. En caso de introducir un número incorrecto saldría el siguiente aviso:
Validación teléfono español con HTML5 y el atributo pattern
Para utilizar el atributo pattern es recomendable utilizar el type="text" y no un type de los predefinidos en HTML5 que ya cuentan con patrones de validación en el propio navegador. Mezclar ambos puede llevar a resultados inesperados.
Personalizar avisos con el atributo title
En los ejemplos anteriores los avisos mostrados eran elegidos por el navegador. A través del atributo title podemos personalizar estos avisos. Por ejemplo:
<inputtype="text"name="twitter_username"pattern="^@?(\w){1,15}$"title="Este no parece un usuario de twitter válido">
Con el pattern anterior se aceptaría una cadena de texto de 15 letras que no contenga caracteres especiales (ñ, vocales acentuadas, etc). La cadena puede comenzar por @ o no. Con esta regla se aceptarían sólo nombres de usuario de twitter válidos y se lanzaría el siguiente aviso personalizado si se introduce uno no válido:
Validación usuario twitter con HTML5 y el atributo pattern con aviso personalizado
El atributo required
Tal y como su nombre indica, este atributo se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos. Basta con poner required o required="required". Por ejemplo:
<inputtype="text"name="twitter_username"pattern="^@?(\w){1,15}$"title="Este no parece un usuario de twitter válido"required>
Si el <input> anterior se deja vacío se mostrará el siguiente aviso:
Aviso de campo obligatorio con atributo required en HTML5
Recuerda que:
La validación de formularios con HTML5 ahorrará bastante trabajo de desarrollo al no tener que validar con javascript
El soporte entre distintos navegadores está bastante extendido, salvo algunos tipos que requieren la especificación de expresiones regulares para su validación
A través del atributo pattern las posibilidades son infinitas y podemos validar cualquier formato de datos que deseemos
La seguridad de la validación con HTML5 es igual que la seguridad de la validación con javascript: ninguna. Ambas son validaciones client-side y nunca deben sustituir la validación server-side
Bootstrap jQuery Modal
Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas modales para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.
En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.
En nuestro <head> deberemos añadir los estilos de Bootstrap.
<link href="bootstrap.css" rel="stylesheet">
La ventana ya presenta una visualización bastante buena pero podemos cambiarla editando la hoja de estilos.
En nuestro <body> necesitaremos crear un link que abrirá la ventana:
Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.
Código HTML:
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a› /* La modal */
‹div id=”modal”›
‹a href=”#cerrar”›‹/a›
‹div id=”modalContent”›
‹h1›Soy una ventana modal‹/h1›
‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
‹a href=”#cerrar”›X‹/a›
‹/div›
‹/div›
Código CSS: /* Creamos unos estilos para el botón */ .btn{ position:relative; padding:8px 16px; font-family:'psychotik'; font-size:1.2em; font-weight:normal; color:#fff; text-shadow:none; border-radius:16px; background:#00A6B6; box-shadow:inset 2px 2px 1px #007f8b; } .btn:hover{ background:#FF9C00; box-shadow:inset 2px 2px 1px #995f02; } /* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */ #modalContent{ position:absolute; top:50%; left:50%; z-index:6; margin:-2% 0px 0px -150px; float:left; width:300px; color:#fff; line-height:22px; padding:15px; border-radius:5px; background:#00A6B6; border:1px solid #fff; box-shadow:0px 2px 1px #999; } /* ... los estilos de la ventana central ... */ #modal{ position:fixed; top:0px; left:0px; z-index:5; float:left; width:100%; height:100%; background:rgba(0,0,0,0.2); display:none; opacity:0; } /* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */ #modal > a{ position:fixed; top:0px; left:0px; z-index:1; float:left; width:100%; height:100%; } El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal :target{ display:block!important; opacity:1!important; } /* Un botón de cerrar para no despistar al usuario */ #modalContent > a{ position:absolute; top:-4px; right:-4px; color:#00A6B6; border-radius:2px; background:#fff; padding:4px; }
[Fecha de publicación: 2015-04-28] se dejaron los siguientes ejercicios para solucionarlos en pseudocodigo y algoritmo 1. Algoritmo que te pregunta tu nombre y a continuación te saluda. 2. Algoritmo que lee dos números y escribe el mayor de ellos. 3. Algoritmo que lee dos numeros y realiza las operaciones básicas: suma, resta, multiplicar y dividir. 4. Algoritmo que lee 3 números y si el primero es positivo, calcula el producto de los otros dos, si no calcula la suma. 5. Algoritmo que lee un número e imprime si dicho número es positivo, negativo. 6. Algoritmo que calcula el área de un triangulo. A = ( b x h ) / 2 7. Algoritmo que calcula la Conversión Fahrenheit a Celsius. C = ( F - 32 ) x ( 5/9). 8. Algoritmo que calcula la Conversión Celsius a Fahrenheit . F = C x ( 9 / 5 ) + 32. 9. Algoritmo que lee una nota definitiva del periodo e imprime si paso o no la materia. Se pasa la materia con una nota >= 70. 10. Algoritmos leer el valor de un producto cualquiera y ca...
[Fecha de publicación: 2017-02-28] En clase se realizó una evaluación cuyas preguntas eran sobre la web. Cuántas publicaciones se habían hecho (2). Como era la url (La web.coldivinoamor). Manuales (en construcción) Y plazo último día para el publicar blog (3 de marzo a las 6:00pm) de ahí sacó una habilidad. Luego se hicieron preguntas quien respondía tenía un beneficio y por último la segunda habilidad que era practica con los grupos de trabajo. Sobre el ejercicio publicado en la página de fpdf
[fecha de publicación: 2016-04-14] Ejercicios en clase: OnMouseOver(). Realiza una página que muestra cinco cuadrados de diferentes colores. Cuando el raton pase por encima de alguno de ellos el color de fondo será del color de relleno del cuadrado. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Using "onMouseOver"</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <SCRIPT language=JavaScript> <!-- Beginning of JavaScript - function changecolor(code) { document.bgColor=code } // - End of JavaScript - --> </SCRIPT> <META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD> <BODY bgColor=#ffffff> <CENTER> <H1>Evento "onMouseOver"</H1></CENTER> <HR> <P>Uso del event...
En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.
Comentarios
Publicar un comentario