Javascript

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS. De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo. Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL. ...

En el artículo de hoy te mostraré cómo mostrar la ubicación del usuario en un mapa en tiempo real e ir actualizando el marcador del mapa conforme el usuario se mueva. Esto puede servir para varias cosas. La más simple es mostrarle al usuario su ubicación en el mapa, pero puede enfocarse a algo tan complejo como hacer algo como Uber (enviando la ubicación a un servidor y todo eso). Por cierto, vamos a usar JavaScript y OpenLayers (alternativa a Google Maps): tecnologías gratuitas y open source que no nos obligan a aceptar licencias ni pagar. Obviamente esto se puede usar en dispositivos móviles Android o iOS mientras tengan un navegador web decente. Y más tarde podemos convertir la app web en una PWA para que sea algo así como una app nativa (como hice con la app de transportes). Pero bueno, vamos a lo interesante: cómo obtener la ubicación del usuario y mostrarla en el mapa mientras se mueve. Puedes acceder a la demostración justo ahora desde este enlace. Te debería mostrar tu ubicación actual con el símbolo de un auto. ...

Hoy voy a enseñarte a recortar una foto con PHP dando al usuario la posibilidad de recortar una foto y luego guardarla en el servidor con PHP. De este modo vamos a darle al usuario la opción de recortar una imagen y guardar el resultado en PHP. Luego ya puedes ligar esa foto o imagen a una base de datos, alojarla en el servidor, usarla para crear otra imagen, etcétera. Usaremos Cropper.js en el lado del cliente y después enviaremos el resultado a PHP. Con esto vamos a ahorrar recursos pues el recorte de la foto se hará del lado del cliente pero al final prácticamente vamos a recortar la foto con PHP. ...

En el post de hoy te mostraré una cosa sencilla pero muy útil: cómo enviar un canvas de HTML a PHP usando JavaScript, para guardar ese canvas como imagen. Cuando digo que es útil es porque yo creo que canvas nos da varias posibilidades de trabajar con imágenes o con el canvas en sí, y gracias a lo que te mostraré podrás guardar el resultado en el servidor para cualquier cosa. Se me ocurre que por ejemplo podrías tomar una foto de una credencial de identificación, recortarla y después guardarla con PHP. ...

Hoy te mostraré cómo cortar o recortar una imagen con JavaScript. Es decir, darle al usuario la posibilidad de recortar una imagen seleccionando una porción de la misma. Una vez que la foto haya sido recortada con JS podemos descargarla, colocarla en un canvas, en una imagen o subirla a un servidor que ejecute PHP, Node.js, Python, etcétera. En resumen te voy a enseñar cómo hacer que el usuario recorte una foto usando JS. ...

En este corto post de programación en JavaScript te enseñaré a convertir de centímetros a pixeles, tomando en cuenta el dpi, resolución o puntos por pulgada de la imagen. Al final vamos a tener una función de JS que recibirá los centímetros y el dpi, devolviendo los pixeles. ...

En mi blog te he mostrado cómo descargar un canvas de HTML y JavaScript como PNG, pero no te mostré cómo hacerlo en otro formato. Por ello es que en este post te mostraré cómo descargar un canvas como imagen ya sea PNG o JPG, respetando el tipo MIME image/jpeg o image/png. ...

En este post te mostraré cómo implementar un pequeño monedero electrónico, tarjetas de saldo o tarjetas de débito usando PHP y etiquetas RFID. Como bien sabes, las etiquetas RFID están presentes en varios componentes, entre ellos una tarjeta. Así que podemos usar esa tarjeta para guardar el saldo de un usuario. Lo que te mostraré será cómo guardar y leer el dinero / saldo en las tarjetas, mostrarlo en una LCD para que el usuario lo pueda ver, y además implementar la parte del servidor con PHP para poder recargar y comprar cosas. Básicamente será un monedero electrónico o una tarjeta con la que el usuario podrá comprar y recargar. A partir de aquí puedes mejorar el código para adaptarlo a tus necesidades. ...

En este post sobre programación web y JavaScript te mostraré cómo hacer un temporizador usando JS puro sin ningún framework. Básicamente será una cuenta regresiva. Le daremos al usuario la posibilidad de elegir los minutos y los segundos para comenzar la cuenta regresiva, el temporizador comenzará (se puede pausar en cualquier momento) y cuando llegue a 0 va a reproducir un sonido de alarma. Todo esto lo haremos usando solo HTML, CSS y JavaScript. ...

En este post te expondré un pequeño proyecto que recién he terminado. Se trata de un cronómetro programado con JavaScript puro que funciona en cualquier dispositivo con un navegador web. Funciona como un cronómetro normal: permite iniciar, pausar y detener el cronómetro así como poner marcas o banderas. A lo largo del post te explicaré su funcionamiento y cómo es que lo he programado. Te repito que no utilicé ningún framework de JS. ...