css

Dibujar líneas y separadores en HTML usando CSS

Resumen

En este post te mostraré a dibujar una línea horizontal en un documento HTML ya que sirve como un remplazo para la etiqueta hr.

Esta línea de la que hablo también sirve para cuando debemos imprimir algo y la persona debe poner una firma. Por ejemplo.

Veremos cómo dibujar una línea que ocupa todo el ancho o que ocupa una longitud fija.

No vamos a usar JavaScript, solo un elemento div y estilos CSS.

Continue reading…

Vista general - antes de imprimir

Javascript – mostrar solo algunos elementos al imprimir página web

Resumen

En este post te voy a mostrar a ocultar elementos al imprimir una página web, exceptuando algún elemento como un párrafo, imagen o encabezado.

Por ejemplo, imprimir algo con Javascript y CSS pero quitando algunos elementos excepto un contenedor o elementos que cumplan cierto criterio.

Para lograrlo vamos a usar CSS y Javascript. El CSS será usado para ocultar al imprimir, y el JavaScript para agregar y remover algunas clases al momento de imprimir.

Continue reading…

Juego de Memorama en JavaScript – Tutorial

Resumen: en este post te voy a explicar cómo hacer el juego de memorama en JavaScript. Pondré el código fuente y una demostración en línea.

Características del memorama con JavaScript

Memorama programado en JavaScript – Tutorial de juego

Este juego de memorama en JS que vengo a presentar tiene las siguientes características:

  • Totalmente responsivo, es decir, se adapta a cualquier pantalla
  • Las imágenes se pueden cambiar
  • Intentos máximos modificables
  • Alerta para cuando ganas y cuando pierdes
  • Código fuente modificable

Nota: otro videojuego que desarrollé con JavaScript fue el de snake.

Continue reading…

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.

Continue reading…

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).

Continue reading…

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.

Continue reading…

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Eva Icons: un paquete de iconos open source para la web o para descargar

Hoy vengo a presentar un paquete de iconos totalmente open source y descargable (no es mío) llamado Eva Icons. Son unos iconos que se pueden usar en la web, o como PNG y SVG en distintos proyectos.

Gracias a que son unos iconos open source y descargables, podemos usarlos como PNG o en la web para nuestro siguiente proyecto.

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

En este post voy a explicar cómo descargar los iconos y cómo usarlos en la web.

Continue reading…

Cálculo del factorial de un número en JavaScript. Aplicación web online

Aplicación web para calcular el factorial de un número online

Para ejemplificar y combinar el uso de BigInt con los Web Workers en JavaScript me di a la tarea de crear una sencilla aplicación web que permite calcular el factorial de cualquier número, todo desde el navegador, es decir, online.

El uso de los Web workers es para hacer cálculos extensos, y el de BigInt para no quedarnos cortos a la hora de trabajar con números grandes. Por el momento sólo funciona en Chrome y Opera, ya que usa BigInt y no quise usar el polyfill.

Cálculo del factorial de un número en JavaScript. Aplicación web online

Cálculo del factorial de un número en JavaScript. Aplicación web online

Voy a explicar la creación de la aplicación web y cómo utilicé cada cosa para crear todo esto.

Continue reading…

Eliminar caché en Chrome

Evitar caché de los navegadores

Evitar que los navegadores web guarden en caché nuestros scripts y plantillas

Los navegadores web guardan en caché algunos archivos para que a la próxima llamada se carguen más rápido. Esto es una mejora para el usuario final, pero no tanto para los programadores.

Hay ocasiones (y te das cuenta 2 horas después de depurar como loco) en las que un script de JavaScript falla, arreglas el error pero misteriosamente sigue apareciendo, por más que refresques o guardes cambios.

Lo mismo pasa con las vistas o los archivos HTML, a veces cambias algo en la vista y no aparece al usar la aplicación web.

Todo esto es debido al caché de los navegadores web. Hoy veremos cómo obligar a los navegadores a que ya no guarden ese caché, y también otras medidas que podemos aplicar en caso de emergencia.

Continue reading…

