{"id":114,"date":"2026-08-26T21:26:50","date_gmt":"2026-08-27T00:26:50","guid":{"rendered":"https:\/\/aqgoes.com\/blog\/?p=114"},"modified":"2026-09-04T16:02:15","modified_gmt":"2026-09-04T19:02:15","slug":"como-criei-pagina-artigos-aqgoes-tech-stack-motivacao","status":"publish","type":"post","link":"https:\/\/aqgoes.com\/blog\/como-criei-pagina-artigos-aqgoes-tech-stack-motivacao\/","title":{"rendered":"Como criei a p\u00e1gina de artigos do aqgoes.com\/blog"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Intradu\u00e7\u00e3o<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Todo desenvolvedor j\u00e1 passou por isso: aquela sensa\u00e7\u00e3o de que j\u00e1 resolveu um problema espec\u00edfico, mas n\u00e3o consegue lembrar exatamente como. Passar horas vasculhando a internet por aquela mesma solu\u00e7\u00e3o \u00e9 uma perda de tempo frustrante. Foi exatamente para resolver esse problema que decidi transformar a p\u00e1gina de artigos do<a href=\"https:\/\/aqgoes.com\/\" target=\"_blank\" rel=\"noopener\"> aqgoes.com<\/a> em um grande rascunho online.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, voc\u00ea vai conhecer todo o processo de cria\u00e7\u00e3o da nossa p\u00e1gina de artigos. Vamos mergulhar na motiva\u00e7\u00e3o por tr\u00e1s desse &#8220;caderno de anota\u00e7\u00f5es&#8221;, na pesquisa que fundamentou as escolhas visuais e t\u00e9cnicas, e na <em>stack<\/em> tecnol\u00f3gica que usei \u2014 do <a href=\"https:\/\/www.w3schools.com\/html\/default.asp\" target=\"_blank\" rel=\"noopener\">HTML5 <\/a>Sem\u00e2ntico ao <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noopener\">Tailwind CSS<\/a>.<\/p>\n<\/blockquote>\n<\/blockquote>\n<\/blockquote>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">O &#8220;Porqu\u00ea&#8221; do Rascunho Online<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A principal motiva\u00e7\u00e3o para criar essa p\u00e1gina de artigos n\u00e3o foi apenas ter mais um blog, mas sim construir um reposit\u00f3rio centralizado de conhecimento pr\u00e1tico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quantas vezes voc\u00ea j\u00e1 resolveu um erro ou implementou uma funcionalidade complexa e, meses depois, precisou fazer o mesmo e n\u00e3o lembrava de cabe\u00e7a? A p\u00e1gina de artigos do <strong>aqgoes.com<\/strong> nasceu para ser esse local de consulta r\u00e1pida.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benef\u00edcios de um &#8220;Caderno de Anota\u00e7\u00f5es&#8221; P\u00fablico<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Centraliza\u00e7\u00e3o:<\/strong> Tudo o que pesquiso, aprendo e implemento fica em um s\u00f3 lugar.<\/li>\n\n\n\n<li><strong>Acessibilidade:<\/strong> Posso consultar minhas pr\u00f3prias solu\u00e7\u00f5es de qualquer lugar.<\/li>\n\n\n\n<li><strong>Compartilhamento:<\/strong> Outros desenvolvedores podem se beneficiar das mesmas solu\u00e7\u00f5es que encontrei.<\/li>\n\n\n\n<li><strong>Documenta\u00e7\u00e3o:<\/strong> Funciona como uma documenta\u00e7\u00e3o viva do meu processo de aprendizado e desenvolvimento.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pesquisa e Inspira\u00e7\u00e3o: O Processo Criativo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para que esse rascunho online fosse \u00fatil e agrad\u00e1vel de usar, a parte visual precisava ser bem cuidada. O processo come\u00e7ou com uma pesquisa detalhada em sites que considero refer\u00eancias em hospedagem e que possuem uma presen\u00e7a online s\u00f3lida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Analisei a estrutura visual e de conte\u00fado dos seguintes <em>players<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.hostgator.com.br\/\" target=\"_blank\" rel=\"noopener\">HostGator<\/a>:<\/strong> Conhecida pela sua interface direta e focada na convers\u00e3o.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.hostinger.com\/br\" target=\"_blank\" rel=\"noopener\">Hostinger<\/a>:<\/strong> Refer\u00eancia em design moderno e performance.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.hostnet.com.br\/\" target=\"_blank\" rel=\"noopener\">Hostnet<\/a>:<\/strong> Exemplo de robustez e clareza na apresenta\u00e7\u00e3o de informa\u00e7\u00f5es.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pesquisa de Fontes com Intelig\u00eancia Artificial<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mas n\u00e3o me limitei apenas aos grandes <em>players<\/em>. Utilizei a Intelig\u00eancia Artificial para buscar as melhores fontes de leitura para conte\u00fado t\u00e9cnico. O objetivo foi encontrar tipografias que garantissem uma leitura fluida e confort\u00e1vel para textos longos e trechos de c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com todas essas refer\u00eancias visuais e tipogr\u00e1ficas em m\u00e3os, iniciei a constru\u00e7\u00e3o do front-end.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tech Stack: Construindo o Front-end<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A escolha da <em>stack<\/em> tecnol\u00f3gica foi fundamental para garantir performance, facilidade de manuten\u00e7\u00e3o e um design moderno e responsivo.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Tecnologia<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Fun\u00e7\u00e3o no Projeto<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Motivo da Escolha<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>HTML5 Sem\u00e2ntico<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\">Estrutura<\/td><td class=\"has-text-align-center\" data-align=\"center\">Garante acessibilidade e melhor indexa\u00e7\u00e3o (SEO).<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Tailwind CSS<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\">Estiliza\u00e7\u00e3o<\/td><td class=\"has-text-align-center\" data-align=\"center\">Permite cria\u00e7\u00e3o r\u00e1pida de UI responsiva sem escrever CSS do zero.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Estrutura HTML5 Sem\u00e2ntica e Moderna<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na estrutura HTML, priorizei o uso de toda a sem\u00e2ntica do HTML5 com o que h\u00e1 de mais moderno. Isso significa que a p\u00e1gina \u00e9 acess\u00edvel para leitores de tela e bem compreendida pelos motores de busca.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplos de tags sem\u00e2nticas utilizadas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;article&gt;<\/code>: Para englobar cada artigo individualmente.<\/li>\n\n\n\n<li><code>&lt;header&gt;<\/code> e <code>&lt;footer&gt;<\/code>: Para os cabe\u00e7alhos e rodap\u00e9s da p\u00e1gina e dos artigo<\/li>\n\n\n\n<li><code>&lt;nav&gt;<\/code>: Para os menus de navega\u00e7\u00e3o.<\/li>\n\n\n\n<li><code>&lt;section&gt;<\/code>: Para dividir o conte\u00fado em se\u00e7\u00f5es l\u00f3gicas.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Exemplo simplificado da estrutura HTML --&gt;\n&lt;header&gt;\n  &lt;nav&gt;\n    &lt;!-- Links de navega\u00e7\u00e3o --&gt;\n  &lt;\/nav&gt;\n&lt;\/header&gt;\n&lt;main&gt;\n  &lt;section&gt;\n    &lt;article&gt;\n      &lt;header&gt;\n        &lt;h2&gt;T\u00edtulo do Artigo&lt;\/h2&gt;\n      &lt;\/header&gt;\n      &lt;p&gt;Conte\u00fado do artigo...&lt;\/p&gt;\n    &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;footer&gt;\n  &lt;!-- Rodap\u00e9 --&gt;\n&lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Estiliza\u00e7\u00e3o R\u00e1pida e Moderna com Tailwind CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para a estiliza\u00e7\u00e3o, a biblioteca <strong>Tailwind CSS<\/strong> foi a escolha natural. Ela permite criar interfaces responsivas e modernas rapidamente, sem a necessidade de escrever classes CSS personalizadas para cada elemento. Isso agilizou muito o processo de desenvolvimento do front-end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aproveitei a flexibilidade do Tailwind para aplicar estilos pontuais, como a paleta de cores que define a identidade visual do <strong>aqgoes.com<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dica de Ouro:<\/strong> O Tailwind CSS \u00e9 excelente para produtividade, mas lembre-se de configurar o <em>purge<\/em> (ou JIT nas vers\u00f5es mais recentes) para remover as classes n\u00e3o utilizadas e manter o arquivo CSS final o menor poss\u00edvel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A p\u00e1gina de artigos do <strong>aqgoes.com<\/strong> \u00e9 mais do que um blog; \u00e9 uma ferramenta pessoal de consulta e um reposit\u00f3rio de conhecimento que decidi compartilhar. Do processo de pesquisa com IA at\u00e9 a implementa\u00e7\u00e3o com HTML5 Sem\u00e2ntico e Tailwind CSS, cada etapa foi pensada para criar um ambiente pr\u00e1tico e eficiente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Espero que essa espiada &#8220;nos bastidores&#8221; tenha sido inspiradora. E voc\u00ea, como organiza as solu\u00e7\u00f5es que encontra no seu dia a dia de desenvolvimento? Utiliza algum rascunho online ou tem um m\u00e9todo pr\u00f3prio? Deixe seu coment\u00e1rio abaixo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Intradu\u00e7\u00e3o O &#8220;Porqu\u00ea&#8221; do Rascunho Online A principal motiva\u00e7\u00e3o para criar essa p\u00e1gina de artigos n\u00e3o foi apenas ter mais um blog, mas sim construir um reposit\u00f3rio centralizado de conhecimento pr\u00e1tico. Quantas vezes voc\u00ea j\u00e1 resolveu um erro ou implementou uma funcionalidade complexa e, meses depois, precisou fazer o mesmo e n\u00e3o lembrava de cabe\u00e7a? [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[62,60,8,19,59,63,30,61],"class_list":["post-114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web","tag-aqgoes","tag-css3","tag-desenvolvimento-web","tag-front-end","tag-html5","tag-processo-criativo","tag-tailwind-css","tag-ui-ux"],"_links":{"self":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":3,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions\/156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media\/116"}],"wp:attachment":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}