Diseño y creación de interfaces para sitios web con el Framework CSS Materialize.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Diseño y creación de interfaces para sitios web con el Framework CSS Materialize."

Adolfo de la Fuente Morales
hace 5 años
Vistas:

1 TEMA Diseño y creación de interfaces para sitios web con el Framework CSS Materialize. OBJETIVO Ser capaz de crear interfaces de una página web con los componentes que nos proporciona el Framework CSS Materialize. MATERIALES AUTILIZAR Editor de texto como Sublime Text u otros. 1 Navegador web. Archivos descomprimidos (CSS y JS) de Materialize. 2 INTRODUCCIÓN Qué es material design? Es un Lenguaje de diseño desarrollado por Google que sintetiza los principios del buen diseño junto con la innovación y la tecnología. Qué es Materialize CSS? Al igual que Foundation o Bootstrap, Materialize CSS es un framework para el desarrollo frontend responsivo que nos proporciona una serie de componentes CSS y ficheros JavaScript para trabajar; menús, headers, botones, iconos, etc, así como una retícula o rejilla para maquetar y construir nuestra página web o aplicación. 1 Recomiendo también Brackets o Atom, que también son editores de texto. 2 Los puedes encontrar en su página oficial:

2 Materialize cuenta con componentes personalizados con unos estilos por defecto, que se pueden manejar fácilmente para generar animaciones y ciertas transiciones, de tal manera que para el desarrollador web es mucho más fácil hacer su tarea de diseño web. COMPONENTES DESTACADOS Color Disponemos de una paleta de colores predefinidos de acuerdo con Material Design que dan estilos al texto y al fondo, manipulando dos clases, una para el color y otra para la saturación. Grid o cuadrícula En MaterializeCSS se usa el sistema estándar de cuadrículas de 12 columnas. Las cuadrículas te ayudan a maquetar y diseñar las páginas de tus webs o aplicación de forma ordenada, sencilla y elegante. Sombras En material design damos profundidad a los elementos en el eje Z usando sombras, ayudando al usuario a percibir que elemento de la página está por encima de los otros. Botones / buttons Hay tres tipos de botones descritos en Material Design: 1. Raised button (botón en relieve), que es un botón estándar que sugiere acciones y trata de dar profundidad a una página en su mayoría plana (flat). 2. Floating button (botón circular flotante), usado para funciones muy importantes y situado jerárquicamente por encima de los otros. 3. Flat Buttons (botones planos), que se usan dentro de elementos que ya tienen profundidad, como las ventanas modales. Sidenav / menú lateral Formularios Iconos Tabs / pestañas DESARROLLO DE LA GUÍA 1

3 Para comenzar a usar Materialize, todo lo que tienes que hacer es descargarlo desde su página oficial. Después de la descarga, extraiga los archivos en el directorio donde se encuentra su sitio web. Notarás que hay dos conjuntos de archivos. El min significa que el archivo está "comprimido" para reducir los tiempos de carga. A continuación, solamente se tiene que asegurar de vincular los archivos correctamente en su página web. Crea una carpeta y llámala materialize-css o como gustes, y dentro de esta crea un index.html y una carpeta img. Abrimos nuestro fichero index.html y cargamos el css y el js de materialize, también debemos cargar jquery ya que materialize funciona con él. Cárgalo antes que materialize.min.js y coloca ambos ficheros JavaScript justo antes del cierre de la etiqueta </body> para optimizar los tiempos de carga: <!DOCTYPE html> <html> <head> <title>materialize CSS Tutorial</title> <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=no"/>  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="css/custom.css" /> </head> <body>  <script type="text/javascript" src=" min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html> Debajo del css de materialize añadimos nuestro propio custom.css aparte para no tocar el de materialize y agregar nuestros estilos a la página web. CABECERA / HEADER Creamos el menú y una pequeña introducción sobre de qué va nuestro portfolio (situar el h1 para posicionamiento y demás). Jugamos con las clases de Materialize dando el color de fondo y su matiz correspondiente. Dejamos el correspondiente botón del menú desplegable y hacemos que 2

