Frikipandi – Web de Tecnología – Lo más Friki de la red. Web de Tecnología con las noticias más frikis de Internet. Noticias de gadgets, Hardware, Software, móviles e Internet. Frikipandi 
Google anunció en Junio, Material Design, un manual de estilo para unificar todas las aplicaciones de Google, ya fuesen para Android, web, etc. El resultado ha sido bueno y es por eso que desde Google Developers se ha lanzado un portal donde han presentado un nuevo framework para implementar Material Design Lite en el diseño de páginas web. Google Material Design Lite para Web. Es decir facilitan tipográfías, iconos, colores y algunas plantillas base para facilitar su inclusión a los menos expertos.
En dicho Material Design Lite nos vamos a encontrar una serie de complementos tales como botones, checkboxs, tipografías y muchos más elementos que siguen un patrón de estilo establecido por Google, usando HTML, CSS y Javascript. Y todo además preparado para que cualquier diseñador web lo implemente en sus propios proyectos.
Al final quier habituar a los usuarios a un interfa UX/UI sencillo donde siempre tendremos una iconografía parecida. Es decir que el usuario ya habrá usado estos elmentos antes en las páginas y servicios de Google y sobre todo en Android.
Utilizar Google Material Design Lite para Web
El código para poder implementar Material Design Lite en nuestros proyectos, se puede descargar desde GitHub. https://github.com/google/material-design-lite El peso es de 27 Kb y contiene una extensa libreria de componentes que utilizar en nuestros proyectos de página web y aplicaciones. No es demasiado pesada para tenerla en nuestro proyecto Web.
Incluya la CSS material Lite y los archivos JavaScript en cada página HTML en su proyecto. Le recomendamos que utilice los archivos alojados en nuestra CDN . También puede personalizar y descargar a ellos reciban a ti mismo, construir desde nuestro código fuente o instalarlos en su NPM / Bower proyecto.
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >Seleccione el esquema de color. Constructor tema CSS
Los esquemas de color utilizados en Diseño de materiales se basan en un un colores de acento, que es posible que desee personalizar primaria y. Utilice la herramienta Personalizar y vista previa para seleccionar y previsualizar las combinaciones de los colores de acento primario y para su sitio. A continuación, descargue el material personalizado Diseño Lite CSS utilizando el botón y simplemente reemplazar el material.min.css con el elegido.Haga clic en la rueda de color para elegir un (1) y el acento (2) Color primario para previsualizar el tema a continuación. Cuando haya seleccionado una combinación de colores que te gusta, o bien hacer referencia a nuestra CSS organizada o descargar el CSS haciendo clic en el botón blanco en el medio.Usted tendrá que incluir de MDL JavaScript lado de su CSS personalizado para obtener la experiencia completa. Esto está incluido en nuestra defecto Descargue desde la Guía de introducción .
Ahora está listo para agregar componentes MDL en su sitio.En Material Design Lite también encontraremos 5 plantillas diferentes para utilizar en nuestro blog, app de android, panel de gestión, una página web o una página simple de texto.
BLOG
Un móvil se centró plantilla sensible que muestra imágenes o texto entradas de blog base, una CTA de suscripción, buscar y compartir enlaces, y un artículo de la página ampliada con comentarios, contadores y capacidades de marcadores incorporados.
ANDROID.COM MDL SKIN
Una versión Lite Material de Diseño del sitio android.com actual, utilizando el mismo contenido con una navegación horizontal, característica carrusel y formato largo subpáginas desplazamiento.
TABLERO. Dashboard para una administración
Una plantilla de respuesta modular construido para mostrar visualizaciones de datos e información con una navegación clara vertical, perfil de usuario, la búsqueda y el espacio dedicado para actualizaciones y filtros.
PÁGINA DE TEXTO PESADA
Construido para la presentación de contenido que es información densa, fácilmente actualizable, y optimizado para la legibilidad, esta plantilla tiene un navegador pegajosa horizontal superior, llamadas de función, cartas y un mapa del sitio pie de página con una tabla de profundidad enlazada de contenidos.
ARTÍCULO INDEPENDIENTE
Un diseño limpio optimizado para presentar el contenido basado en texto con una navegación breadcrumb, búsqueda, encabezados claros y un pie de página que utiliza una estructura similar a una tarjeta de mostrar el contenido.
Además, si quieres integrar alguno de los elementos de la libreria Google también ha facilitado una sección “customize” donde hacer cambios en dichos elementos referentes a color, etc.
http://www.getmdl.io/customize/index.html
Componentes Material Design Lite:
Material Design Lite (MDL) es una biblioteca de componentes para desarrolladores web basado en material Filosofía de diseño de Google: «Un lenguaje visual para nuestros usuarios que sintetiza los principios clásicos de buen diseño con la innovación y la posibilidad de que la tecnología y la ciencia.» La comprensión de los objetivos y principios de diseño de materiales es fundamental para el buen uso de los componentes de Material Design Lite. Si todavía no has leído el Manual de Introducción debe hacerlo antes de intentar utilizar los componentes.
Tipografía:
Recomienda la Web font Roboto específicamente diseñada para la web.
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">Hay que tener en cuenta que todos estos elementos y esta librería funcionará correctamente en las dos últimas versiones de los navegadores Chrome, Firefox, Safari, Opera y Microsoft Edge. Si la necesita usar en navegadores I.E más antiguos.
<! – [If IE]>
<script src=»//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js»></ script>
<script src=»//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js»></script>
<script src=»//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js»></ script>
<! [Endif] ->
Material Design Lite está optimizada para utilizarse en sitios web grandes y complejos, así como en cualquier dispositivos móvil. Es decir cumple al cien por cien con las líneas marcadas por el Diseño Web Responsive.
En definitiva, Material Design Lite no es otra cosa que la forma en que Google piensa que deberían diseñarse todas las páginas webs para dar una uniformidad al caos y la pluralidad de internet. Parece que con Android van consiguiendo una interfaz UX cada vez más pulida y ahora quieren hacerlo para las Webs en Internet. Google siempre ha querido que las búsquedas en su buscador estrella ofrezcan resultados con páginas webs que tengan una carga rápida, un diseño limpio, que ofrezcan una experiencia de usuario adecuada y que se adapten a dispositivos móviles. Es decir optimizadas en SEO y WPO. Ahora facilitan unas guías.
Al lanzar Material Design Lite, Google está invitando a todos los diseñadores y desarrolladores a seguir la línea de diseño marcada por ellos. De momento no hay ventaja en el posicionamiento en aquellas páginas que implementen esta librería sobre las demás, pero quién sabe que nos deparará el futuro. Google siempre sorprende como nos paso el 21 de abril cuando tuvimos que adaptar las Web al móvil por Google
Enlaces
. Leer artículo completo en Frikipandi Google Material Design Lite para Web.
