fcbk
Conéctate con TwitterConéctate con Facebook
2

Cómo implementar Google Material Design en un sitio web

1205Puntos

hace 2 años

Google Material Design provee un kit de utilidades que permite darle mejor aspecto a nuestros sitios o aplicaciones web. Podría definirse como un framework para desarrollo Front-end, que nos ayuda mantener los estándares adecuados para presentar nuestro proyecto de manera impecable.

Este es un aporte de Juan Castro, un estudiante de Platzi. Tu también puedes aprender diseño de interfaces, desarrollo de apps Android y más en con nosotros.

En este artículo te enseñaré una forma de implementarlo en un sitio web. Estos son los puntos que tocaremos hoy:

  • Instanciar e instalar Material Design en nuestro sitio HTML5
  • Crear el header y menú responsive
  • Crear el espacio para nuestro slider
  • Crear contenido con 4 columnas debajo del Slider
  • Crear el Footer

Nota: En cada código coloco un comentario para mencionar qué significa. Es decir, entre las etiquetas. Por ejemplo:

Aca va el código ...

Instanciar e instalar Material Design

Para obtener el kit, debes visitar la web Material Design y hacer clic en el botón _Download. _Es importante que navegues el sitio con calma; ya que hay otras opciones de descarga que pueden resultar confusas para algunos.

Descargar Material Design

Una vez concluido el proceso, antes de cerrar la etiqueta head, debes colocar los siguientes elementos:

<metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="material.indigo-pink.min.css"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons">

Si te interesa cambiar el color del tema, puedes hacerlo de manera directa en el sitio de Material Design, en la sección Customize.

Crear el header y menú responsive

Agregaremos también un buscador y el característico botón desplegable de Material Design. Estos elementos se verán muy parecido a la siguiente imagen:

Header y menú responsive
<div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width"><label class="mdl-button mdl-js-button mdl-button--icon"for="search-field">_search_</label>

<div class="mdl-textfield__expandable-holder"><input class="mdl-textfield__input"type="text" id="search-field"></div>

</div>

<div class="android-navigation-container">

<nav class="android-navigation mdl-navigation"><a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Smartphones</a><a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Tablets</a><a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Wearables</a><a class="mdl-navigation__link mdl-typography--text-uppercase" href="">TVs</a><a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Autos</a></nav>

</div>

<button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">_more_vert_</button>

*   5.0Lollipop
*   4.4KitKat
*   4.3JellyBean
*   Historia de Android

Crear el espacio para nuestro slider

Ahora agregaremos un espacio para nuestro slider. De esta manera mejoraremos la presentación de nuestro sitio. El resultado será similar al de esta imagen:

Espacio para colocar un Slider
<div class="android-be-together-section mdl-typography--text-center">

<div class="android-font android-slogan">todos juntos. pero diferentes.</div>

<div class="android-font android-sub-slogan">Bienvenido a android ... sé tú mismo. crea el tuyo. mira lo que está pasando.</div>

<div class="android-font android-create-character"><a href="">images/andy.png crea tu personaje android</a></div>

[<button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">_expand_more_</button>](#screens)</div>

A la clase android-be-together-section le damos las siguientes propiedades CSS:

.android-be-together-section {
	position: relative;
	height: 350px;
	width: auto;
	background-color: #f3f3f3;
	background: url('../images/slide01.jpg') center 30% no-repeat;
	background-size: cover; 
} 

Crear contenido con 4 columnas debajo del Slider

Tal como lo hacíamos en Bootstrap -para los que están familiarizados con este framework-, definiremos 4 columnas en nuestro Grid para colocar contenidos. Por ejemplo: Contenido con 4 columnas debajo del Slider

<div class="android-card-container mdl-grid">

<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">

<div class="mdl-card__media">images/more-from-1.png</div>

<div class="mdl-card__title">

#### Empieze ya con Android

</div>

<div class="mdl-card__supporting-text">Cuatro consejos para hacer su cambio a Android rápido y fácil</div>

<div class="mdl-card__actions"><a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">Cambiarme ahora mismo _chevron_right_</a></div>

</div>

<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">

<div class="mdl-card__media">images/more-from-4.png</div>

<div class="mdl-card__title">

#### Crea tu Personaje en Android

</div>

<div class="mdl-card__supporting-text">Comparte con tus amigos la foto y Diviertete mucho !</div>

<div class="mdl-card__actions">[androidify.com _chevron_right_](https://androidify.com)</div>

</div>

<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">

<div class="mdl-card__media">images/more-from-2.png</div>

<div class="mdl-card__title">

#### Pantalla de inicio personalizada

</div>

<div class="mdl-card__supporting-text">Una pantalla limpia, sencilla, personalizable acompañado con el poder de Google Now: alertas de tráfico, el clima y mucho más, distancia de un lugar a otro.</div>

<div class="mdl-card__actions"><a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">Descargar _chevron_right_</a></div>

</div>

<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">

<div class="mdl-card__media">images/more-from-3.png</div>

<div class="mdl-card__title">

#### Muchs Apps para elegir

</div>

<div class="mdl-card__supporting-text">Llamar a un taxi, encontrar una receta, navegar por un templo - Google Play cuenta con todas las aplicaciones y juegos que te permitirán aprovechar tu dispositivo Android al máximo.</div>

<div class="mdl-card__actions"><a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">Buscar apps _chevron_right_</a></div>

</div>

</div>

Crear el Footer

Este es el lugar para colocar los créditos, el copyright y un menú secundario. Tal como lo muestra la imagen: Footer

<footer class="android-footer mdl-mega-footer">

<div class="mdl-mega-footer--top-section">

<div class="mdl-mega-footer--left-section"><button class="mdl-mega-footer--social-btn">G +</button>   <button class="mdl-mega-footer--social-btn">F</button>   <button class="mdl-mega-footer--social-btn">T</button></div>

<div class="mdl-mega-footer--right-section">[Subir arriba _expand_less_](#top)</div>

</div>

<div class="mdl-mega-footer--middle-section">Android © 2015 USA Algunas características y dispositivos pueden no estar disponibles en todas las áreas</div>

<div class="mdl-mega-footer--bottom-section"><a class="android-link android-link-menu mdl-typography--font-light" id="version-dropdown">Versiones _arrow_drop_up_</a>

*   5.0 Lollipop
*   4.4 KitKat
*   4.3 Jelly Bean
*   Android History

<a class="android-link android-link-menu mdl-typography--font-light" id="developers-dropdown">Para Desarrolladores _arrow_drop_up_</a>

*   Recursos para desarrollo de Apps
*   Android Open Source Project
*   Android SDK
*   Android para el Trabajo

<a class="android-link mdl-typography--font-light" href="">Blog</a><a class="android-link mdl-typography--font-light" href="">Política de Privacidad</a></div>

</footer>

Como pudiste darte cuenta, no es muy difícil aplicar Material Design en nuestros proyectos web. Te invito a ver el demo del proyecto y obtener el código en Git. Y si quieres saber todo lo que puedes lograr con las distintas herramientas de Google, regístrate hoy a la carrera de Google Fullstack Developer. Aprenderás todo desde cómo diseñar, crear, publicar y monetizar aplicaciones para móviles o web.

Juan Ricardo
Juan Ricardo
@pepoflex

1205Puntos

hace 2 años

Todas sus entradas
1
3Puntos
24 días
<!DOCTYPE html><html><head><title>Platzi</title></head><body><h1>H1</h1></body></html>
0
1986Puntos
2 meses

Excelente aporte. Muchas gracias por tomarte el tiempo de redactarlo y compartirlo. 👏