Ejemplo de tabla en HTML con bordes CSS

Introducción

Hoy veremos cómo crear una tabla en HTML pero de la manera correcta, porque incluso en estos tiempos es un poco confuso la manera de crear una tabla, o al menos la sintaxis a seguir para tener un lugar de donde copiar y pegar, o un ejemplo simple.

Veremos cómo ponerle bordes, poner encabezados y otras cosas.

Continue reading…

Extraer CSS utilizado en una página con CSS Used

Introducción

¿No te ha pasado que a veces ves un botón y quieres extraer su estilo? pero sólo el estilo del botón, no todo el archivo de estilos CSS. O simplemente quieres extraer CSS utilizado en una página web o sitio de internet.

Pues bien, hoy veremos cómo extraer el estilo CSS de un componente de cualquier página. Así, si sólo quieres el estilo de determinado botón, div o link, podrás extraerlo y pegarlo directamente en otro sitio.

Continue reading…

Iconos de Google (Material icons) offline

Introducción

Los Material icons o Iconos de material design son, como su nombre lo dice, iconos que nos ayudan a adornar y mejorar nuestras aplicaciones web. No siempre vamos a tener internet, puede que portemos nuestra app para una pc que no tenga acceso a internet. O igual y queremos alojar nosotros mismos los iconos, por si algo malo llega a pasar.

El punto es que en algún momento necesitaremos descargar iconos de Material icons para ternerlos offline. Y hoy vengo a mostrar cómo descargarlos.

¿De qué iconos hablamos?

Por si no sabes de lo que hablo, me refiero a los que aparecen en este enlace.

Podemos incluirlos así:

Pero como lo dije, vamos a ver cómo incluirlos offline.

No sé si sea legal descargar los iconos. Yo supongo que no hay ningún problema, pero es responsabilidad del usuario.

Analizando iconos

De hecho, es como cargar una fuente o tipografía. Si visitamos el link, veremos que hay código CSS:

Tenemos que concentrarnos justamente en donde dice url y carga un archivo con extensión woff2. Si navegamos a ese link (que al menos en mi caso es https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) se nos descargará la fuente. Y podremos guardarla.

Esa fuente es la que trae todos los iconos. Vamos a guardarla en una carpeta de nuestra aplicación web llamada fonts con el nombre de iconos.woff2. Si le cambias el nombre, recuerda cambiarlo también al incluirlo.

Incluyendo fuente descargada

Ahora sí vamos a hacerlo offline, en nuestra app debe haber una carpeta que albergue nuestros estilos css. Pues junto a ella (no dentro de ella, sino en el mismo directorio) crearemos una carpeta llamada fonts.

Si no me entiendes bien, la estructura podría ser así:

Podemos ver que css, fonts y js están juntas. Ahora, a nuestro estilo CSS (que está dentro de la carpeta css) vamos a añadirle el siguiente fragmento de código:

Como podemos ver, es el mismo código que tiene la página de las fuentes de Google, pero con la diferencia de que ahora estamos cargando las fuentes que están un directorio arriba y luego dentro de la carpeta fonts.

Es decir, estamos dentro de la carpeta css. Para cargar la fuente, necesitamos salir de la carpeta o ir un directorio arriba (eso lo hacemos con ../). Una vez que hayamos salido, entramos a fonts y luego cargamos iconos.woff2

Y con eso hemos incluido los iconos offline. Ya sólo falta incluir un link a nuestros estilos css.

Directorio de ejemplo

Si no me expliqué bien, mi directorio está así:

En la carpeta css tengo a estilos.css. Ahí dentro puse el fragmento de código de arriba. Y en fonts tengo los iconos con la extensión woff2. Luego, en mi archivo index.html hago esto:

Resumiendo

En pocas palabras:

  • Descarga la fuente y guárdala con el nombre que desees
  • En tus estilos, añade el segundo fragmento de código que puse en el post. Y en url apunta al directorio en donde hayas descargado la fuente
  • Finalmente incluye tu archivo css que carga la fuente en donde quieras usarlo