{"id":11270,"date":"2020-08-19T15:58:50","date_gmt":"2020-08-19T18:58:50","guid":{"rendered":"https:\/\/novo.siteup.dev\/?p=11270"},"modified":"2020-08-19T15:58:50","modified_gmt":"2020-08-19T18:58:50","slug":"materialize-framework-o-que-e","status":"publish","type":"post","link":"https:\/\/novo.siteup.dev\/en\/materialize-framework-o-que-e\/","title":{"rendered":"Materialize: O que \u00e9 e para que serve este framework?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Todos que participam de um <\/span><a href=\"https:\/\/www.anossaescola.com\/\" target=\"_blank\" rel=\"noopener\"><b>curso<\/b><\/a><span style=\"font-weight: 400;\"> de Front-End acabam conhecendo o Bootstrap, um dos frameworks mais conhecidos e usados. Mas existe uma alternativa poderosa, com recursos bem interessantes: o Materialize.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nesse guia vamos trazer as principais informa\u00e7\u00f5es sobre esse framework. Descubra o que ele \u00e9, para que serve e muito mais. Vamos falar sobre as suas origens, como ele pode ser usado e quais as suas principais caracter\u00edsticas.\u00a0<\/span><\/p>\n<h2 id=\"material-design\"><b>Material Design<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Antes de falarmos especificamente sobre o Materialize, \u00e9 importante conhecer o projeto em que ele est\u00e1 inserido, que se chama Material Design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ele foi criado e tamb\u00e9m projetado pela Google. Podemos dizer que o Material Design corresponde uma linguagem de design que mistura os princ\u00edpios cl\u00e1ssicos do design com a inova\u00e7\u00e3o e tecnologia.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O principal objetivo da gigante Google \u00e9 desenvolver um sistema de design que possibilite uma experi\u00eancia unificada do usu\u00e1rio em todos os seus produtos, no contexto de qualquer plataforma.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dessa forma, trata-se de uma proposta ousada, mas que est\u00e1 rendendo bons resultados at\u00e9 o momento. separamos abaixo alguns dos princ\u00edpios desse projeto:<\/span><\/p>\n<h2 id=\"principios\"><b>Princ\u00edpios\u00a0<\/b><\/h2>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3 id=\"material-e-a-metafora\"><span style=\"font-weight: 400;\">Material \u00e9 a met\u00e1fora<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Essa met\u00e1fora do material serve para definir a rela\u00e7\u00e3o existente entre espa\u00e7o e movimento. A ideia dessa met\u00e1fora \u00e9 que a tecnologia deve ser inspirada no papel e na tinta. Al\u00e9m disso, deve ser utilizada para facilitar a criatividade e a inova\u00e7\u00e3o.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dessa forma, as superf\u00edcies e arestas s\u00e3o elementos que fornecem pistas visuais familiares que permitem aos usu\u00e1rios entender rapidamente a tecnologia al\u00e9m do mundo f\u00edsico.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3 id=\"negrito-grafico-intencional\"><span style=\"font-weight: 400;\">Negrito, gr\u00e1fico, intencional<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Esse princ\u00edpio diz que elementos e componentes como grades, tipografia, cor e imagem s\u00e3o mais do que apenas visualmente agrad\u00e1veis. Eles tamb\u00e9m criam um senso de hierarquia, significado e foco.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3 id=\"movimento-fornece-significado\"><span style=\"font-weight: 400;\">Movimento fornece significado<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">De acordo com esse princ\u00edpio, o movimento \u00e9 o que permite ao usu\u00e1rio tra\u00e7ar um paralelo entre o que ele visualiza na tela e o que visualiza vida real.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dessa forma, ao fornecer feedback e familiaridade, permite que o usu\u00e1rio se aprofunde de forma completa na tecnologia desconhecida.\u00a0<\/span><\/p>\n<h2 id=\"o-que-e-materialize\"><b>O que \u00e9 materialize\u00a0<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Agora vamos falar sobre o conceito de Materialize. No site oficial \u00e9 poss\u00edvel encontrar um pequeno resumo conceitual: Uma estrutura de front-end responsiva moderna, baseada em design de materiais.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dessa forma, podemos dizer que o Materialize nada mais \u00e9 do que um framework, que pode ser usado para tornar o <a href=\"https:\/\/novo.siteup.dev\/en\/\" style=\"font-weight:bold\">desenvolvimento de sites<\/a> e sistemas online muito mais din\u00e2mico e f\u00e1cil.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00c9 considerado por muitos uma alternativa ao tradicional Bootstrap, um dos frameworks mais conhecidos.\u00a0<\/span><\/p>\n<h2 id=\"beneficios-do-materialize\"><b>Benef\u00edcios do Materialize\u00a0<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">O framework Materialize oferece uma grande variedade de benef\u00edcios, o que explica o seu sucesso entre os programadores. Fizemos uma lista desses benef\u00edcios abaixo.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3 id=\"acelera-o-desenvolvimento\"><span style=\"font-weight: 400;\">Acelera o desenvolvimento<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Os desenvolvedores do framework fizeram a maior parte do trabalho pesado. Dessa forma, foram capazes de fornecer um estilo padr\u00e3o que incorpora os componentes personalizados.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, as anima\u00e7\u00f5es e as transi\u00e7\u00f5es foram refinadas para proporcionar uma experi\u00eancia mais suave aos desenvolvedores.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3 id=\"experiencia-do-usuario-focada\"><span style=\"font-weight: 400;\">Experi\u00eancia do Usu\u00e1rio Focada<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Utilizando elementos e princ\u00edpios do Material Design, as mentes por tr\u00e1s do Materialize foram capazes de criar uma estrutura que incorpora componentes e anima\u00e7\u00f5es que fornecem mais feedback aos usu\u00e1rios.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, um \u00fanico sistema responsivo subjacente em todas as plataformas permite uma experi\u00eancia do usu\u00e1rio mais unificada.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3 id=\"facil-de-trabalhar\"><span style=\"font-weight: 400;\">F\u00e1cil de trabalhar<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">O Materialize \u00e9 um framework que oferece documenta\u00e7\u00e3o detalhada e exemplos de c\u00f3digos espec\u00edficos para ajudar os novos usu\u00e1rios a come\u00e7ar. Dessa forma, pode ser explorado at\u00e9 mesmos por programadores que ainda est\u00e3o fazendo o<\/span><a href=\"https:\/\/certificadocursosonline.com\/\" target=\"_blank\" rel=\"noopener\"> <b>curso<\/b><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2 id=\"como-usar-o-materialize\"><b>Como usar o Materialize<\/b><\/h2>\n<ol>\n<li>\n<h3 id=\"baixar\"><b> Baixar<\/b><\/h3>\n<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">O framework Materialize est\u00e1 dispon\u00edvel em duas formas diferentes. Voc\u00ea pode selecionar qual vers\u00e3o deseja, dependendo da sua prefer\u00eancia e conhecimento.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para come\u00e7ar a usar o Materialize, tudo o que voc\u00ea precisa fazer \u00e9 baixar uma das op\u00e7\u00f5es dispon\u00edveis, entre elas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Materializar<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Esta \u00e9 a vers\u00e3o padr\u00e3o que acompanha os arquivos CSS e JavaScript minificados e n\u00e3o minificados. Esta op\u00e7\u00e3o requer pouca ou nenhuma configura\u00e7\u00e3o. Use isso se voc\u00ea n\u00e3o estiver familiarizado com o Sass.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sass<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Esta vers\u00e3o cont\u00e9m os arquivos SCSS de origem. Ao escolher esta vers\u00e3o, voc\u00ea ter\u00e1 mais controle sobre quais componentes incluir. Voc\u00ea precisar\u00e1 de um compilador Sass se escolher esta op\u00e7\u00e3o.<\/span><\/p>\n<ol start=\"2\">\n<li>\n<h3 id=\"configuracao\"><b> Configura\u00e7\u00e3o<\/b><\/h3>\n<\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Estrutura do Projeto<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ap\u00f3s o download, extraia os arquivos para o diret\u00f3rio em que seu site est\u00e1 localizado. Seu diret\u00f3rio ser\u00e1 algo parecido com isto.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Configura\u00e7\u00e3o HTML<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Em seguida, basta vincular os arquivos corretamente na sua p\u00e1gina da web. Geralmente, \u00e9 aconselh\u00e1vel importar arquivos javascript no final do corpo para reduzir o tempo de carregamento da p\u00e1gina.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Modelos<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Para facilitar o trabalho, o Materialize conta com alguns modelos. Esses modelos foram pensados para que voc\u00ea possa come\u00e7ar facilmente a projetar seu site com um tempo m\u00ednimo de configura\u00e7\u00e3o.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Op\u00e7\u00f5es de terceiros<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Existem algumas op\u00e7\u00f5es criadas pela comunidade para voc\u00ea incluir facilmente o Materialize no seu projeto. No entanto, essas op\u00e7\u00f5es de terceiros n\u00e3o foram testadas, podendo estar desatualizadas.<\/span><\/p>\n<h2 id=\"qual-framework-usar\"><b>Qual framework usar?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Agora voc\u00ea pode estar se perguntando qual framework \u00e9 o melhor para o seu projeto. Essa n\u00e3o \u00e9 uma pergunta f\u00e1cil, tendo em vista que cada uma das op\u00e7\u00f5es dispon\u00edveis conta com suas pr\u00f3prias vantagens e desvantagens.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mesmo profissionais que j\u00e1 usam o Bootstrap<\/span> <span style=\"font-weight: 400;\">podem gostar do Materialize. S\u00e3o duas op\u00e7\u00f5es interessantes, que podem ser aplicadas com facilidade a um projeto. No entanto, quem j\u00e1 est\u00e1 acostumado com um pode optar por n\u00e3o testar o outro.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mas existem aqueles que gostam de experimentar novas ferramentas, para desenvolver novas habilidades e adquirir mais conhecimento. Para essas pessoas, pode ser uma \u00f3tima ideia experimentar o Materialize, mesmo j\u00e1 usando o Bootstrap.<\/span><\/p>\n<h2 id=\"conclusao\"><b>Conclus\u00e3o<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Neste guia falamos sobre o framework Materialize, explicando o que ele \u00e9, como ele pode ser usado, como funciona e muito mais. Como voc\u00ea pode ver, \u00e9 uma boa op\u00e7\u00e3o para aqueles que querem ir al\u00e9m do Bootstrap e testar algo novo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apesar disso, n\u00e3o \u00e9 f\u00e1cil determinar qual dos dois \u00e9 melhor ou mais recomendado. Na verdade, cada um deles ser\u00e1 mais agrad\u00e1vel para determinado grupo de pessoas.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">De qualquer forma, s\u00e3o op\u00e7\u00f5es interessantes, que ajudam muito no desenvolvimento de projetos diversos. Vale a pena conhecer mais a respeito e se atualizar.<\/span><\/p>","protected":false},"excerpt":{"rendered":"<p>Todos que participam de um curso de Front-End acabam conhecendo o Bootstrap, um dos frameworks mais conhecidos e usados. Mas existe uma alternativa poderosa, com recursos bem interessantes: o Materialize. Nesse guia vamos trazer as principais informa\u00e7\u00f5es sobre esse framework. Descubra o que ele \u00e9, para que serve e muito mais. Vamos falar sobre as [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[261,262,263,264,265,266,267],"class_list":["post-11270","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-beneficios-do-materialize","tag-como-usar-materialize","tag-framework","tag-materialize","tag-materialize-framework","tag-o-que-e-framework","tag-o-que-e-materialize"],"acf":[],"_links":{"self":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts\/11270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/comments?post=11270"}],"version-history":[{"count":0,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts\/11270\/revisions"}],"wp:attachment":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/media?parent=11270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/categories?post=11270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/tags?post=11270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}