SlideShare uma empresa Scribd logo
1 de 7
Materialize.css
Lic. Octavio Quintero Cibrián
Luis Jesús Esparza Patiño
Objetivos
 Conocer las clases CSS de Materialize.css
 Conocer los componentes que nos brinda
Materialize.css
 Aplicar un poco de Javascript mediante Jquery
con Materialize.css.
 Agregar Materialize.css al Proyecto Web.
 Hacer uso de los diferentes componentes.
Introducción
 Es un framework web front-end moderno y responsivo
basado en Material Design.
 Materialize simplifica la vida de los desarrolladores y los
usuarios que atienden.
 Ventajas:
 Acelera el Desarrollo
 Está enfocado en el usuario final
 Fácil de Trabajar
Sobre Materialize (Material Design)
 Creado y diseñado por Google, Material Design es
un lenguaje de diseño que combina los principios
clásicos del diseño exitoso junto con la innovación
y la tecnología. El objetivo de Google consiste en
desarrollar un sistema de diseño que permite una
experiencia de usuario unificada a través de todos
sus productos en cualquier plataforma.
Descarga o añadir CDN + Estructura
 Ir a Materializecss.com y descargar los archivos o sólo
copiar los links del CSS y JS.
Desarrolladores de Materialize
Un grupo de estudiantes de la Carnegie Mellon University

Mais conteúdo relacionado

Semelhante a Presentación de MaterializeCSS

Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
Cycle-IT
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Ianpierr Miranda
 
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptxwepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
felippee1010
 
Wordpress Overview
Wordpress OverviewWordpress Overview
Wordpress Overview
andres_0403
 

Semelhante a Presentación de MaterializeCSS (20)

Conviértete en un desarrollador web front-end
Conviértete en un desarrollador web front-endConviértete en un desarrollador web front-end
Conviértete en un desarrollador web front-end
 
Conviértete en un desarrollador web front end
Conviértete en un desarrollador web front endConviértete en un desarrollador web front end
Conviértete en un desarrollador web front end
 
Plantillas ReadySET
Plantillas ReadySETPlantillas ReadySET
Plantillas ReadySET
 
Devops Adoption Roadmap v.2.6
Devops Adoption Roadmap v.2.6Devops Adoption Roadmap v.2.6
Devops Adoption Roadmap v.2.6
 
Devops Adoption Roadmap v 2.7 Agiles Colombia 2020
Devops Adoption Roadmap v 2.7 Agiles Colombia 2020Devops Adoption Roadmap v 2.7 Agiles Colombia 2020
Devops Adoption Roadmap v 2.7 Agiles Colombia 2020
 
Devsecops con azure devops en global azure bootcamp 2019
Devsecops con azure devops en global azure bootcamp 2019Devsecops con azure devops en global azure bootcamp 2019
Devsecops con azure devops en global azure bootcamp 2019
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Presentación1.pptxteban
Presentación1.pptxtebanPresentación1.pptxteban
Presentación1.pptxteban
 
Netex learningMaker | Herramienta autora de contenidos e-learning en HTML5 [ES]
Netex learningMaker | Herramienta autora de contenidos e-learning en HTML5 [ES]Netex learningMaker | Herramienta autora de contenidos e-learning en HTML5 [ES]
Netex learningMaker | Herramienta autora de contenidos e-learning en HTML5 [ES]
 
Word press
Word pressWord press
Word press
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes Web
 
Front end
Front endFront end
Front end
 
Visual Studio 2012
Visual Studio 2012Visual Studio 2012
Visual Studio 2012
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
 
Programación juliana montoya
Programación juliana montoyaProgramación juliana montoya
Programación juliana montoya
 
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptxwepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
 
Wordpress Overview
Wordpress OverviewWordpress Overview
Wordpress Overview
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Catalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones WebCatalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones Web
 

Último

GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 

Último (20)

plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 

Presentación de MaterializeCSS

  • 1. Materialize.css Lic. Octavio Quintero Cibrián Luis Jesús Esparza Patiño
  • 2. Objetivos  Conocer las clases CSS de Materialize.css  Conocer los componentes que nos brinda Materialize.css  Aplicar un poco de Javascript mediante Jquery con Materialize.css.  Agregar Materialize.css al Proyecto Web.  Hacer uso de los diferentes componentes.
  • 3. Introducción  Es un framework web front-end moderno y responsivo basado en Material Design.  Materialize simplifica la vida de los desarrolladores y los usuarios que atienden.  Ventajas:  Acelera el Desarrollo  Está enfocado en el usuario final  Fácil de Trabajar
  • 4.
  • 5. Sobre Materialize (Material Design)  Creado y diseñado por Google, Material Design es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. El objetivo de Google consiste en desarrollar un sistema de diseño que permite una experiencia de usuario unificada a través de todos sus productos en cualquier plataforma.
  • 6. Descarga o añadir CDN + Estructura  Ir a Materializecss.com y descargar los archivos o sólo copiar los links del CSS y JS.
  • 7. Desarrolladores de Materialize Un grupo de estudiantes de la Carnegie Mellon University