4 active el menú pasándole al atributo personalizado de Materialize llamado data-activates, el id del menú que vamos a desplegar en dispositivos tablets y móviles: <header class="orange lighten-2 z-depth-1"> <nav class="top-nav orange lighten-2"> <div class="nav-wrapper"> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a> <ul class="side-nav fixed grey darken-4"> <li><a href="#portfolio" class="waves-effect">portafolio</a> <li><a href="#sobremi" class="waves-effect">nosotros</a> <li><a href="#habilidades" class="waves-effect">habilidades</a> <li><a href="#contacto" class="waves-effect">contacto</a> </ul> </nav> <img src="img/retratos-pixelart.svg" alt="retratos Pixelart" class="logo responsive-img"> <h1 class="white-text">aprendiendo Materialize</h1> <a href="#portfolio" class="btn-floating btn-large waves-effect waves-light teal lighten-1"> <i class="mdi-navigation-expand-more"></i> </a> </header> En el código, justo antes de cerrar la etiqueta </body>, colocamos los scripts necesarios para materialize: jquery en este caso y materialize.js. De paso hacemos la llamada de la función sidenav() de Materialize CSS, que vuelve nuestro menú responsivo:  <script type="text/javascript" src=" min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> <script> $(document).ready(function () { //Menú responsivo $(".button-collapse").sidenav(); }); </script> CONTACTO 3

5 Código muy sencillo que nos deja un formulario de contacto visualmente atractivo usando las clases para formularios de Materialize: <section id="contacto" class="contacto"> <div class="container"> <h4>contacto</h4> <hr> <div class="col s12 m7"> <form class="col s12"> <div class="input-field col s6"> <i class="mdi-action-account-circle prefix"></i> <input id="first_name" type="text" class="validate"> <label for="first_name">nombre</label> <div class="input-field col s6"> <input id="last_name" type="text" class="validate"> <label for="last_name">apellido</label> <div class="input-field col s12"> <i class="mdi-communication- prefix"></i> <input id=" " type=" " class="validate"> <label for=" "> </label> <div class="input-field col s12"> <i class="mdi-communication-comment prefix"></i> <textarea id="mensaje" class="materializetextarea" required></textarea> <label for="mensaje">mensaje</label> <button class="btn waves-effect waves-light" type="submit" name="action">enviar <i class="mdi-content-send right"></i> </button> </form> <div class="col s12 m4 offset-m1 contact-holder"> <h6 class="mdi-action-home">dirección</h6> <p>san Salvador</p> <h6 class="mdi-hardware-phone-android">móvil</h6> <p> </p> <h6 class="mdi-action-open-in-browser">web</h6> 4

6 <p>aprendiendomaterialize.com</p> </section> FOOTER En él mostramos el copyright y algún que otro enlace, con las clases de Materialize CSS creamos un footer en un momento: <footer class="page-footer orange lighten-2"> <div class="footer-copyright"> <div class="container"> 2018 Mareialize <a class="grey-text text-lighten-4 right" href=" /">Web</a> </footer> EJERCICIOS A DESARROLLAR A la página web que has creado, agrega las demás opciones de menú que se presentan: Portafolio, Nosotros y Habilidades. Agrega una ubicación al apartado de Contacto. Crea y diseña un Login y un Regístrate para la página web. TRABAJO DE INVESTIGACIÓN Desarrollar una investigación sobre cómo diseñar y crear una página web Parallax con Materialize. Investiga por qué Materialize también es utilizado para diseñar aplicaciones móviles y cuáles componentes utiliza para poder llevar a cabo este trabajo. 5

7 REFERENCIAS Página de la documentación oficial de Materialize: 6

Documentos relacionados

Construcción de interfaces de usuario, usando: Bootstrap 4, HTML, Imágenes

Tema. Construcción de interfaces de usuario, usando: Bootstrap 4, HTML, Imágenes Objetivos. Objetivo General o Aprender como instalar, configurar y el uso de Bootstrap 4 en nuestros proyectos Objetivos