7

Cómo implementar Google Material Design en un sitio web

1330Puntos

hace 8 años

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

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

En este artículo aprenderás 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.

Nuestros cursos de desarrollador web cubren este y muchos otros conceptos vitales. ¡Exploralos!

Nota: en cada código encontrarás un comentario explicativo 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 opciones de descarga que pueden resultar confusas para algunos.

Descargar Material Design

Una vez concluido el proceso, antes de cerrar la etiqueta head, debes poner 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 más o menos así:

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 ubicar 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>

Ahora que has aprendido a aplicar Material Design a tus proyectos web, te invito a ver el demo del proyecto y obtener el código en Git.

Si quieres saber todo lo que puedes lograr con las distintas herramientas de Google, inscríbete hoy a la Carrera de Google Fullstack Developer, donde aprenderás todo lo que debes saber sobre aplicaciones web o móviles, desde cómo diseñarlas, crearlas y publicarlas hasta cómo puedes monetizarlas.

Juan Ricardo
Juan Ricardo
pepoflex

1330Puntos

hace 8 años

Todas sus entradas
Escribe tu comentario
+ 2