Curso de MATERIAL DESIGN LITE Público

Curso de MATERIAL DESIGN LITE

FREDYS  FERNANDEZ
Curso por FREDYS FERNANDEZ, actualizado hace más de 1 año Colaboradores

Descripción

Curso para aprender la utilización del framework MATERIAL DESIGN LITE (MDL).

Información de los módulos

Sin etiquetas
1. Introducción MDL (Capitulo 1 https://www.youtube.com/watch?v=_EFo58r9Ggc)Material Design es una normativa de diseño creada por google enfocada al diseño móvil y web lanzada en 2014, un lenguaje de diseño que combina los principios clásicos de diseño junto con la innovación y la tecnología.¿Que es Material Design Lite? (MDL)Es una biblioteca de componentes o framework css basado 100% en estilo de material design y tiene como objetivo la optimizar el diseño para su uso en diferentes dispositivos. MDL hace fácil que se pueda añadir material design a los sitios web. MDL tiene pocas dependencias y es fácil utilizar.¿Por que lo debo usar?Esta hecho para hacer pantallas adaptables en función de su resolución. A las interfaces se le puede adaptar un color primario y secundario y permite personalizar esos colores desde su pagina web. y por ultimo un gran cantidad de componentes que pueden ser personaliza bles. ¿Quien lo utiliza?Google Youtube facebook (aplicación móvil) Gmail (Aplicación Móvil)
Mostrar menos
Sin etiquetas
2. Configuración del entorno de trabajo (Capitulo 2 https://www.youtube.com/watch?v=AZ5i8EhoZhA )Recursos para trabajar Editor de texto (Sublime text, Brackets, Atom etc.) navegador https://getmdl.io/ (descargar Material Design Lite) Estructura de como deben quedar los linkLLamado css<link rel="stylesheet" href="css/material.min.css"> LLamado script<script src="js/material.min.js"></script>Iconos<link rel="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Mostrar menos
Sin etiquetas
3. Estilos y tipografías El tipo de letra que usa MDL es Roboto Font.Puedes descargar la fuente de la letra o colocar el link que ofrece el framework.<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">Para cambiar los colores primarios y secundarios, se deben ir a la paleta de colores por medio de la pagina y escoger los colores que deseas, tienes la posibilidad de descargar el archivo css o colocar el link que se genera automáticamente.Pasos Ingresar a la pagina con la siguiente url: https://getmdl.io/styles/index.html Ir a la pestaña de Styles (estilos). Ir hacia abajo de la pagina, llegar a la sección color Palette. Escoger los colores y descargar el archivo llamar la url que se genere automáticamente. recargas la pagina de tu aplicación y listo :).
Mostrar menos
Sin etiquetas
4. Layout parte 1
Mostrar menos
Mostrar resumen completo Ocultar resumen completo