{"id":2978,"date":"2014-11-12T11:29:30","date_gmt":"2014-11-12T14:29:30","guid":{"rendered":"http:\/\/blog.dialhost.com.br\/?p=2978"},"modified":"2014-11-12T11:29:30","modified_gmt":"2014-11-12T14:29:30","slug":"designers-versus-bootstrap","status":"publish","type":"post","link":"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/","title":{"rendered":"Designers versus Bootstrap"},"content":{"rendered":"
\"Bootstrap\"<\/a>
Bootstrap<\/figcaption><\/figure>\n

Embora eu n\u00e3o seja um web designer por forma\u00e7\u00e3o, estou muito interessado na disciplina. Como tal, eu leio livros e blogs com foco em design.<\/p>\n

Ocasionalmente, percebo que determinados temas provocam fortes emo\u00e7\u00f5es na comunidade. Temas como \u201cFlat design: uma boa ideia ou a melhor ideia de todos os tempos\u201d, \u201cQual \u00e9 a puni\u00e7\u00e3o correta para um CEO que redesenha o logotipo de sua empresa durante um final de semana<\/a>?\u201d.<\/p>\n

Um desses t\u00f3picos de debate \u00e9 se \u00e9 uma boa ideia usar um framework front-end, como Bootstrap<\/a> ou Foundation<\/a>, em vez de construir um voc\u00ea mesmo. Como eu sou um grande f\u00e3 desses frameworks, fiquei curioso quanto \u00e0s raz\u00f5es de por que usar um seria uma m\u00e1 ideia.<\/p>\n

At\u00e9 onde eu posso dizer, a oposi\u00e7\u00e3o aos frameworks front-end decorre das seguintes cren\u00e7as:<\/p>\n

Frameworks for\u00e7am voc\u00ea a uma marca\u00e7\u00e3o \u201cn\u00e3o-sem\u00e2ntica\u201d<\/strong><\/p>\n

Marca\u00e7\u00e3o sem\u00e2ntica \u00e9 sobre HTML limitando apenas aquelas marcas necess\u00e1rias para expressar o conte\u00fado da p\u00e1gina, ao contr\u00e1rio de seu layout. Por isso, coisas como \u201ccontainer divs\u201d s\u00e3o malvistas.<\/p>\n

Bem, Bootstrap, de fato, faze uso liberal de elementos apenas de layout, como este:<\/p>\n


<\/p>\n\n\n\n
1<\/code><\/td>\n<<\/code>div<\/code> class<\/code>=<\/code>\"container\"<\/code>><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n\u00a0\u00a0<\/code>...<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n<\/<\/code>div<\/code>><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

 <\/p>\n

 <\/p>\n

Frameworks s\u00e3o muito super valorizados<\/strong><\/p>\n

Outra queixa comum \u00e9 que em sua busca para ser todas as coisas para todas as pessoas, frameworks front-end possuem coisas das quais voc\u00ea pode nunca precisar. Por exemplo, Bootstrap permite v\u00e1rias maneiras de estruturar os links de navega\u00e7\u00e3o: como abas ou pills, com ou sem menus suspensos, fixos ou n\u00e3o, verticais ou horizontais. Se o seu site precisa de apenas um (ou talvez dois) deles, por que suas folhas de estilo incluem todos esses estilos estranhos?<\/p>\n

Frameworks fazem tudo para parecer muito igual<\/strong><\/p>\n

Frameworks front-end te d\u00e3o um conjunto de op\u00e7\u00f5es padr\u00e3o para construir seus sites. Portanto, n\u00e3o \u00e9 uma grande surpresa quando as pessoas constroem seus sites usando essas op\u00e7\u00f5es. O efeito colateral disso \u00e9 que voc\u00ea olha e v\u00ea \u201cBootstrap\u201d em todos os lugares.<\/p>\n

Ent\u00e3o Bootstrap n\u00e3o \u00e9 bom?<\/strong><\/p>\n

Agora que eu j\u00e1 constru\u00ed um bom espantalho com os argumentos da oposi\u00e7\u00e3o, eu sou obrigado a tacar fogo no espantalho.<\/p>\n

Marca\u00e7\u00e3o sem\u00e2ntica onde faz sentido<\/strong><\/p>\n

Em primeiro lugar, vamos direto ao ponto de marca\u00e7\u00e3o sem\u00e2ntica. Sim, na medida em que uma p\u00e1gina HTML \u00e9 um documento, ela deveria incluir o conte\u00fado e um pouco mais. A boa not\u00edcia \u00e9 que para toda uma classe de p\u00e1ginas HTML este \u00e9 um ajuste natural: blogs, sites de marketing, revistas, e assim por diante.<\/p>\n

No entanto, a web est\u00e1 cheia de p\u00e1ginas HTML que servem a um prop\u00f3sito bem diferente: a de um cont\u00eainer de aplicativos. Para todos os clientes de e-mail, editores de documentos, formul\u00e1rios de pedidos de compra, an\u00e1lise de dashboards e assim por diante, a pureza sem\u00e2ntica \u00e9 legal, mas receber o app para expor corretamente \u00e9 muito mais agrad\u00e1vel.<\/p>\n

Bootstrap, com todos os seus \u201ccontainer\u201d divs, ajuda a resolver o problema de layout para aplicativos. Al\u00e9m disso, se a pureza sem\u00e2ntica \u00e9 uma preocupa\u00e7\u00e3o forte, ele te fornece as ferramentas<\/a> para gerenciar layouts sem viol\u00e1-los.<\/p>\n

Cheio de features, mas com features demais<\/strong><\/p>\n

Sim, Bootstrap tem uma tonelada de classes CSS nele, provavelmente milhares e milhares. No entanto, \u00e9 107k s\u00e3o minificados e altamente armazen\u00e1vies em cache. Para efeito de compara\u00e7\u00e3o, uma simples adi\u00e7\u00e3o de imagem do New York Times de hoje tem 20K<\/a>.<\/p>\n

Claro, existem sites para os quais vale a pena salvar entre 30-50K extras por pedido inicial. E nesses casos, pelo amor de qualquer coisa que voc\u00ea queira, personalize todos fora do CSS. Caso contr\u00e1rio, considere se o esfor\u00e7o extra vale a pena.<\/p>\n

Ele s\u00f3 parece o mesmo se voc\u00ea deixar<\/strong><\/p>\n

A raz\u00e3o pela qual muitos sites constru\u00eddos com Bootstrap parecem ser semelhantes \u00e9 porque elas s\u00e3o feitas por desenvolvedores e n\u00e3o designers. A maioria dos desenvolvedores tem pouco interesse\/habilidade de personalizar de forma eficaz os aspectos visuais de um site e, assim, usar o que j\u00e1 parece ser bom: o tema padr\u00e3o.<\/p>\n

Claro que, para aqueles que podem (ou querem) ajustar o visual, h\u00e1 muito que pode ser feito<\/a>.<\/p>\n

Algo mais?<\/strong><\/p>\n

Existem mais dois benef\u00edcios do uso de frameworks front-end que tenho que mencionar. O primeiro \u00e9 o suporte para design responsivo. O Bootstrap 3.0 tem v\u00e1rias op\u00e7\u00f5es para fazer suas p\u00e1ginas parecerem agrad\u00e1veis em diversos tipos de dispositivos. E mesmo que demore um pouco para envolver sua mente nessa abordagem, ela pode ser muito eficaz.<\/p>\n

Em segundo lugar est\u00e1 o suporte para navegadores mais antigos (ou seja, IE8). IE8 \u00e9 o grande devorador de tempo de desenvolvimento web. Ele pode levar horas e horas de ajustes e corre\u00e7\u00f5es at\u00e9 que o seu layout que funciona muito bem em todos os outros navegadores finalmente fique decente. Embora n\u00e3o seja perfeito, o suporte do Bootstrap para IE8<\/a> \u00e9 muito bom.<\/p>\n

Reflex\u00e3o final<\/strong><\/p>\n

Alguns designers dizem que nenhum designer que se preze usaria um framework que n\u00e3o criou. Eles temem perder o controle sobre o seu projeto, sem o benef\u00edcio aparente suficiente para compensar essa perda. Eu costumava ter uma opini\u00e3o similar sobre o uso de frameworks de desenvolvimento, mas a\u00ed eu superei isso e comecei a fazer o que tinha que ser feito.<\/p>\n

—–<\/p>\n

Artigo de Alex Tatiyants, publicado no iMasters<\/a>.\t\t\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"

\t\t\t\t\u00c9 uma boa ideia usar um framework front-end, como Bootstrap ou Foundation, em vez de construir um voc\u00ea mesmo? Leia o artigo de Alex Tatiyants e tire suas d\u00favidas:\t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2980,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[44,76,77,99,117,158],"yoast_head":"\nDesigners versus Bootstrap - Blog DialHost<\/title>\n<meta name=\"description\" content=\"\u00c9 uma boa ideia usar um framework front-end, como Bootstrap ou Foundation, em vez de construir um voc\u00ea mesmo? Leia o artigo de Alex Tatiyants e tire suas d\u00favidas:\" \/>\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.dialhost.com.br\/blog\/designers-versus-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designers versus Bootstrap - Blog DialHost\" \/>\n<meta property=\"og:description\" content=\"\u00c9 uma boa ideia usar um framework front-end, como Bootstrap ou Foundation, em vez de construir um voc\u00ea mesmo? Leia o artigo de Alex Tatiyants e tire suas d\u00favidas:\" \/>\n<meta property=\"og:url\" content=\"\/blog\/designers-versus-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog DialHost\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-12T14:29:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/04\/og-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dialhost\" \/>\n<meta name=\"twitter:site\" content=\"@dialhost\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\",\"name\":\"DialHost Internet\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\",\"https:\/\/twitter.com\/dialhost\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/03\/marca-dialhost.png\",\"width\":81,\"height\":81,\"caption\":\"DialHost Internet\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"name\":\"Blog DialHost\",\"description\":\"Os melhores conte\\u00fados sobre Desenvolvimento Web, Marketing e Neg\\u00f3cios\",\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.dialhost.com.br\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#webpage\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/\",\"name\":\"Designers versus Bootstrap - Blog DialHost\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#primaryimage\"},\"datePublished\":\"2014-11-12T14:29:30+00:00\",\"dateModified\":\"2014-11-12T14:29:30+00:00\",\"description\":\"\\u00c9 uma boa ideia usar um framework front-end, como Bootstrap ou Foundation, em vez de construir um voc\\u00ea mesmo? Leia o artigo de Alex Tatiyants e tire suas d\\u00favidas:\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/\",\"url\":\"\/blog\/\",\"name\":\"In\\u00edcio\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/designers-versus-bootstrap\/\",\"url\":\"\/blog\/designers-versus-bootstrap\/\",\"name\":\"Designers versus Bootstrap\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\"},\"headline\":\"Designers versus Bootstrap\",\"datePublished\":\"2014-11-12T14:29:30+00:00\",\"dateModified\":\"2014-11-12T14:29:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/designers-versus-bootstrap\/#primaryimage\"},\"keywords\":\"bootstrap,desenvolvimento,design,feed de parceiros,html,noticias\",\"articleSection\":\"Dicas e Not\\u00edcias\",\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\",\"name\":\"DialHost Internet\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/05feec2f99aef1c42b09aeaa637ee66f?s=96&r=g\",\"caption\":\"DialHost Internet\"},\"description\":\"H\\u00e1 mais de 18 anos proporcionando um servi\\u00e7o de hospedagem de sites voltado 100% na Experi\\u00eancia e Sucesso do Cliente, prezando a qualidade, transpar\\u00eancia e seguran\\u00e7a.\",\"sameAs\":[\"https:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/twitter.com\/dialhost\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2978"}],"collection":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2978"}],"version-history":[{"count":0,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2978\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media\/2980"}],"wp:attachment":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}