Hoy vamos a ver cómo dibujar un triángulo en un canvas de HTML5 a través de JavaScript usando los métodos moveTo, lineTo y closePath. Aunque no hay un método llamado triangle o algo por el estilo, podemos dibujar cualquier tipo de triángulo uniendo algunas líneas. ...
Las capturas de pantalla de las aplicaciones web (o sitios web) son una forma bastante buena de arreglar errores de nuestros programas reportados por usuarios, ya que gracias a ellas podemos ver qué error aparece o cuál es el problema que reportan (sobre todo de diseño). En el mundo de JavaScript existe la librería html2canvas cuyo uso ya vimos anteriormente, de hecho esto podría ser la continuación del mismo, en donde veremos cómo enviar una captura de pantalla a un servidor con PHP. Aunque el ejemplo muestra cómo recibir la captura de la webapp con PHP, podemos adaptar el código para otros lenguajes del servidor. ...
En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas. Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente. La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más. ...
Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas. Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen? Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript. ...
jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy. La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos. Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo: Obtener elemento seleccionado del select (la opción) Agregar una opción al select Limpiar el select, es decir, remover todas las opciones Escuchar cuando el usuario seleccione otra opción del select. Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post. ...
Un select es una lista desplegable de opciones de HTML, se declara usando <select> y dentro de él tiene opciones declaradas con <option>. Cada opción tiene un valor y un texto. El select de HTML se maneja a través de JavaScript. Al select también se le conoce como lista desplegable, Dropdown list o simplemente select. Hoy veremos cómo trabajar con JavaScript y los elementos de tipo select con option. Vamos a ver cómo: Obtener valor seleccionado de un select Agregar opciones al elemento select Obtener opción seleccionada Limpiar el select Escuchar cuando el valor del select cambia, es decir, que se selecciona otro valor Está de más mencionar que esto lo haremos con JavaScript puro, sin usar frameworks ni librerías externas. Al final tendremos un ejemplo en donde manejamos un select con JavaScript. ...
En esta ocasión vengo a compartir un simple diseño de un formulario de inicio de sesión o login hecho con Bootstrap 4. Generalmente un formulario de login solo lleva dos campos: el del correo y la contraseña. Gracias a los estilos de Bootstrap podemos diseñar un formulario responsivo, elegante y simple con pocas líneas de código. ...
En este post vamos a ver cómo descomprimir archivos zip en PHP. Veremos 3 ejemplos: Cómo descomprimir un archivo Cómo extraer solamente una lista de archivos dentro del zip Cómo extraer un archivo zip subido Recuerda que si quieres ver cómo crear archivos zip con PHP puedes mirar este post. ...
A través del tiempo hemos visto cómo tomar fotos con JavaScript (así como enviarlas a un servidor con PHP) y cómo grabar el audio del micrófono (o guardarlo en un servidor). En este post vamos a ver la “unión” de esas operaciones para grabar un vídeo con JavaScript. El vídeo que vamos a grabar será tomado de la cámara web en caso de que sea una portátil, o de la cámara de un teléfono o tableta. También podremos capturar vídeo de cualquier otra cámara, al igual que el audio. Por ejemplo, en los móviles vamos a elegir entre la cámara trasera o la frontal. Lo que haremos será ver cómo acceder a la cámara y al micrófono, grabar el audio y el vídeo para descargar finalmente el vídeo que grabamos. ...
Vee Validate es un plugin de Vue.js que sirve para validar formularios de una manera fácil pero poderosa. Lo que destaca es: Su simplicidad, pues no se tiene que estudiar demasiado para comenzar a usarlo La flexibilidad que ofrece Soporte para otros idiomas (entre ellos el español) Mensajes de error predefinidos Simple sintaxis y validadores por defecto Reglas personalizadas Manejo del evento que desencadena la validación En este artículo vamos a dar un repaso y explicación de VeeValidate con algunos ejemplos. Al final tendremos un ejemplo completo que es como en la imagen: ...