Curso de MATERIAL DESIGN LITE Public

Curso de MATERIAL DESIGN LITE

FREDYS  FERNANDEZ
Course by FREDYS FERNANDEZ, updated more than 1 year ago Contributors

Description

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

Module Information

No tags specified
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)
Show less
No tags specified
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">
Show less
No tags specified
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 :).
Show less
No tags specified
4. Layout parte 1
Show less
Show full summary Hide full summary