{"id":671,"date":"2010-04-02T20:44:47","date_gmt":"2010-04-02T23:44:47","guid":{"rendered":"https:\/\/devkico.itexto.com.br\/?p=671"},"modified":"2010-04-02T20:48:18","modified_gmt":"2010-04-02T23:48:18","slug":"melhorando-seus-layouts-com-960-grid-system-para-nao-designers-como-eu","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=671","title":{"rendered":"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu)"},"content":{"rendered":"

\"\"<\/a>Em um post anterior expliquei como usar SiteMesh com Grails. Agora \u00e9 hora de expor uma descoberta recente que fiz: o 960 Grid System (960gs), criado por Nathan Smith<\/a>. Para aqueles que n\u00e3o conhecem, o 960gs \u00e9 um framework CSS. Como n\u00e3o sou designer (apesar de tentar com toda a minha teimosia), o termo framework CSS<\/em> \u00e9 novidade pra mim tamb\u00e9m.<\/p>\n

A defini\u00e7\u00e3o do termo na Wikip\u00e9dia \u00e9 a seguinte: “trata-se de uma biblioteca pr\u00e9-configurada cujo objetivo \u00e9 facilitar a cria\u00e7\u00e3o de layouts o mais pr\u00f3ximo poss\u00edvel dos padr\u00f5es web”<\/em>. A defini\u00e7\u00e3o Kiconiana \u00e9 mais simples: “arquivos CSS prontos para que voc\u00ea possa criar layouts bacanas e dentro dos padr\u00f5es web de forma r\u00e1pida”<\/em>.<\/p>\n

Um sistema de grade (grid system)<\/em> \u00e9 uma t\u00e9cnica adotada em layouts para se organizar o conte\u00fado de uma p\u00e1gina impressa. Por sorte, a t\u00e9cnica tamb\u00e9m \u00e9 adotada com sucesso em aplica\u00e7\u00f5es web!<\/p>\n

Id\u00e9ia central<\/h2>\n

A id\u00e9ia b\u00e1sica do sistema \u00e9 fornecer uma grade aonde possamos organizar o conte\u00fado de forma consistente. No caso do 960gs, esta grade encontra-se sobreposta a uma \u00e1rea de 960 p\u00edxels de largura. Por que 960 pixels? Por que \u00e9 a resolu\u00e7\u00e3o mais comum dos navegadores atualmente, sendo assim resolveram adotar esta conven\u00e7\u00e3o. No caso do 960gs, ele j\u00e1 v\u00eam pr\u00e9-configurado com 3 possibilidades: 12,16 ou 24 colunas. Na imagem abaixo est\u00e1 um exemplo de layout usando 12 colunas:<\/p>\n

\"\"<\/a><\/p>\n

Como pode ser observado, h\u00e1 12 colunas de cor rosa, com um espa\u00e7o entre elas. No padr\u00e3o 960gs, cada coluna possui 10 pixels de margem tanto esquerda quanto direita.<\/p>\n

Abaixo est\u00e1 um site que acabei de terminar usando o layout. Como voc\u00ea pode perceber, as \u00e1reas em vermelho encontram-se exatamente dentro do espa\u00e7o delimitado pelas colunas.<\/p>\n

\"\"<\/a><\/p>\n

Preparando o terreno<\/h2>\n

O primeiro passo para usar o 960gs \u00e9 fazer o download no site oficial: http:\/\/960.gs<\/a>. Trata-se de um arquivo zipado que, ao ser descompactado, ir\u00e1 apresentar a seguinte estrutura de diret\u00f3rios:<\/p>\n

code<\/span><\/strong>: o que nos interessa: s\u00e3o os arquvos .css
\ntemplates<\/strong>: arquivos de imagem para quem quiser fazer mockups usando algum editor gr\u00e1fico como Gimp ou Photoshop
\nsketch_sheets<\/strong>: um arquivo no formato PDF que voc\u00ea pode imprimir e desenhar em cima
\nlicenses<\/strong>: bla bla bla jur\u00eddico<\/p>\n

Copie os arquivos 960.css, reset.css e text.css para o diret\u00f3rio da sua aplica\u00e7\u00e3o (seja ela feita em PHP, Grails, HTML puro ou qualquer outra coisa). Em seguida, dentro da tag <head> da sua p\u00e1gina, inclua o c\u00f3digo abaixo:<\/p>\n

\r\n<link rel="stylesheet" href="css\/reset.css" \/>\r\n<link rel="stylesheet" href="css\/text.css" \/>\r\n<link rel="stylesheet" href="css\/960.css" \/>\r\n<\/pre>\n
Lembre-se de referenciar os arquivos css de acordo com a sua localiza\u00e7\u00e3o dentro da aplica\u00e7\u00e3o.<\/p>\n
Entendendo a l\u00f3gica<\/h2>\n
A regra \u00e9 a seguinte: o layout da sua aplica\u00e7\u00e3o ser\u00e1 organizado em linhas e colunas. Cada linha dever\u00e1 possuir  n colunas, aonde n representa o padr\u00e3o que voc\u00ea adotou ao usar o 960gs<\/strong>. \u00c9 desnecess\u00e1rio, mas se voc\u00ea quiser saber a largura de uma coluna, use a f\u00f3rmula abaixo:<\/p>\n
largura da coluna = (960 \/ (n\u00famero de colunas)) – (margem da coluna * 2)<\/strong><\/p>\n
Como mencionei acima, cada coluna possui duas margens (direita e esquerda), cada uma com 10 pixels de lado. Sendo assim, no nosso exemplo cada coluna ter\u00e1 60 pixels de largura.<\/p>\n
Pondo em pr\u00e1tica<\/strong><\/h2>\n
O 960gs \u00e9 aplicado em um container. Sendo assim, escolha uma div dentro da sua p\u00e1gina que conter\u00e1 todas as demais e altere-a para que fique tal como no exemplo abaixo:<\/p>\n
\r\n\r\n<div class="container_12">\r\n ...\r\n <\/div>\r\n\r\n<\/pre>\n
A classe container_12 define que aquele elemento est\u00e1 adotando uma grade de 960 pixels com 12 colunas. Se quisesse usar uma grade com 16 colunas, bastaria usar a classe container_16<\/em>.<\/p>\n
A melhor maneira de explicar o funcionamento da t\u00e9cnica \u00e9 visualmente. Sendo assim, observe a imagem abaixo, que \u00e9 o exemplo fornecido com o framework:<\/p>\n
\"\"<\/a><\/p>\n
Repare que \u00e9 um layout composto por duas linhas. A primeira ocupa todas as 12 colunas, enquanto o segundo \u00e9 dividido em dois grupos: um contendo uma coluna e outro contendo as 11 restantes. Para obter este resultado, escreve-se o c\u00f3digo abaixo:<\/p>\n
\r\n\r\n<div class="container_12">\r\n   \/\/ Primeira linha\r\n   <div class="grid_12"><\/div>\r\n   \/\/ Segunda linha\r\n   <div class="grid_1"><\/div>\r\n   <div class="grid_11"><\/div>\r\n<\/div>\r\n\r\n<\/pre>\n
A classe grid_[n\u00famero de colunas] representa o n\u00famero de colunas que o elemento dever\u00e1 ocupar. Sendo assim, na primeira linha usamos a tag grid_12, pois queriamos que toda a largura fosse ocupada.<\/p>\n
J\u00e1 na segunda linha, como queriamos dividir a largura em dois blocos, definimos para o primeiro elemento a tag grid_1 (uma coluna) e grid_11 para o seguinte (11 colunas).
\nA regra se manteve: cada linha deve possuir 12 colunas.<\/strong><\/p>\n
Aumentando a flexibilidade<\/h2>\n
Agora, vamos aumentar a flexibilidade dos nossos layouts. E se quis\u00e9ssemos apenas um componente que n\u00e3o ocupasse a p\u00e1gina inteira, mas que ao mesmo tempo n\u00e3o estivesse pr\u00f3ximo \u00e0s margens da p\u00e1gina, tal como no exemplo abaixo?<\/p>\n
\"\"<\/a><\/p>\n
Agora entra em pr\u00e1tica mais duas classes: prefix[colunas] e suffix[colunas] que representam respectivamente quantas colunas dever\u00e3o vir antes do nosso componente e quantas depois. Reparou? Mantivemos aqui a regra de manter o n\u00famero de colunas fixo!<\/p>\n
Obteriamos o resultado acima portanto com o c\u00f3digo abaixo:<\/p>\n
\r\n\r\n<div class="grid_1 suffix_2 prefix_9"><\/div>\r\n\r\n<\/pre>\n
Duas colunas como sufixo e 9 como prefixo e uma coluna no meio. 2 + 9 + 1 = 12!<\/p>\n
Aproveitando as margens laterais das colunas<\/h2>\n
\u00c9 poss\u00edvel tamb\u00e9m aproveitar as margens direita e esquerda da coluna. Se quiser que seu componente ocupe a largura da margem esquerda, adicione a ele a classe alfa<\/em>. Quer aproveitar a coluna da direita? Adicione a classe omega<\/em>!<\/p>\n
Simples assim!<\/p>\n
Considera\u00e7\u00f5es finais: n\u00e3o interfira no trabalho do 960gs<\/h2>\n
No meu aprendizado observei o seguinte: como o objetivo do 960gs \u00e9 dispor os elementos da sua p\u00e1gina pra voc\u00ea, em momento algum o designer dever\u00e1 definir em seus arquivos CSS o tamanho dos seus componentes. Isto ir\u00e1 interferir com o estilo definido pelo 960gs e, consequentemente, as coisas n\u00e3o sair\u00e3o t\u00e3o bacanas quanto gostar\u00edamos.<\/p>\n
Lembre-se: o objetivo do 960gs \u00e9 resolver o problema da largura e disposi\u00e7\u00e3o dos elementos da p\u00e1gina. Tentar interferir neste processo \u00e9 a mesma coisa que ir a um m\u00e9dico e come\u00e7ar a dar pitaco em seus diagn\u00f3sticos, resumindo: n\u00e3o da certo (a n\u00e3o ser que voc\u00ea tamb\u00e9m seja um m\u00e9dico).<\/p>\n
Voc\u00ea tamb\u00e9m dever\u00e1 ignorar o atributo float: o 960gs j\u00e1 faz isto pra voc\u00eb. Defini-lo nestes componentes s\u00f3 ir\u00e1 anular o framework.<\/p>\n
Indo al\u00e9m<\/h2>\n
E se voc\u00ea quiser um layout com menos ou mais de 960 pixels, ou mesmo um n\u00famero de colunas diferente de 12, 16 ou 24? Como fazer? Neste caso voc\u00ea precisa de um sistema de grade vari\u00e1vel. A SprySoft tem um gerador de grades customizados online e gratuito para voc\u00ea. Basta acessar este endere\u00e7o: http:\/\/www.spry-soft.com\/grids\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Em um post anterior expliquei como usar SiteMesh com Grails. Agora \u00e9 hora de expor uma descoberta recente que fiz: o 960 Grid System (960gs), criado por Nathan Smith. Para aqueles que n\u00e3o conhecem, o 960gs \u00e9 um framework CSS. Como n\u00e3o sou designer (apesar de tentar com toda a minha teimosia), o termo framework […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,1,53],"tags":[],"class_list":["post-671","post","type-post","status-publish","format-standard","hentry","category-grails","category-uncategorized","category-web-design"],"yoast_head":"\nMelhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu) - \/dev\/Kico<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devkico.itexto.com.br\/?p=671\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu) - \/dev\/Kico\" \/>\n<meta property=\"og:description\" content=\"Em um post anterior expliquei como usar SiteMesh com Grails. Agora \u00e9 hora de expor uma descoberta recente que fiz: o 960 Grid System (960gs), criado por Nathan Smith. Para aqueles que n\u00e3o conhecem, o 960gs \u00e9 um framework CSS. Como n\u00e3o sou designer (apesar de tentar com toda a minha teimosia), o termo framework […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkico.itexto.com.br\/?p=671\" \/>\n<meta property=\"og:site_name\" content=\"\/dev\/Kico\" \/>\n<meta property=\"article:published_time\" content=\"2010-04-02T23:44:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-04-02T23:48:18+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/04\/960.gif\" \/>\n<meta name=\"author\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loboweissmann\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=671\",\"url\":\"https:\/\/devkico.itexto.com.br\/?p=671\",\"name\":\"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu) - \/dev\/Kico\",\"isPartOf\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=671#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=671#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/04\/960.gif\",\"datePublished\":\"2010-04-02T23:44:47+00:00\",\"dateModified\":\"2010-04-02T23:48:18+00:00\",\"author\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=671#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkico.itexto.com.br\/?p=671\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=671#primaryimage\",\"url\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/04\/960.gif\",\"contentUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/04\/960.gif\",\"width\":\"300\",\"height\":\"200\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=671#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkico.itexto.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\",\"url\":\"https:\/\/devkico.itexto.com.br\/\",\"name\":\"\/dev\/Kico\",\"description\":\"Desenvolvendo software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devkico.itexto.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\",\"name\":\"Kico (Henrique Lobo Weissmann)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"caption\":\"Kico (Henrique Lobo Weissmann)\"},\"sameAs\":[\"https:\/\/x.com\/loboweissmann\"],\"url\":\"https:\/\/devkico.itexto.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu) - \/dev\/Kico","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devkico.itexto.com.br\/?p=671","og_locale":"pt_BR","og_type":"article","og_title":"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu) - \/dev\/Kico","og_description":"Em um post anterior expliquei como usar SiteMesh com Grails. Agora \u00e9 hora de expor uma descoberta recente que fiz: o 960 Grid System (960gs), criado por Nathan Smith. Para aqueles que n\u00e3o conhecem, o 960gs \u00e9 um framework CSS. Como n\u00e3o sou designer (apesar de tentar com toda a minha teimosia), o termo framework […]","og_url":"https:\/\/devkico.itexto.com.br\/?p=671","og_site_name":"\/dev\/Kico","article_published_time":"2010-04-02T23:44:47+00:00","article_modified_time":"2010-04-02T23:48:18+00:00","og_image":[{"url":"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/04\/960.gif"}],"author":"Kico (Henrique Lobo Weissmann)","twitter_card":"summary_large_image","twitter_creator":"@loboweissmann","twitter_misc":{"Escrito por":"Kico (Henrique Lobo Weissmann)","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devkico.itexto.com.br\/?p=671","url":"https:\/\/devkico.itexto.com.br\/?p=671","name":"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu) - \/dev\/Kico","isPartOf":{"@id":"https:\/\/devkico.itexto.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devkico.itexto.com.br\/?p=671#primaryimage"},"image":{"@id":"https:\/\/devkico.itexto.com.br\/?p=671#primaryimage"},"thumbnailUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/04\/960.gif","datePublished":"2010-04-02T23:44:47+00:00","dateModified":"2010-04-02T23:48:18+00:00","author":{"@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7"},"breadcrumb":{"@id":"https:\/\/devkico.itexto.com.br\/?p=671#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkico.itexto.com.br\/?p=671"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/?p=671#primaryimage","url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/04\/960.gif","contentUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/04\/960.gif","width":"300","height":"200"},{"@type":"BreadcrumbList","@id":"https:\/\/devkico.itexto.com.br\/?p=671#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkico.itexto.com.br\/"},{"@type":"ListItem","position":2,"name":"Melhorando seus layouts com 960 Grid System (para n\u00e3o designers como eu)"}]},{"@type":"WebSite","@id":"https:\/\/devkico.itexto.com.br\/#website","url":"https:\/\/devkico.itexto.com.br\/","name":"\/dev\/Kico","description":"Desenvolvendo software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devkico.itexto.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7","name":"Kico (Henrique Lobo Weissmann)","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","caption":"Kico (Henrique Lobo Weissmann)"},"sameAs":["https:\/\/x.com\/loboweissmann"],"url":"https:\/\/devkico.itexto.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/671"}],"collection":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=671"}],"version-history":[{"count":3,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/671\/revisions"}],"predecessor-version":[{"id":681,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/671\/revisions\/681"}],"wp:attachment":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}