Módulos
1. Introducción al Framework Nigma
- ¿Para qué sirve el Framework Nigma?
- Herramientas necesarias
- Editor de código y configuración
- Instalar dependencias del Framework
- Tu primer Hola mundo!
- Estructura del Framework Nigma
2. Preprocesadores para HTML y CSS
- Introducción a Pug
- Modularizar HTML con Pug – include
- Modularizar HTML con Pug – Extends y Block
- Modularizar HTML con pug en el Framework
- Introducción a Stylus
- Modularizar CSS con Stylus
- Introducción al nombramiento de clases CSS
- Nombrar clases CSS como componentes
- Nombrar clases CSS como objetos
3. Configuración de Stylus en el Framework
- Rutas para imágenes y fuentes tipográficas
- Tipografía personalizada con Google Fonts
- Tipografía personalizada con el Framework
- Icon Fonts de terceros
- Crea tus propios icon-fonts
- Tamaño y grosor por defecto para textos
- Configurar paleta de colores
- Grid layout con CSS nativo
- Grid layout con Flexbox
4. Mobile First y Responsive Design
- ¿Por qué Mobile First?
- Media Queries usando +min()
- Media Queries usando +max()
- Media Queries +between()
- Media Queries +at()
- Media Queries +mobile()
- Media Queries + tablet()
- Media Queries +desktop()
- Media Queries +hd()
5. Preparar proyecto para producción
- Copyright automático en archivos CSS y JavaScript
- Generación de archivos .htaccess y humans.txt
- Comando para crear código listo para producción
6. Proyecto práctico de Maquetación usando el Framework
- Maquetación Web de la vista home
- Maquetación Web de la vista portafolio
- Maquetación Web de la vista contacto
- Maquetación Web de popups
Objetivos:
- Aprender a codificar tus propios diseños usando un kit de herramientas tecnológicas modernas.
- Maqueta cualquier diseño a medida para todos los tamaños de pantalla sin depender de 12 columnas.
- Aumenta la velocidad de cada página al solo cargar la parte requerida usando XHR.
- Implementa fuentes tipográficas o icon fonts personalizados de tu autoría o de terceros.
- Optimiza tu código CSS y HTML y dejarlo listo para producción.
Perfil vocacional
Apasionado por la tecnología, te gusta crear desde cero tus diseños y no tienes límites para la creatividad.
Perfil profesional
Serás capaz de llevar a código cualquier interfaz Web por más compleja que esta sea, ya sea que tú mismo realices el diseño o que un diseñador te envíe el diseño para que lo maquetes desde cero y que este se pueda ver en todos los dispositivos. Puedes desempeñarte como Maquetador Web Senior ya que la experiencia que vas a adquirir en el curso es bastante avanzada, muy pocas personas saben realmente llevar a código una interfaz Web a medida por lo que te dará un plus a tu hoja de vida.
Metodología y duración
Clases en video para estudiar online y a tu ritmo.
Duración: 15 horas
Convenios Unihorizonte
