{"id":33736,"date":"2022-02-04T10:09:39","date_gmt":"2022-02-04T13:09:39","guid":{"rendered":"https:\/\/blog.locaweb.com.br\/?p=33736"},"modified":"2022-05-24T10:37:03","modified_gmt":"2022-05-24T13:37:03","slug":"como-desenvolver-sites-com-templates","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-desenvolver-sites-com-templates\/","title":{"rendered":"Desenvolvendo seus primeiros websites utilizando templates"},"content":{"rendered":"\n

Quando come\u00e7amos o desenvolvimento para a web<\/strong>, geralmente come\u00e7amos estudando HTML, CSS e JavaScript, j\u00e1 que s\u00e3o as linguagens utilizadas para o front-end da maioria dos sites da web. Entendemos o que cada tag html significa, quais atributos podemos definir para elas, estudamos como trocar a cor de um bot\u00e3o, ou fazer uma imagem se sobrepor a uma caixa de texto, como fazer com que um texto apare\u00e7a ap\u00f3s clicarmos em um bot\u00e3o e outras coisas desse tipo. E normalmente, come\u00e7amos desenvolvendo esses componentes do zero, o que \u00e9 muito bom para a aprendizagem, j\u00e1 que assim conseguimos entender o que cada elemento significa dentro do navegador, qual o comportamento dos estilos em CSS, quais a\u00e7\u00f5es conseguimos fazer com os elementos e muito mais.<\/p>\n\n\n\n

Com esses conhecimentos b\u00e1sicos<\/strong> sobre elementos e estilos, podemos dar um passo al\u00e9m e come\u00e7ar a produzir sites <\/a>que podem ser utilizados na vida real. Seja um portf\u00f3lio para voc\u00ea descrever as suas habilidades, um site sobre algum hobbie que voc\u00ea tenha ou um site para alguma empresa. E, uma maneira f\u00e1cil e r\u00e1pida de desenvolver esse tipo de site \u00e9 utilizando templates.<\/p>\n\n\n\n

O que s\u00e3o templates para sites<\/h2>\n\n\n\n

Os templates<\/strong> s\u00e3o sites b\u00e1sicos base: possuem dados fict\u00edcios, fotos fict\u00edcias, s\u00e3o focados em resolver algum problema espec\u00edfico (portf\u00f3lio, site para eventos, site para empresas, landing page de produtos, dashboards, etc). Para come\u00e7ar eu indico procurar templates que utilizem algum framework CSS (para abstrair a complexidade do CSS, o que facilita a modifica\u00e7\u00e3o das coisas), como por exemplo: Bootstrap, Bulma e TailwindCSS.<\/p>\n\n\n\n

Como usar um template para criar um site<\/h2>\n\n\n\n

Para encontrar basta pesquisar no google: \u201ctemplates framework free” ou \u201ctemplates bootstrap 5 free\u201d, facilmente voc\u00ea encontrar\u00e1 diversos templates:<\/p>\n\n\n\n

\"modelos<\/figure><\/div>\n\n\n\n

Nesse caso, encontramos templates de diversos tipos, como dashboards, para m\u00e9dicos, para cursos e para influenciadores. Mas existe template de muitos tipos.<\/p>\n\n\n\n

Depois de baixar o template, o seu trabalho vai ser basicamente: trocar os dados fict\u00edcios,  modificar as imagens, as cores, adicionar ou retirar blocos, inserir o contexto que voc\u00ea deseja na p\u00e1gina. E, para isso, voc\u00ea ir\u00e1 utilizar em geral HTML, CSS e JavaScript. O que facilita o trabalho para quem est\u00e1 come\u00e7ando a entender como funcionam as p\u00e1ginas na web.<\/p>\n\n\n\n

Alguns desses templates para sites possuem formul\u00e1rios interativos (geralmente utilizam a linguagem back-end PHP para enviar um e-mail depois de preenchido), mas, voc\u00ea que est\u00e1 come\u00e7ando, pode retirar esses formul\u00e1rios do c\u00f3digo e seguir sem a necessidade de, por exemplo, PHP nesse come\u00e7o.<\/p>\n\n\n\n

Melhore suas habilidades em desenvolvimento<\/h2>\n\n\n\n

Os templates tamb\u00e9m servem para voc\u00ea poder estudar melhor como s\u00e3o feitas algumas estruturas de um site<\/strong>. Como funciona um menu, um card, um carrossel, como funcionam as \u00e2ncoras, os links, menu hamb\u00farguer e muitas outras funcionalidades e elementos de um website, as estruturas b\u00e1sicas de pastas entre outras coisas.<\/p>\n\n\n\n

Como a maioria dos templates s\u00f3 precisam de HTML, CSS e JavaScript, voc\u00ea pode abrir o arquivo index.html que vem na pasta principal do template no seu navegador (ap\u00f3s extrair o conte\u00fado do zip em uma pasta) e j\u00e1 poder\u00e1 ver como \u00e9 o template. E ap\u00f3s as modifica\u00e7\u00f5es fazer o mesmo.<\/p>\n\n\n\n

Exemplos para usar um template<\/h2>\n\n\n\n

Eu mesmo, utilizei esse template<\/a> para desenvolver meu site de portf\u00f3lio:<\/p>\n\n\n\n

\"modelo<\/figure><\/div>\n\n\n\n

Nesse caso eu modifiquei algumas coisas, como as cores, adicionei alguns elementos no menu, modifiquei a foto, mas a base \u00e9 a mesma do template. Veja como ficou o resultado clicando aqui<\/a>.<\/p>\n\n\n\n

\"modelos<\/figure><\/div>\n\n\n\n

Utilizando templates, o seu come\u00e7o no desenvolvimento web ser\u00e1 mais r\u00e1pido, pois, voc\u00ea entender\u00e1 como funcionam pequenos projetos, entender\u00e1 o fluxo de desenvolvimento e poder\u00e1 ver o resultado das suas modifica\u00e7\u00f5es de um jeito bem pr\u00e1tico.<\/p>\n\n\n\n

Desejo que tenha ajudado voc\u00eas.<\/p>\n\n\n\n

Um grande abra\u00e7o e at\u00e9 a pr\u00f3xima!<\/p>\n\n\n\n

Quer uma ferramenta f\u00e1cil e intuitiva com templates incr\u00edveis para criar o seu site?<\/p>CLIQUE AQUI!<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Quando come\u00e7amos o desenvolvimento para a web, geralmente come\u00e7amos estudando HTML, CSS e JavaScript, j\u00e1 que s\u00e3o as linguagens utilizadas para o front-end da maioria dos sites da web. Entendemos o que cada tag html significa, quais atributos podemos definir para elas, estudamos como trocar a cor de um bot\u00e3o, ou fazer uma imagem se […]<\/p>\n","protected":false},"author":24,"featured_media":33743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-33736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/33736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=33736"}],"version-history":[{"count":4,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/33736\/revisions"}],"predecessor-version":[{"id":35011,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/33736\/revisions\/35011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/33743"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=33736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=33736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=33736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}