Bienvenido al blog de Parzibyte. Vas a encontrar tutoriales y tips de programación, bases de datos, redes, electrónica e informática general. Ejemplos de código, aplicaciones gratuitas y open source
Las variables CSS sirven para definir variables dentro del lenguaje (si se le puede llamar así) CSS. Permite reutilizar esos valores y tener una única fuente de la verdad.
De este modo, si después queremos cambiar el estilo de todos los elementos que usen nuestras variables, lo podemos hacer en una sola línea.
Cabe mencionar que para que las variables CSS funcionen no necesitamos un preprocesador, lo podemos hacer con CSS puro.
En este post te mostraré a usar la propiedad word-wrap en CSS para romper palabras en un párrafo o texto.
Veremos los 3 métodos de word-wrap en CSS: break-all, normal y break-word.
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.
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.
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.
Memorama programado en JavaScript – Tutorial de juego
Este juego de memorama en JS que vengo a presentar tiene las siguientes características:
Nota: otro videojuego que desarrollé con JavaScript fue el de snake.
En esta ocasión vengo a compartir un simple diseño de un formulario de inicio de sesión o login hecho con Bootstrap 4.
Generalmente un formulario de login solo lleva dos campos: el del correo y la contraseña.
Gracias a los estilos de Bootstrap podemos diseñar un formulario responsivo, elegante y simple con pocas líneas de código.
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.
He creado un generador de multiplicaciones aleatorias, en donde se presiona un botón y se generan multiplicaciones para imprimirlas y resolverlas, funciona totalmente en línea y se pueden personalizar los números.
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
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).
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.
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
En este post voy a explicar cómo descargar los iconos y cómo usarlos en la web.
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
Voy a explicar la creación de la aplicación web y cómo utilicé cada cosa para crear todo esto.
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.
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.
¿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.
Últimos comentarios