Solucionar fracciones en línea - Suma, resta, producto y cociente

Solucionador de fracciones con JavaScript

Hace unos días te mostré cómo resolver fracciones o quebrados usando JavaScript y programación orientada a objetos para hacer las operaciones como suma, resta, multiplicación y división.

Hoy te traigo un ejemplo práctico de un solucionador de operaciones de fracciones online que recién he programado.

Por cierto, si tú solo eres un usuario que está interesado en usar el software puedes entrar directamente al solucionador de fracciones en línea.

(más…)

Repositorio para publicar página web en GitHub

Alojar página web en GitHub

En este tutorial te enseñaré cómo alojar tu sitio web o aplicación web en GitHub totalmente gratis. Si bien GitHub no está pensado como un servicio de hosting, podemos ejecutar nuestras aplicaciones dentro del servicio.

Te enseñaré cómo usar GitHub para servir tu proyecto web. Por ahora solo te mostraré cómo usarlo para servir JavaScript, HTML y CSS (pues no podemos procesar nada del lado del servidor).

Así que, que quede claro: solo va a funcionar para las cosas del lado del cliente y no del lado del servidor sin importar el lenguaje de programación.

Pero no te preocupes, para un portafolio o aplicación web funcionará de maravilla, siempre y cuando no utilice backend.

(más…)

Validar formulario con JavaScript y HTML

Validar formularios en JavaScript

En este post te enseñaré a validar formularios HTML usando JavaScript nativo o JS puro, sin usar frameworks ni librerías externas.

Validar formulario con JavaScript y HTML

Validar formulario con JavaScript y HTML

De este modo vas a poder comprobar si un formulario se envía dependiendo de los valores que el usuario haya colocado. Te enseñaré un ejemplo para que veas cómo validar un formulario en JavaScript apoyándote además de la validación nativa de HTML.

Solo recuerda que la validación del lado del cliente se hace por mera decoración, y no por seguridad; ya que la seguridad se aplica en el lado del servidor.

(más…)

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con PHP, MySQL y AJAX

En este post te mostraré un ejemplo completo de CRUD que hace las operaciones fundamentales de la base de datos usando MySQL y PHP, pero además las llamadas se hacen con AJAX desde JavaScript.

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con MySQL, PHP, JavaScript y AJAX

Al final te dejaré el código completo que podrás descargar, probar y modificar, mismo que tendrá todas las operaciones para enviar y recibir datos desde JavaScript a un servidor PHP que se conecta a MySQL.

Básicamente todo se hará del lado del cliente, no vamos a procesar formularios con PHP, solo llamadas AJAX con JSON. Así que tendremos un CRUD con PHP y AJAX.

No vamos a usar ninguna librería como React, Vue o Angular; será JavaScript puro.

(más…)

Plantilla inicial de Bulma

En este post te mostraré una plantilla simple de Bulma para comenzar a usar este framework CSS. Es decir, una plantilla de ejemplo para que puedas basarte en ella y comenzar a trabajar modificarla según tus preferencias.

Esto que te mostraré también es conocido como starter template de Bulma.

(más…)

Cuadrícula de imágenes con HTML y CSS

En este tutorial sobre diseño web te mostraré cómo mostrar una cuadrícula de imágenes en HTML usando CSS. Vamos a hacer que las imágenes ocupen determinado tamaño de la pantalla usando columnas y filas.

Por ejemplo, hacer una cuadrícula de 2 x 3 imágenes, o de 2 x 2, distribuyendo correctamente el tamaño de la página para que las imágenes tengan el mismo tamaño.

No vamos a usar Bootstrap, solo usaremos CSS, pues Bootstrap ya ofrece clases para hacer este tipo de cosas.

Al final tendremos algo parecido a una tabla de imágenes que ocupan el mismo ancho de la pantalla, usando HTML y CSS.

(más…)

Imágenes responsivas con CSS

En este post sobre diseño responsivo en CSS te mostraré cómo hacer que una imagen sea responsiva o responsive. Es decir, que se adapte a cualquier tamaño de pantalla.

Hacer una imagen adaptable es útil cuando no usamos frameworks de diseño como Bootstrap, Bulma, etcétera, y queremos que la imagen sea responsiva.

(más…)

Bootstrap: ocultar elementos al imprimir

En este post sobre estilos CSS y el framework Bootstrap 4 te mostraré cómo ocultar y mostrar ciertos elementos al momento de imprimir la página web.

De este modo puedes imprimir la página web ajustando solo ciertas características. Por ejemplo, mostrar el botón de impresión en la pantalla, pero ocultarlo al imprimir.

Todo esto lo haremos con clases que ya vienen en Bootstrap. No  vamos a programar nada manualmente, aunque si quieres, puedes hacerlo de manera nativa.

(más…)

Problemas con Awesomplete al usar Bootstrap

En este artículo te explicaré un problema que me pasó hace algún tiempo usando la librería Awesomplete y el framework Bootstrap.

Pasa que al hacer un autocompletado con AJAX,  el input perdía su estilo y se mostraba a la derecha de la etiqueta. Algo así:

Awesomplete con Bootstrap – Cambiando estilo de input

Cuando en realidad, debería mostrarse así:

Input correcto con awesomplete y Bootstrap

(más…)

Angular cambia la opacidad en CSS

Hoy te voy a mostrar cómo solucionar el siguiente problema: al preparar aplicación web de angular para producción con ng build --prod los estilos CSS se cambian y en la opacidad se obtienen distintos resultados.

Quiero aclarar que esto no es problema de Angular, sino de cssnano, una herramienta que utiliza Angular para optimizar los estilos CSS.

(más…)