{"id":2718,"date":"2014-09-10T10:25:09","date_gmt":"2014-09-10T13:25:09","guid":{"rendered":"http:\/\/blog.dialhost.com.br\/?p=2718"},"modified":"2014-09-10T10:25:09","modified_gmt":"2014-09-10T13:25:09","slug":"conselhos-essenciais-em-html5-css-responsivo-e-seo","status":"publish","type":"post","link":"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/","title":{"rendered":"Conselhos essenciais em HTML5, CSS, Responsivo e SEO"},"content":{"rendered":"
\"Imagem<\/a>
Imagem ilustrativa<\/figcaption><\/figure>\n

Um dos grandes desafios em trabalhar com web \u00e9 acompanhar as novidades tecnol\u00f3gicas que aparecem e desaparecem, se renovam e superam em uma velocidade impressionante. H\u00e1 tantas ferramentas e plataformas que se multiplicam todos os dias que \u00e9 dif\u00edcil conhecer todas (talvez humanamente imposs\u00edvel tamb\u00e9m). Mas estar atento \u00e0s dicas essenciais j\u00e1 basta para se manter atualizado o suficiente. Confira algumas dicas de web design que se destacam entre a multid\u00e3o de novidades:<\/p>\n

HTML 5<\/strong><\/p>\n

01. Escolha um estilo de c\u00f3digo<\/strong><\/p>\n

O HTML5 permite que a marca\u00e7\u00e3o seja escrita em mai\u00fasculas, min\u00fasculas ou uma mistura delas. Al\u00e9m disso, ningu\u00e9m \u00e9 obrigado a criar todos os atributos em elementos como <img>. Voc\u00ea pode at\u00e9 omitir o atributo type quando usar <style>, <link> ou <script>. O estilo \u00e9 uma escolha sua, mas se est\u00e1 trabalhando com uma equipe, verifique se todos est\u00e3o em sintonia. E ainda h\u00e1 um n\u00famero de elementos e atributos que est\u00e3o ultrapassados em HTML5, como<big>, <center> e <font>. Melhor deix\u00e1-los para l\u00e1.<\/p>\n

02. Leia as specs<\/strong><\/p>\n

As especifica\u00e7\u00f5es s\u00e3o uma parte importante. A vers\u00e3o de HTML5 \u00e9 mantida tanto pela WHATWG (o principal padr\u00e3o de especifica\u00e7\u00e3o e a W3C (HTML5). Se voc\u00ea n\u00e3o tem certeza sobre qual especifica\u00e7\u00e3o ler, o especialista Oli Studhilme escreveu um pouco sobre o assunto no HTML5 Doctor (leia aqui). Ler as specs \u00e9 a \u00fanica maneira de entender, de fato, alguns elementos e APIs. Elas tamb\u00e9m contribuem para uma leitura r\u00e1pida sobre os fundamentos para projetar HTML5.<\/p>\n

03. Planeje sua marca\u00e7\u00e3o<\/strong><\/p>\n

Depois de ler as especifica\u00e7\u00f5es, voc\u00ea entender\u00e1 melhor a estrutura de um documento, com os Document Outlines (saiba mais aqui). Pense neles como o equivalente \u00e0s visualiza\u00e7\u00f5es de documentos do Microsoft Word. Usar o conceito de documento outline vai ajudar a criar uma marca\u00e7\u00e3o bem estruturada. No processo de cria\u00e7\u00e3o do design, \u00e9 poss\u00edvel criar uma lista alinhada \u00e0 p\u00e1gina, o que vai obrig\u00e1-lo a pensar os n\u00edveis de t\u00edtulos que devem ser usados e quais elementos ser\u00e3o colocados em cada lugar. Por isso, ter blocos de conte\u00fado organizados faz toda a diferen\u00e7a.<\/p>\n

04. Escolha o elementos certo<\/strong><\/p>\n

Falamos antes sobre elementos que est\u00e3o ultrapassados na quinta vers\u00e3o do HTML. Mas n\u00e3o se preocupe, ainda h\u00e1 30 novos elementos que foram adicionados e muitos outros que ainda ser\u00e3o definidos. Por isso, pode ser dif\u00edcil escolher o elemento certo para cada projeto. Para resolver voltamos \u00e0 premissa de usar um elemento para descrever o significado do conte\u00fado, e n\u00e3o a sua apar\u00eancia. Pense com cuidado sobre o significado disso antes de adicionar elementos. Consulte de novo o HTML5 Doctor para ajudar a escolher os certos.<\/p>\n

05. Guerra de codecs<\/strong><\/p>\n

Voc\u00ea j\u00e1 deve ter ouvido falar que o HTML5 vai matar o Flash. Isso tem se espalhado largamente por conta do v\u00eddeo e \u00e1udio em HTML5. N\u00e3o ter que depender de plug-ins para executar conte\u00fado de m\u00eddia \u00e9 um grande passo para uma web aberta, mas ter que lidar com tecnologias competitivas n\u00e3o \u00e9. Quando criar conte\u00fado multim\u00eddia para o seu site codifique seus arquivos m\u00faltiplas vezes e inclua op\u00e7\u00f5es para browser com capacidades inferiores. Um artigo de Kroc Camen chamado \u2018Video for Everybody\u201d (V\u00eddeo para todos) \u00e9 um \u00f3timo come\u00e7o sobre como lidar com isso (acesse o artigo aqui).<\/p>\n

CSS<\/strong><\/p>\n

01. Crie solu\u00e7\u00f5es independentes<\/strong><\/p>\n

Desenvolva qualquer efeito de CSS, 3D, rolagens ou transi\u00e7\u00f5es fora do documento principal. Assim, \u00e9 poss\u00edvel criar uma solu\u00e7\u00e3o individual e organizada que poder\u00e1 at\u00e9 ser usada depois em outros projetos. Fazer experimentos desorganizados dificulta a verifica\u00e7\u00e3o caso alguma coisa n\u00e3o esteja funcionando como esperado.<\/p>\n

02. Ordem relevante<\/strong><\/p>\n

Todo mundo sabe que tentar editar c\u00f3digos CSS de outra pessoa \u00e9 complicado. Sempre use m\u00faltiplas linhas CSS com as declara\u00e7\u00f5es ordenadas por relev\u00e2ncia. Dessa forma, seu c\u00f3digo poder\u00e1 ser entendido por voc\u00ea ou qualquer outro envolvido no projeto.<\/p>\n

03. Saiba seu papel<\/strong><\/p>\n

Mantenha classes bem focadas nas suas fun\u00e7\u00f5es. Cada classe deve ter uma \u00fanica responsabilidade, totalmente contida dentro dela. Deixe todos os atributos envolvidos nessa fun\u00e7\u00e3o em vez de tentar atribuir m\u00faltiplas responsabilidades.<\/p>\n

04. Nomes<\/strong><\/p>\n

Use h\u00edfen nos seletores de nomea\u00e7\u00e3o. Por exemplo: isto-eh-bom{}, isto_eh_ruim{}, istoEhMuintoRuim{}. Isso ajuda a manter o seletor de nome leg\u00edvel e geralmente mais simples.<\/p>\n

05. Prefixos<\/strong><\/p>\n

Os prefixos de fabricantes de navegadores devem desaparecer quando o CSS3 se tornar um padr\u00e3o e for adotado pelos browsers. Por enquanto, use todos os prefixos onde s\u00e3o aplic\u00e1veis. Sempre termine com uma declara\u00e7\u00e3o gen\u00e9rica, sem prefixo.<\/p>\n

Responsivo<\/strong><\/p>\n

01. Significado<\/strong><\/p>\n

Por defini\u00e7\u00e3o, um web site responsivo usa layouts flex\u00edveis e media queries para moldar e adaptar-se ao seu ambiente de visualiza\u00e7\u00e3o. \u00c9 importante notar que o web design responsivo n\u00e3o \u00e9 nem um nem outro. Voc\u00ea deve encontrar harmonia em ambas as t\u00e9cnicas e quando o fizer, ir\u00e1 criar layouts responsivos da melhor maneira.<\/p>\n

02. Media queries<\/strong><\/p>\n

Os seus breakpoints de media query devem ser escolhidos de acordo com as necessidades do seu site. H\u00e1 muitas resolu\u00e7\u00f5es de telas e n\u00e3o se deve incluir os breakpoints para todas as varia\u00e7\u00f5es existentes. H\u00e1 muitas resolu\u00e7\u00f5es de telas na tentativa de realizar isso. Comece com resolu\u00e7\u00f5es bem b\u00e1sicas de dimens\u00f5es e adicione a elas breakpoints de acordo com as necessidades do seu projeto.<\/p>\n

03. Mobile-first<\/strong><\/p>\n

Em resumo, mobile first significa desenvolver para telas pequena primeiro e depois para desktops. Isso vai contra a abordagem tradicional no qual web designers precisam ter um site no desktop e depois cortar alguns bits para conseguir um site mobile. As restri\u00e7\u00f5es de plataforma fazem com que voc\u00ea trabalhe a hierarquia do conte\u00fado, ent\u00e3o essa abordagem \u00e9 perfeita para design responsivo.<\/p>\n

04. Derrube pixels<\/strong><\/p>\n

Elimine atributos com declara\u00e7\u00f5es fixas de pixel em HTML e no seu CSS. Imagens, em particular, precisam carregar e a melhor forma de fazer isso \u00e9 declarar a porcentagem de tamanho no elemento <img>. Tamb\u00e9m \u00e9 s\u00e1bio criar classes CSS com tamanho em percentual, ent\u00e3o voc\u00ea pode simplesmente incluir <img> ou outras tags\u00a0 HTML.<\/p>\n

05. Confie no JavaScript<\/strong><\/p>\n

\u00c0s vezes voc\u00ea tem pouco controle sobre a marca\u00e7\u00e3o do seu site. Isso s\u00f3 n\u00e3o acontece quando voc\u00ea est\u00e1 construindo um tema para CMS como WordPress, por exemplo. Escrever um script para remover um tamanho fixado ou atributos de estilo de tags HTML \u00e9 f\u00e1cil e r\u00e1pido em um jQuery. Use e abuse. Isso vai garantir que o seu conte\u00fado ser\u00e1 flu\u00eddo.<\/p>\n

SEO<\/strong><\/p>\n

01. Tags \u00fanicas<\/strong><\/p>\n

Use tags de t\u00edtulos \u00fanicos e descri\u00e7\u00f5es para cada p\u00e1gina do seu website, o que \u00e9 \u00f3bvio para muita gente, mas \u00e9 importante. Tente incluir suas palavras-chave de SEO enquanto cria textos. Mantenha as tags de t\u00edtulos com no m\u00e1ximo 70 caracteres e as descri\u00e7\u00f5es cm pelo meno 155. N\u00e3o use meta palavras-chave, elas ajudam concorrentes a encontrarem suas palavras.<\/p>\n

02. 301 redirecionamentos<\/strong><\/p>\n

Se mudar para um novo websites ou URL use o recurso 301 redirecionamentos para novas p\u00e1ginas. O mesmo vale para quem tem m\u00faltiplos dom\u00ednio: use apenas um como principal e redirecione os outros. Isso vai gerar backlinks e evitar a duplica\u00e7\u00e3o. Servi\u00e7os com o Open Site Explorer ou Majestic SEO podem ajudar.<\/p>\n

03. Link interno<\/strong><\/p>\n

Fa\u00e7a bom uso de links internos. Quando se cria um bom visual para um site, \u00e0s vezes, esquecemos quais p\u00e1ginas s\u00e3o importantes e como referenci\u00e1-las. Garanta que seus links internos ir\u00e3o suportar as p\u00e1ginas mais importantes.<\/p>\n

04. Use microdata<\/strong><\/p>\n

Tire vantagem de cada peda\u00e7o do Google usando microdados. J\u00e1 viu estrelas de classifica\u00e7\u00e3o em uma lista org\u00e2nica? Esse \u00e9 um exemplo \u00f3timo que pode melhorar suas taxas de cliques. Voc\u00ea pode acompanhar estimativas, v\u00eddeos, pessoas, produtos e muitas outras coisas. Viste schema.org para saber mais.<\/p>\n

05. Pensamento social<\/strong><\/p>\n

Mecanismo de busca est\u00e3o valorizando sinais sociais, ent\u00e3o abuse de redes sociais. Tenha certeza de que sue conte\u00fado ser\u00e1 f\u00e1cil de compartilhar e promover. Concentre-se em conseguir compartilhamento e retu\u00edtes, em vez de apenas conseguir mais seguidores e \u201ccurtir\u201d.<\/p>\n

Texto de Isabella S\u00e1nchez, publicado originalmente no iMasters<\/a>.\t\t\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"

\t\t\t\tUm dos grandes desafios em trabalhar com web \u00e9 acompanhar as novidades tecnol\u00f3gicas que aparecem e desaparecem, se renovam e superam em uma velocidade impressionante. H\u00e1 tantas ferramentas e plataformas que se multiplicam todos os dias que \u00e9 dif\u00edcil conhecer todas (talvez humanamente imposs\u00edvel tamb\u00e9m). Mas estar atento \u00e0s dicas essenciais j\u00e1 basta para se manter atualizado o suficiente. Confira algumas dicas de web design que se destacam entre a multid\u00e3o de novidades:\t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2813,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,3,21,5,11],"tags":[77,99,118,158,184],"yoast_head":"\nConselhos essenciais em HTML5, CSS, Responsivo e SEO - Blog DialHost<\/title>\n<meta name=\"description\" content=\"Confira algumas dicas de web design, SEO, HTML 5 e CSS que se destacam entre a multid\u00e3o de novidades\" \/>\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\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Conselhos essenciais em HTML5, CSS, Responsivo e SEO - Blog DialHost\" \/>\n<meta property=\"og:description\" content=\"Confira algumas dicas de web design, SEO, HTML 5 e CSS que se destacam entre a multid\u00e3o de novidades\" \/>\n<meta property=\"og:url\" content=\"\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/\" \/>\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-09-10T13:25:09+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\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#webpage\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/\",\"name\":\"Conselhos essenciais em HTML5, CSS, Responsivo e SEO - Blog DialHost\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#primaryimage\"},\"datePublished\":\"2014-09-10T13:25:09+00:00\",\"dateModified\":\"2014-09-10T13:25:09+00:00\",\"description\":\"Confira algumas dicas de web design, SEO, HTML 5 e CSS que se destacam entre a multid\\u00e3o de novidades\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#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\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/\",\"url\":\"\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/\",\"name\":\"Conselhos essenciais em HTML5, CSS, Responsivo e SEO\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\"},\"headline\":\"Conselhos essenciais em HTML5, CSS, Responsivo e SEO\",\"datePublished\":\"2014-09-10T13:25:09+00:00\",\"dateModified\":\"2014-09-10T13:25:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/conselhos-essenciais-em-html5-css-responsivo-e-seo\/#primaryimage\"},\"keywords\":\"design,feed de parceiros,html5,noticias,SEO\",\"articleSection\":\"Desenvolvimento,Dicas e Not\\u00edcias,JavaScript, CSS e HTML,Marketing,SEO\",\"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\/2718"}],"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=2718"}],"version-history":[{"count":0,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media\/2813"}],"wp:attachment":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}