{"id":3274,"date":"2014-12-08T13:03:42","date_gmt":"2014-12-08T15:03:42","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3274"},"modified":"2015-05-15T14:36:34","modified_gmt":"2015-05-15T16:36:34","slug":"conceitos-basicos-sobre-design-responsivo-em-gifs","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs","title":{"rendered":"Conceitos b\u00e1sicos sobre design responsivo em GIFs"},"content":{"rendered":"

O site Froont<\/a> publicou um artigo esclarecendo alguns princ\u00edpios b\u00e1sicos sobre web design responsivo. Muito interessante foi a maneira da explica\u00e7\u00e3o, tudo feito atrav\u00e9s de GIFs animados<\/strong>. Nos GIFs \u00e9 poss\u00edvel compreender conceitos b\u00e1sicos que at\u00e9 mesmo uma pessoa leiga no assunto seria capaz de entender. Criei uma vers\u00e3o semelhante aqui para o blog, por\u00e9m com meus coment\u00e1rios.<\/p>\n

O site brainstorm9<\/a> fez tamb\u00e9m um artigo baseado no post original. Recomendo a leitura tamb\u00e9m.<\/p>\n

Diferen\u00e7a de layout Responsivo e Adaptativo<\/h2>\n

Os dois tipos de layout s\u00e3o bem parecidos, com poucas diferen\u00e7as.<\/p>\n

Bom, a meu ver um layout adaptativo \u00e9 aquele que se adapta ao dispositivo, por\u00e9m n\u00e3o flui de acordo com o tamanho da janela do usu\u00e1rio. No adaptativo o layout \u00e9 montado de acordo com o tamanho da janela utilizando media queries<\/em> para readaptar o layout no dispositivo. Outro ponto importante \u00e9 que o layout trabalha com um grid fixo<\/strong>.<\/p>\n

J\u00e1 no layout responsivo temos medidas flex\u00edveis<\/strong>. Diferentemente do layout adaptativo o grid do responsivo \u00e9 flu\u00eddo respondendo ao tamanho da janela do usu\u00e1rio de forma um pouco diferente do layout adaptativo.<\/p>\n

Por exemplo, no layout responsivo se temos um box que ocupada 30% de um espa\u00e7o ele sempre vai ocupar esse espa\u00e7o, independente do tamanho da janela. O conte\u00fado flui junto com o tamanho da tela do dispositivo. Aqui tamb\u00e9m se usa media queries<\/em> para adaptar o conte\u00fado<\/p>\n

\"diferen\u00e7a<\/p>\n

Fluxo do conte\u00fado<\/h2>\n

O conte\u00fado come\u00e7a cada vez mais ocupar mais espa\u00e7o vertical. Ao navegar em um celular percebe-se que a maior parte do conte\u00fado est\u00e1 um abaixo do outro, poucos elementos ficam lado a lado. A isso se da o nome de fluxo, fluxo de conte\u00fado, fluxo de informa\u00e7\u00e3o…<\/p>\n

\"Entenda<\/p>\n

Unidades relativas<\/h2>\n

Utilizar unidades relativas ao desenvolver um layout \u00e9 praticamente dizer para se utilizar porcentagem no lugar de pixel. Unidades em porcentagem \u00e9 a base para se montar um layout que se ajusta de acordo com o tamanho do dispositivo. Hoje em dia chegar ser frustrante quando diminu\u00edmos o tamanho da janela do navegador e o conte\u00fado n\u00e3o flui junto com a janela, no lugar disso aparece aquela inc\u00f4moda barra de rolagem horizontal.<\/p>\n

\"Entendendo<\/p>\n

Pontos de quebra (breakpoints)<\/h2>\n

Utilizando grid flu\u00eddo nosso layout se adapta ao natural ao tamanho do dispositivo, por\u00e9m dependendo o tamanho se faz necess\u00e1rio ajustar o conte\u00fado para melhorar a navega\u00e7\u00e3o e a experi\u00eancia do usu\u00e1rio em seu site. Fizemos isso utilizando media queries<\/em>. O ponto onde definimos inserir esse media querie chamamos de breakpoint<\/strong>. Costumamos dizer que \u00e9 o ponto de quebra do nosso layout e ali precisamos reestruturar nosso layout.<\/p>\n

\u00c9 invi\u00e1vel, diria que praticamente imposs\u00edvel, se criar media queries para todos os dispositivos, o breakpoint \u00e9 definido sempre em rela\u00e7\u00e3o ao conte\u00fado da sua p\u00e1gina<\/strong> e jamais no dispositivo do usu\u00e1rio. Ou seja, voc\u00ea vai redimensionando a janela do navegador, quando perceber que algo quebrou (desalinhou, ficou oculto, elemento desceu…) \u00e9 ali que devemos inserir um breakpoint.<\/p>\n

\"breakpoint<\/p>\n

Max e Min valores<\/h2>\n

Explorar ao m\u00e1ximo a largura de uma tela de celular \u00e9 \u00f3timo. Em dispositivos m\u00f3veis utilizamos 100% da largura do dispositivo na maioria dos casos, agora ser\u00e1 que o mesmo se aplica a outros dispositivos, por exemplo uma tela de TV. Imagina sua p\u00e1gina aberta em uma TV, faz sentido fazer com que seu conte\u00fado ocupe 100% de toda aquela largura?<\/p>\n

Quando queremos limitar o tamanho de algo utilizamos as propriedades das CSS max-width<\/code> e min-width<\/code>. Posso definir uma largura de 90% para um elemento, por\u00e9m dizer ao navegador que o tamanho m\u00e1ximo ser\u00e1 de apenas 980px, por exemplo. Isso \u00e9 feito da seguinte forma:<\/p>\n

\r\n.box{\r\n  \/*ocupa 90% do elemento pai*\/\r\n  width: 90%;\r\n  \/*sua largura chega ao m\u00e1ximo 980px*\/\r\n  max-width: 980px;\r\n}\r\n<\/pre>\n
\"Tamanho<\/p>\n
Objetos aninhados<\/h2>\n
Tome cuidado ao Posicionar Elementos em Rela\u00e7\u00e3o a Outros<\/a>. Ter muitos elementos posicionados em rela\u00e7\u00e3o ao outros fica mais dif\u00edcil de controla-los. <\/p>\n
\"Posicionamento<\/p>\n
Mobile-first ou Desktop-first<\/h2>\n
Hoje um site pode ser visto atrav\u00e9s de v\u00e1rios dispositivos: Tablet, desktop, TV, celular, rel\u00f3gio… Tempos atr\u00e1s a preocupa\u00e7\u00e3o era somente a resolu\u00e7\u00e3o do usu\u00e1rio no desktop, hoje al\u00e9m disso temos diversos dispositivos. Por onde devemos come\u00e7ar? Iniciar meu layout e desenvolvimento primeiro pensando no acesso em desktop e depois acesso M\u00f3bile ou ao contr\u00e1rio?<\/p>\n
Sem d\u00favida  iniciar seu projeto pensando primeiro em dispositivos menores, como celulares \u00e9 o mais indicado<\/strong>. Fazendo isso j\u00e1 conseguimos aplicar outra t\u00e9cnica fundamental que \u00e9 conhecida como Melhoria Progressiva<\/a>.  Iniciado nosso projeto focando nos usu\u00e1rios m\u00f3bile conseguimos priorizar mais o conte\u00fado, aproveitar comportamentos padr\u00f5es dos elementos HTML, entre outras vantagens. Aplique   Mobile-first sempre!<\/p>\n
\"Mobile-first<\/p>\n
WebFonts X fontes do sistema<\/h2>\n
Tempos atr\u00e1s n\u00e3o era poss\u00edvel utilizarmos fontes sem ser a do sistema do usu\u00e1rio, hoje com @font-face<\/em> das CSS isso \u00e9 poss\u00edvel. Hoje somos capazes de deixar at\u00e9 nossas Fontes Responsivas<\/a>. Em design responsivo se usa muito essa diretiva para utiliza\u00e7\u00e3o de \u00edcones ao inv\u00e9s de usar imagens. Essa t\u00e9cnica recebe o nome de fonte de \u00edcones ou icon fonts.<\/p>\n
A t\u00e9nica implica em carregar fontes customizadas, onde no lugar de um caractere de letra ou n\u00famero se carrega \u00edcones no lugar (uma lupa, carrinho de compras, etc.). Cada letra, n\u00famero \u00e9 representado por um s\u00edmbolo. <\/p>\n
Um servi\u00e7o que uso bastante \u00e9 o http:\/\/icomoon.io\/app<\/a>. Nele voc\u00ea pode escolher fonte \u00edcones j\u00e1 existe em seu imenso cat\u00e1logo ou criar sua pr\u00f3pria fonte de \u00edcones. Dependendo da complexibilidade do \u00edcone n\u00e3o ser\u00e1 poss\u00edvel criar, fique esperto.<\/p>\n
\"Tipos<\/p>\n
Bitmap X Vetores<\/h2>\n
Em muitos casos seu \u00edcone tem muitos efeitos e n\u00e3o ser\u00e1 poss\u00edvel utilizar o icon fonts como visto acima. Nesse caso ter\u00e1 que usar imagem mesmo.  At\u00e9 alguns anos atr\u00e1s \u00e9ramos obrigados a usar imagens do tipo bitmap. Imagens desse formato perdem qualidade quando redimensionada, e redimensionar imagens em sites responsivos \u00e9 uma certeza.<\/p>\n
Hoje em dia j\u00e1 podemos usar imagens do tipo vetor. Imagens desse tipo n\u00e3o perdem qualidade quando redimensionadas. Mas aqui cabe ao desenvolvedor analisar, o que \u00e9 melhor. Devemos sempre pensar na Performance da P\u00e1gina<\/a> e na qualidade do resultado final da imagem.<\/p>\n
\"Vetor<\/p>\n
Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"
O site Froont publicou um artigo esclarecendo alguns princ\u00edpios b\u00e1sicos sobre web design responsivo. Muito interessante foi a maneira da explica\u00e7\u00e3o, tudo feito atrav\u00e9s de GIFs animados. Nos GIFs \u00e9 poss\u00edvel compreender conceitos b\u00e1sicos que at\u00e9 mesmo uma pessoa leiga no assunto seria capaz de entender. Criei uma vers\u00e3o semelhante aqui para o blog, por\u00e9m […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-3274","post","type-post","status-publish","format-standard","hentry","category-web-design"],"yoast_head":"\nConceitos b\u00e1sicos sobre design responsivo em GIFs<\/title>\n<meta name=\"description\" content=\"Conceitos b\u00e1sicos sobre Design Responsivo. Entenda as diferen\u00e7as entre layout Responsivo e Adaptativo, font icons, o que \u00e9 Mobile-first e Desktop-first.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Conceitos b\u00e1sicos sobre design responsivo em GIFs\" \/>\n<meta property=\"og:description\" content=\"Conceitos b\u00e1sicos sobre Design Responsivo. Entenda as diferen\u00e7as entre layout Responsivo e Adaptativo, font icons, o que \u00e9 Mobile-first e Desktop-first.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-08T15:03:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-15T16:36:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"233\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs\",\"url\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs\",\"name\":\"Conceitos b\u00e1sicos sobre design responsivo em GIFs\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif\",\"datePublished\":\"2014-12-08T15:03:42+00:00\",\"dateModified\":\"2015-05-15T16:36:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Conceitos b\u00e1sicos sobre Design Responsivo. Entenda as diferen\u00e7as entre layout Responsivo e Adaptativo, font icons, o que \u00e9 Mobile-first e Desktop-first.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif\",\"width\":640,\"height\":233,\"caption\":\"diferen\u00e7a layout responsivo e adaptativo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/web-design\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Conceitos b\u00e1sicos sobre design responsivo em GIFs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Conceitos b\u00e1sicos sobre design responsivo em GIFs","description":"Conceitos b\u00e1sicos sobre Design Responsivo. Entenda as diferen\u00e7as entre layout Responsivo e Adaptativo, font icons, o que \u00e9 Mobile-first e Desktop-first.","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:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs","og_locale":"pt_BR","og_type":"article","og_title":"Conceitos b\u00e1sicos sobre design responsivo em GIFs","og_description":"Conceitos b\u00e1sicos sobre Design Responsivo. Entenda as diferen\u00e7as entre layout Responsivo e Adaptativo, font icons, o que \u00e9 Mobile-first e Desktop-first.","og_url":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs","og_site_name":"KADUNEW","article_published_time":"2014-12-08T15:03:42+00:00","article_modified_time":"2015-05-15T16:36:34+00:00","og_image":[{"width":640,"height":233,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif","type":"image\/gif"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs","url":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs","name":"Conceitos b\u00e1sicos sobre design responsivo em GIFs","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif","datePublished":"2014-12-08T15:03:42+00:00","dateModified":"2015-05-15T16:36:34+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Conceitos b\u00e1sicos sobre Design Responsivo. Entenda as diferen\u00e7as entre layout Responsivo e Adaptativo, font icons, o que \u00e9 Mobile-first e Desktop-first.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/12\/diferenca-responsivo-adaptativo.gif","width":640,"height":233,"caption":"diferen\u00e7a layout responsivo e adaptativo"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/conceitos-basicos-sobre-design-responsivo-em-gifs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/www.kadunew.com\/blog\/category\/web-design"},{"@type":"ListItem","position":3,"name":"Conceitos b\u00e1sicos sobre design responsivo em GIFs"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3274"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3274"}],"version-history":[{"count":10,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3274\/revisions"}],"predecessor-version":[{"id":3981,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3274\/revisions\/3981"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}