Bootstrap 4 con Angular 2 y ng-bootstrap
En este post te mostraré cómo comenzar a usar los estilos de Boostrap 4 en una app de Angular 2 gracias a ng-bootstrap.
css
CSS – Ocultar elemento pero mantener espacio
Resumen: usar CSS para hacer un elemento invisible pero que siga en el DOM ocupando su espacio.
Menú de navegación con Angular Material
Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.
Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:
- Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación
- Mat Sidenav Container: el contenedor de lo que veremos a continuación
- Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación
- Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección
Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.
Si quieres ver el ejemplo terminado haz click aquí.
Agregar Angular Material a app de Angular
En este post te muestro cómo agregar y utilizar los estilos de Material Design o Angular Material a una aplicación de Angular. Vamos a ver cómo:
- Agregar
@angular/materiala proyecto - Utilizar un tema presideñado
- Configurar componente contenedor
- Usar algunos componentes
Nota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular.
Variables CSS con var() – Tutorial y ejemplos
Introducción a las variables CSS
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.
word wrap en CSS – Ejemplos de estilo
Propiedad word-wrap en CSS
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.
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.
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.
Leer más »Javascript – mostrar solo algunos elementos al imprimir página web
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.
Formulario de login con Bootstrap 4
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.
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.
Leer más »Plantilla inicial de Bootstrap 4 (starter template)
Generador de multiplicaciones online para imprimir y resolver
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.
Leer más »Generador de multiplicaciones online para imprimir y resolver
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
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).
Leer más »Aplicación web para tomar notas con JavaScript, Vue.js, Bootstrap y localStorage
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.
Leer más »Configuración e instalación de Iconos de Font Awesome 5.7 para uso offline
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
En este post voy a explicar cómo descargar los iconos y cómo usarlos en la web.
Leer más »Eva Icons: un paquete de iconos open source para la web o para descargar
- 1
- 2
- Siguiente »