{"id":997,"date":"2015-05-07T21:19:45","date_gmt":"2015-05-07T21:19:45","guid":{"rendered":"http:\/\/maquetando.com\/?p=997"},"modified":"2015-05-07T21:30:57","modified_gmt":"2015-05-07T21:30:57","slug":"materializecss-el-framework-basado-en-material-design-de-google","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/materializecss-el-framework-basado-en-material-design-de-google\/","title":{"rendered":"MaterializeCSS : el framework  basado en Material Design de Google"},"content":{"rendered":"<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2015\/05\/materialize.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-999\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2015\/05\/materialize.jpg\" alt=\"materialize\" width=\"600\" height=\"321\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2015\/05\/materialize.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2015\/05\/materialize-300x161.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Materialize es un framework basado en \u00a0Material Design, \u00a0un concepto creado por Google para unificar el dise\u00f1o de sus aplicaciones sin importar la plataforma en que se muestren.<\/p>\n<h2>\u00bfQue es Material Design?<\/h2>\n<p>Material design es un concepto, una filosof\u00eda, un lenguaje de dise\u00f1o con pautas enfocadas al dise\u00f1o utilizado en la UI de Android, pero tambi\u00e9n para la web y en cualquier plataforma ,\u00a0\u00a0se trata de un dise\u00f1o m\u00e1s limpio en el que predominan animaciones y transiciones de respuesta, el relleno y los efectos de profundidad tales como la iluminaci\u00f3n y las sombras.<\/p>\n<p>Existen otros lenguajes de dise\u00f1o como<strong> flat design, metro design, realism design, mobile first etc.\u00a0<\/strong><\/p>\n<p>Material\u00a0\u00a0se puede ampliar y redimensionar de manera inteligente. Material Design tiene superficies f\u00edsicas y bordes. Las escenas y sombras proporcionan significado sobre lo que se puede tocar y c\u00f3mo se va a mover.<\/p>\n<p>El \u00abmaterial\u00bb \u00a0es el \u00fanico elemento en el \u00a0lenguaje de dise\u00f1o que a\u00f1ade movimiento y profundidad a\u00a0medida que el usuario interactua con el dise\u00f1o , \u00a0el dise\u00f1o se transforma y se reorganiza el mismo con una continuada muy atractiva.<\/p>\n<p><iframe loading=\"lazy\" title=\"Material design\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Q8TXgCzxEnw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>MaterzialiceCSS al igual que cualquier framework contiene los clasicos componentes \u00a0javascript\/CSS \u00a0listos para ser utilizados en nuestras web o apps, pero el resultado es muy agradable si lo comparamos con bootstrap :).<\/p>\n<h3>Existen dos alternativas de usar MaterializeCSS :<\/h3>\n<p><strong>MaterializeCSS<\/strong><br \/>\nEsta es la versi\u00f3n est\u00e1ndar que viene con ambos archivos CSS y JavaScript minificados y desminificados. Esta opci\u00f3n requiere poca o ninguna configuraci\u00f3n, es la versi\u00f3n ideal para producci\u00f3n.<\/p>\n<p><strong>Sass<\/strong><br \/>\nEsta versi\u00f3n contiene los archivos fuente SCSS , se\u00a0tiene m\u00e1s control sobre los componentes pero es necesario conocer este metalenguaje.<\/p>\n<p>Enlace [ <a href=\"http:\/\/materializecss.com\/\" target=\"_blank\">MaterializeCSS<\/a> ]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Materialize es un framework basado en \u00a0Material Design, \u00a0un concepto creado por Google para unificar&hellip;<\/p>\n","protected":false},"author":1,"featured_media":999,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,37],"tags":[38,92],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/997"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=997"}],"version-history":[{"count":7,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/997\/revisions"}],"predecessor-version":[{"id":1006,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/997\/revisions\/1006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/999"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}