Kurs
Curso de MATERIAL DESIGN LITE
Curso para aprender la utilización del framework MATERIAL DESIGN LITE (MDL).
Module (4)
-
1. Introducción MDL
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)
-
2. Configuración de entorno de trabajo
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">
-
3. Estilos y tipografias
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 :).
-
4. Layout parte 1
4. Layout parte 1