Extraer zip con PHP

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.

(más…)

Grabar vídeo de cámara con JavaScript, MediaRecorder y getUserMedia

Grabar vídeo de cámara con JavaScript

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.

Grabar vídeo de cámara con JavaScript, MediaRecorder y getUserMedia

Grabar vídeo de cámara con JavaScript, MediaRecorder y getUserMedia

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.

(más…)

Validar formularios en Vue con Vee Validate

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 se puede ver aquí, que es como en la imagen:

Validación de formularios con Vue.js, VeeValidate y Bootstrap

(más…)

Extraer el texto de una imagen con JavaScript y Tesseract.js – Aplicación web

Hace algún tiempo presenté el uso de la librería de JavaScript llamada Tesseract.Js, la cual sirve para extraer el texto de una imagen o convertir una imagen a texto.

Aparte de extraer el texto de una imagen también lo puede hacer de una foto o de una imagen escaneada como lo vimos en la demostración de Tesseract OCR.

En el post en donde hablo de la librería prometí que haría una app para demostrar el funcionamiento y uso, y es justamente lo que vengo a presentar hoy: una aplicación web que sirve para extraer el texto de una imagen.

Funciona en Firefox y Google Chrome en Windows y Android, no he probado en otros navegadores.

(más…)

Previsualizar imagen de input file con JavaScript y HTML

Cuando un usuario selecciona un archivo de tipo imagen con un input de tipo file en HTML podemos generar una previsualización de la imagen dentro de una etiqueta img, a fin de que el usuario conozca la imagen que seleccionó antes de que procese la imagen.

En este post vamos a ver cómo mostrar la imagen seleccionada, escuchando el evento change del input y estableciendo ese file como src de una imagen.

Previsualizar imagen de input con JavaScript

(más…)

Grabar audio del micrófono con JavaScript y descargar la grabación

En este post voy a explicar cómo grabar audio del micrófono con JavaScript, MediaRecorder y la API de getUserMedia.

Grabar audio del micrófono con JavaScript, getUserMedia y MediaRecorder

Grabar audio del micrófono con JavaScript, getUserMedia y MediaRecorder

Al final seremos capaces de:

  • Pedir permiso de acceder al micrófono
  • Obtener una lista de micrófonos
  • Seleccionar el micrófono para grabar
  • Comenzar una grabación
  • Detener la grabación de audio
  • Descargar el audio grabado

Todo eso sin usar plugins, extensiones ni esas cosas: se utiliza JavaScript puro.

(más…)

Plantilla inicial de Bootstrap 4 (starter template)

Bootstrap 4 (y su versión anterior, la 3) es el framework CSS más usado en el desarrollo web (por ejemplo, el sistema de cotizaciones lo usa).

Como desarrolladores, necesitamos una plantilla de donde partir. Una plantilla básica o una starter template de Bootstrap para cargarla y tomarla como base para nuestros proyectos.

Plantilla inicial de Boostrap 4 (starter template)

Me di a la tarea de crear una y traducirla, para tomarla como base al desarrollar con Bootstrap 4.

(más…)

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto de cámara web con JavaScript y descargarla como imagen

En mi blog he hecho varios posts sobre tomar fotos con la cámara web desde JavaScript, para enviarlas a PHP; pero nunca he hecho un ejemplo sin usar PHP.

Es por ello que hoy voy a explicar cómo tomar una foto de la cámara web (igualmente de la cámara trasera o delantera en los dispositivos compatibles) y guardarla o descargarla directamente como archivo, sin usar código del servidor.

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto con JavaScript y descargarla como imagen PNG

El código para tomar la foto funciona en varios dispositivos con un navegador actualizado, desde teléfonos y tabletas Android, iPads y más.

(más…)

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación web para tomar notas con JavaScript, Vue.js, Bootstrap y localStorage

Hace algún tiempo creé una aplicación web como un ejercicio para aplicar para un trabajo. Decidí hacerla con Vue.js, Bootstrap y localStorage en conjunto.

Al final resultó en algo como lo de la imagen:

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Es una simple aplicación de notas que puedes crear, eliminar, editar y listar. También se puede cambiar el color de todas las notas (fue un requisito, no cosa mía, así como el idioma).

(más…)

Creación de tabla dentro de MySQL con migración de Laravel

CRUD de Laravel con MySQL: administrador de canciones

CRUD de Laravel con MySQL o MariaDB

Hoy toca el turno de Laravel (un framework de PHP) para conectarse a la base de datos más popular: MySQL.

Creación de tabla dentro de MySQL con migración de Laravel

Creación de tabla dentro de MySQL con migración de Laravel

En este post voy a explicar cómo conectar Laravel con MySQL o MariaDB, comenzando por configurar la base de datos, pasando a través de las rutas, repasando el motor de plantillas de Blade y tocando un poco el tema de los mensajes flash.

Al final vamos a tener un CRUD o ABC, en donde se verán las operaciones básicas de Laravel con MySQL: insert o insertar, update o actualizar, select o seleccionar y finalmente delete o eliminar.

(más…)

Estructura de CSS y Fuentes de Font Awesome

Configuración e instalación de Iconos de Font Awesome 5.7 para uso offline

Descargar Iconos de Font Awesome para usar sin internet

En este post voy a explicar cómo descargar y configurar los iconos de la librería Font Awesome para alojarlos localmente o en nuestros propios servidores.

Alojar estos iconos de manera offline es importante cuando creamos aplicaciones web que no van a tener acceso a internet, es decir, que serán aplicaciones fuera de línea.

También es necesario saber cómo configurar el directorio de carpetas, fuentes y CSS dentro de nuestro proyecto, de esta manera podemos tener los iconos de Font Awesome en nuestro propio servidor o en localhost, sin depender del internet.

(más…)

Blade y Laravel: ciclos, condicionales, token CSRF y componentes

Ya vimos cómo funcionan las vistas en Laravel y ahora sabemos que utilizan Blade.

Blade tiene muchas directivas que permiten hacer ciclos, mostrar cosas usando if o switch, generar el input para el token CSRF y muchas cosas más.

También nos permite definir componentes para más tarde usarlos en otras vistas superiores, e incluso incluir vistas en otras vistas.

Antes que nada, dejo el enlace a la documentación oficial.

(más…)