Materialize

¿Qué es Materialize?

Materialize es un framework Front-End para el desarrollo web. Nos permite desarrollar páginas web con gran facilidad a través de HTML5, CSS y JAVASCRIPT. Está basado en Material Design.

¿Quién lo desarrolló?

Materialize ha sido desarrollado por estudiantes de la Universidad Carnegie Mello (Pittsburgh, Pensilvania, EEUU). El MIT posee su licencia.

Material Design

¿Qué es Material Design?

Material Design es un concepto, una filosofía, unas pautas enfocadas al diseño utilizado en Android, pero también en la web y en cualquier plataforma. Material Design es creado y mantenido por Google y actualmente esta siendo aplicado a sus productos tanto en la Web como en su sistema operativo móvil Android, específicamente en su version 5.0 lollipop en adelante.

¿En qué se basa?

Material Design recibe su nombre por estar basado en objetos materiales. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado. Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.Material Design quiere guiarse por las leyes de la física, donde las animaciones sean lógicas, los objetos se superpongan pero no puedan atravesarse el uno al otro y demás.

Enlace y vídeo oficial

En este enlace, podrás adquir más información sobre Material Design.

Características Principales Materialize

Sencillez

Materialize consigue ofrecer una gran falicidad para realizar muchas opciones. Hay que disponer de un principio de ideas básicas de programación en HTML5, CSS y JAVASCRIPT. Simplemente debemos de seguir las instrucciones que están disponibles en su servicio web.

Responsive

Sin duda, una gran virtud, es que orienta todo a la responsividad. Consigue que todos los elementos se adapten a a las diferentes dimensiones de pantallas (small, medium, large). Esto facilita un buen diseño de una misma página en diferentes dispositivos.

Variedad

Este framework ofrece una gran cantidad de elementos para introducir en nuestra web. Colores, barras de menú, botones, javascript,... Simplemente hay que buscarlas y añadirlas a nuestra aplicación. Además, todo se puede encontrar en su propia página Página de Materialize.

Estructura

Inicio

Debemos de descargar la versión de materialize que deseamos. Nos ofrecen dos, la estándar y otra con fuente con Sass. Descomprimimos el paquete y tendremos las siguientes carpetas: css, js y fonts. Esta estrura es básica. En ellos, tendremos los ficheros propios de materialize, a los que nosotros podemos añadir los que queramos. Es recomendable no tocar estos ficheros.

Configuración

Ahora toca crear nuestra página. Creamos nuestro primer fichero html. En la página de materialize podemos encontrar una plantilla. Podemos copiarla, pero atención, en el primer link del head, añade una "s" al http, si no tendrás un error.

Funcionamiento

Materialize se fundamenta en la administración de las clases y los identificadores.

Con ellas, podemos elegir que tipo de elemento queremos utilizar (menús, colecciones, formularios, tablas, alineaciones, colores,...)

Las columnas viven en las filas

Materialize funciona básicamente con dos clases, row y col. Siempre que pongamos una fila, es aconsejable poner una columna. Tampoco es recomendable poner una columna sin una fila antes.

Disponemos de 12 diferentes particiones que podemos administrar como queramos. Por ejemplo, podemos dividir una fila en 12,11,10,9,...1 columnas.

Disponemos además, tres diferentes tamaños dependiendo del tamaño de pantalla. Tenemos s(small), m(medium) y l(large).

CSS

En este apartado, hablaremos de algunas de las características que nos ofrece Materialize en cuanto a elementos de css se refiere.

Colores

Materialize nos ofrece una fácil posibilidad para cambiar el color a los elementos. Simplemente hay que copiar el identificador que nos ofrecen en su página y añadirlos a la clase del elemento.

Este parráfo ha cambiado de color de fondo

Este parráfo ha cambiado de color de texto

Class Container

Disponemos una class container que nos permite centrar el contenido de la página. Se adapta perfectamente a los diferentes tamaños de pantalla. Solamente hay que añadir en la class (normalmente de un div) la clase container

Imágenes y Vídeos

Las imágenes y los vídeos en Materialize, son responsivos. Añadimos la clase predefinida y listo.

responsive-img

video-container

Tablas y otras opciones

Alineado

Izquierda

Centro

Derecha

Sombras

Sombra 1

Sombra 2

Sombra 3

Sombra 4

Sombra 5

Componentes

Disponemos de diferentes componentes para añadir a nuestra página web. Botones, notificaciones, caminos, tarjetas, etiquetas, formularios,...

Notificaciones

notificacion 10

Caminos

Tarjetas

UD Chíomore_vert

Pagina Oficial

UD Chíoclose

Equipo de fútbol de la de isla de Tenerife

Iconos

Javascript

Ampliar Imagen

Una forma de apmpliar imágenes

Plegables

• filter_dramaPrimero

  Hola Mundo

• placeSegundo

  Hola Mundo 2.

• whatshotTercero

  Hola Mundo 3