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. ...
Hoy vengo a presentar un sistema gratuito y open source para el control de pagos y cooperaciones creado con PHP, MySQL, Twig, Bootstrap y Vue Este sistema de pagos está creado con PHP para el lenguaje del servidor, utiliza Twig para renderizar las plantillas, mismas que tienen un diseño usando Bootstrap. La persistencia de datos es gracias a MySQL. Del lado del cliente se utiliza Vue para consumir la API y traer los datos. Entre sus características encontramos: Software para el control de pagos de personas Registro de personas Posibilidad de registrar usuarios para iniciar sesión Impresión de comprobantes de pago en impresora térmica Reporte de totales abonados por personas Responsivo y accesible desde teléfono, tableta o computadora Con algunas modificaciones, este software podría controlar el sistema de abonos de ventas de productos, cooperaciones de personas, pagos, etcétera. Puede servir para estudiar un proyecto de PHP o para usarlo directamente en producción (de hecho yo lo estoy usando) A continuación voy a explicar cómo funciona, además de mostrar el código fuente y otras cosas más. ...
En este tutorial voy a mostrarte cómo acceder y administrar tus archivos de Google Drive desde la línea de comandos de Linux con una herramienta llamada gdrive. Al final del tutorial seremos capaces de descargar y subir archivos, listarlos y en general administrar toda nuestra cuenta de Google Drive. Gracias a esto podríamos hacer algunos respaldos automáticos a Google Drive desde Linux; pero eso lo dejaré para otro tutorial. ...
En este post voy a hablar sobre async y await en JavaScript. El lenguaje JS es asíncrono y por lo tanto debemos saber cómo funciona esa manera de trabajar. Para trabajar con código asíncrono tenemos 3 formas: Usando callbacks Promesas Async y Await En este post voy a explicar cómo funciona async y await. ...
En este post te voy a mostrar cómo conectarte a una base de datos de MySQL usando el lenguaje de programación JavaScript del lado del servidor a través del entorno Node; también conocido como Node.Js. Vamos a hacer las 4 operaciones básicas de la base de datos: obtener datos, insertar datos, actualizar datos y eliminar datos. Para la interfaz del usuario vamos a usar Bootstrap y una estructura de aplicación web generada con express-generator. ...