Posts de Ana Flávia Cador
18 de maio de 2015

Como deixar o blog mais rápido em 6 passos

Muitas vezes nos deparamos com uma página que demora milênios para carregar — e, quase todas essas vezes, perdemos a paciência de esperar e logo partimos para outra página, não é mesmo? Isso não é errado; na verdade, é comum não termos a paciência diante de tanta informação rápida da qual estamos acostumadxs nos dias atuais. Desta forma, precisamos ter nossos blogs otimizados ao máximo para não ser “desistido” (ai que palavra feia, mas não achei outra melhor que encaixe neste momento, haha) -_- diante de tanta coisa sendo carregada, não é mesmo? Neste post falarei sobre como otimizar o nosso blog dando várias dicas de como deixar a página mais rápida tanto para blogger quanto wordpress e ajudar xs leitorxs a navegar lindamente com poucos travamentos.

É grandinho o post, mas vale a pena! Dê uma conferida no menuzinho abaixo e navegue entre os tópicos clicando nos títulos que desejar e salve este post como seu filho e compartilhe cozamigxs. *u*

Como deixar o blog mais rápido

Fonte da imagem: PicJumbo

Índice de otimização:

  1. Imagens — dicas de como deixa-las mais leves e métodos que requer menos do servidor
  2. CSS — como ter um CSS magrinho e leve 3_3
  3. Scripts — scripts rápidos e eficientes
  4. HTML — como ter um código menor e levinho
  5. Posição dos elementos de layout — quando a ordem dos tratores alteram o viaduto ;)
  6. Cache — quando o navegador e HTML se amam sem precisar de um servidor como cupido

Vale lembrar que estas são dicas básicas de otimização, pois, há outros inúmeros processos e formas de melhorar nossos códigos e imagens que já vão muito além do que simples diminuições de códigos. Estas dicas que reuni foi pensando em nós, blogueirxs, que não possuem uma noção muito avançada de programação ou de desenvolvimento — mas que, mesmo assim, já são essenciais para melhorar o desempenho de nossos bloguitchos!


Antes de tudo: teste a velocidade e desempenho de seu blog

Antes de mais nada, precisamos saber se precisamos e o que precisamos melhorar. Vamos testar a velocidade de nosso blog e ver como ele anda sendo lido pelos navegadores? Os sites abaixo são perfeitos para diagnosticar problemas em um site e falam onde pode ser melhorado.

Agora que você testou o seu blog e caso tenha percebido pelos relatórios que ele demora um pouquinho para carregar, você pode ajudar a melhorar o carregamento nas seguintes formas:

1. Otimizando imagens

Uma das coisas que mais pesa em um site são as imagens. E os blogs são ricos em imagens tanto em layout quanto nos posts e isso soma-se também os sliders, banners, lista de relacionados… e mais um monte de itens que um layout possua que envolva comunicação visual. E há duas formas de otimizar essas imagens. São:

Por tamanho

Temos aquela imagem incrível mas ela é quase o tamanho de uma música MP3 e só falta a gente se matar de tão pesada, né? Relaxa, o site TinyPNG é ótimo para otimizar imagens em formato de PNG e reduz o tamanho em Kbps do arquivo de 50 a 75%! As imagens JPG podem perder um pouco da qualidade e ficar um pouco pixeladas neste site, então recomendo que você salve no seu editor de imagem o seu JPG com cerca 65% a 70% de qualidade que, para a web, possui a mesma resolução de uma 100%. Mas a qualidade do PNG não perde em absolutamente nada! *u* Para GIF o melhor site que encontrei que otimiza é o ezgif.com.

Por código Data URL (base64)

Todo requerimento de servidor leva tempo, e quanto menos requerimentos, melhor para o blog e mais rápido fica. O método de otimização que codifica a imagem e a transforma em um código seria, em suma, a representação da mesma em sua forma textual. Este método de codificação chama-se base64. Ele apenas acelera o processo de visualização do código de uma imagem e requer absolutamente nada do servidor para lê-la, ao contrário do que aconteceria se utilizássemos a URL dessa mesma imagem hospedada no servidor de nosso blog ou qualquer outro servidor na web. Seria um descanso para o servidor e deixamos todo o papel para o navegador, melhorando assim o carregamento e ele por si só interpreta todas as informação da imagem. A conversão de uma imagem para base64 seria mais ou menos assim:

exemplo-base64

Essa seria forma antiga da URL da imagem acima:

<style type="text/css">
.minha-imagem {
	background-image: url('http://www.coisasdeblogueiras.com.br/wp-content/uploads/2015/05/exemplo-base64.png');
}
</style>

Enquanto em base64 seria assim:

<style type="text/css">
.minha-imagem {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAABjCAIAAAA9y0ikAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERjREMThGOUVBMDcxMUU0QkFEOUNERkM1OUU2OTJGQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERjREMThGQUVBMDcxMUU0QkFEOUNERkM1OUU2OTJGQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRGNEQxOEY3RUEwNzExRTRCQUQ5Q0RGQzU5RTY5MkZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGNEQxOEY4RUEwNzExRTRCQUQ5Q0RGQzU5RTY5MkZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YUmgAAAADI9JREFUeNrsXVlQ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');
}
</style>

O mesmo equivale para a tag <img> de imagem, substituindo uma imagem comum pelo base64.

F.A.Q básico sobre base64

  1. Como gero este código maluquete?
    R: Você gera este código no site base64-image.de em apenas 2 passos: 1) faça o upload da imagem e; 2) pega o código. SÓ ISSO. 3_3 E use no lugar da imagem que você substituiu.
  2. Funciona para blogger ou wordpress?
    R: Funciona para ambos! Inclusive para qualquer plataforma de blog! *u*
  3. Tem como evitar ou encurtar este código?
    R: Não, ele terá de ficar assim, gigantão — ou então você volta ao formato PNG/JPG/GIF (que você deve ter em seu computador guardado) e otimiza-lo nos sites que recomendei acima. Infelizmente a URL direta do base64 da imagem não funciona em encurtadores de links.

Quando eu devo usar o método de otimização de imagem ou base64?

O base64 é legal de ser usado nas imagens de seu layout, tanto como background como imagens de rodapé ou de sidebar. Nos posts recomendo os sites de otimização que comentei acima porque ninguém merece trilhões de linhas de código (a não ser que você tenha paciência para ver aquilo tudo, haha), pois, além disso, o navegador salva as imagens nos arquivos temporários de seu PC (o nome disso é cache, que você saberá o que é no final deste artigo). Imagens codificadas em base64 não são salvas no navegador (apesar de depender apenas dele para serem mostradas), então é melhor fazer isso no layout para evitar o requerimento de servidor sempre que o layout for carregado e deixar isso para as imagens dos posts.

E blogs com muitas fotos?

Blogs fotográficos sofrem muito com carregamento pois, muitas vezes, a pessoa posta TODAS as fotos de um evento e, além de gerar aquela barra de rolagem gigantesca, deixa o blog praticamente inavegável temporariamente (ou infinitamente rs) de tanta imagem a ser carregada. Nestes casos, em vez de deixar vários posts na página inicial, deixe no máximo dois e invista em posts relacionados para manter x leitxr interessadx nos outros posts. Ou então, já pensou no quanto aquele botãozinho de “leia mais” pode ajudar? Não tenha preconceito deste botãozinho (sei que muitxs blogueirxs odeiam), haha. É só saber utiliza-lo ao seu favor ;) É só fazer um post interessante com uma boa introdução e algumas fotos que x leitxr não terá preguiça de clicar no “leia mais”. Depois disso, use e abuse de suas fotografias que elx terá a paciência de ver.

Para blogs wordpress

O plugin WP Smush.it promete reduzir o tamanho das imagens hospedadas no próprio servidor sem alterar a qualidade de imagem. Vale a pena testar!


2. Otimizando o CSS

A folha de estilo do CSS pode ser escrita de forma linear ou identada. Veja abaixo as diferenças.

2.1 Código identado

Seria uma linha para cada configuração com espaços e tudo bem mais organizado.

section {
    background: #ffffff;
    margin-top: 20px;
    margin-right: 40px;
    margin-bottom: 20px;
    margin-left: 40px;
    padding-right: 12px;
    float:left;
    width:650px;
}
aside {
    background: #ffffff;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 35px;
    float:right;
    width:300px;
}

2.2 Código identado otimizado

Onde várias configurações podem ser economizadas, como paddings, margins, onde sempre é iniciado a contagem no sentido horário (topo, direita, baixo e direita) e, caso haja repetição nos sentidos horizontal e vertical, o número nem precisa ser repetido. Assim vale também para duas configurações iguais, onde podemos deixar a mesma configuração para itens diferentes separando-os por vírgulas.

section, aside {background: #fff} /*configuração (cor de fundo) em comum*/
section {
    margin: 20px 40px; /*top e bottom = 20px, right e left = 40px*/
    padding: 0 12px 0 0; /*onde tudo está zerado e só o right possui 12px*/
    float:left;
    width: 650px;
}
aside {
    margin: 20px 10px 20px 35px;
    float:right;
    width: 300px;
}

2.3 Código compacto

Onde cada item possui suas configurações em uma linha.

section, aside {background: #fff}
section {background:#ffffff; margin: 20px 40px; padding: 0 12px 0 0; float:left; width: 650px;}
aside {margin: 20px 10px 20px 35px; float:right; width: 300px;}

2.4 Código comprimido

Onde todo o CSS é composto por uma só linha.

section, aside {background: #fff}section {background:#ffffff; margin: 20px 40px; padding: 0 12px 0 0; float:left; width: 650px;}aside {margin: 20px 10px 20px 35px; float:right; width: 300px;}

Engraçado como o mesmo código pode ser escrito de várias formas, né? Quando menor e mais compactado o código for, menor ele fica em tamanho de Kpbs e mais rápido ele é lido pelo browser. Ao contrário do que imaginamos, os espaços em branco e quebras de linhas também alteram no tamanho do arquivo. Uma forma legal de trabalhar com CSS compactado é trabalha-lo dividindo-o em dois arquivos onde:

  1. Em um arquivo escrevemos nosso CSS de forma identada ou da forma como nos sentimos mais à vontade e;
  2. No arquivo CSS oficial de nosso blog, onde apenas salvamos o CSS compactado por um gerador.

Por exemplo, em minha pasta do meu layout do wordpress tenho o arquivo style.css, que é o CSS oficial do layout (que será o compactado e lido pelo browser) e também um arquivo chamado style_original.css, que é onde eu guardo um CSS mais organizado e identado para eu ver onde estou mexendo, testo no layout e depois compacto.

Como compactar o CSS?

Você pode compactar o seu CSS nos geradores CSS Compressor do site CSS Drive e também no CSS Minifier do site Clean CSS. Todos estes sites são ótimos e otimizam bastante o tamanho de seu CSS. :) E para você organizar o seu código CSS identado o melhor gerador de organização de código é o Jota Query.


3. Otimizando os scripts

Assim como o CSS o Javascript também pode ser identado e otimizado de forma compacta. Veja o exemplo do script que uso para o botãozinho de “subir ao topo”.

$(document).ready(function () {
  $('a[href=#top]').click(function () {
    $('html, body').animate({
      scrollTop: 0
    }, 1100);
    return false;
  });
});

E assim ficaria ele compactado, utilizando o gerador jsCompress, que adoro — porque, além dele comprimir o script, ele também organiza as funções e colocando-as da melhor forma tudo automaticamente.

$(document).ready(function(){$("a[href=#top]").click(function(){return $("html, body").animate({scrollTop:0},1100),!1})});

4. Otimizando o HTML

Assim como o CSS e Javascript, o HTML também pode ser otimizado. Isso é legal de ser utilizado no blogger, com aquele mundo enorme de códigos XML (só lembre-se de guardar o seu modelo com os códigos originais para você conseguir se organizar e enxergar o código). O gerador HTML Compressor é ótimo para minifcar o código!

Para blogs wordpress

Para wordpress pode utilizar o plugin WP Minify que ele fará isso de forma automática (e, se eu não me engano, também possui sistema de otimização automática de scripts e css). 3_3 Ou então utilize um plugin de cache (que explicarei o que é mais para frente neste artigo).

Outra dica para otimizar o HTML do seu blog é evitar ao máximo possível plugins desnecessários, pois eles implementam vários códigos no HTML que você não sabe e podem comprometer o carregamento. Plugins de segurança e otimização são altamente recomendados (em breve escreverei um post sobre várias dicas de segurança para o seu blog wordpress), mas para outras funções busque fazer ao máximo utilizando funções dentro de seu tema.


5. Posição correta dos elementos

Todo o código de um blog é lido de forma linear. Ou seja, o navegador começa a interpretar o código de nossos blogs através do topo para, por último, interpretar os códigos do rodapé. Pensando nesta forma de leitura do navegador, podemos ajuda-lo a ler mais rápido as coisinhas seguindo as seguintes dicas:

  • Crie o seu CSS pensando exatamente a leitura de seu navegador. Ou seja: comece o seu estilo pelo cabeçalho, depois crie a área de posts (isso inclui também comentários e paginação), a coluna lateral (sidebar) e, por fim, o rodapé.
  • Sempre coloque os scripts no rodapé de seu blog, a não ser que um seja especificado para colocar no topo. Isso acontece porque geralmente os scripts são um pouco mais pesados de serem interpretados e se colocar todos no topo isso pausa um pouco no carregamento do restante da página. Por isso, é melhor que os scripts fiquem por último pois assim a página será lida mais rapidamente.

6. Utilizando recurso de cache

Cache são os dados que são armazenados de forma temporária de um meio de acesso mais lento. Podem ser salvos tanto pelo servidor como pelo navegador, onde este último já possui um sistema de cache automático. Sabe aquele site que demorou mil anos para carregar em seu browser, mas quando você entrou nele novamente o carregamento foi bem mais rápido? Isso significa que o seu navegador guardou os dados desta página para que ela possa abrir mais rápido e requerer menos do servidor em que ela está hospedada.

Em blogs wordpress também podemos fazer isso, só que utilizando plugins. Sabemos que o wordpress possui um requerimento de servidor maior do que o blogger por ser mais complexo, tanto no quesito de linguagem (que é a PHP), como requerimento de dados. Desta forma, um plugin de cache ajuda a ter menos requerimento transformando todo o código em HTML comum, em vez de ler todo o código PHP novamente, deixando-o estático e se atualizando apenas de tempos em tempos — e não atualizando toda vez que a página é acessada.

O melhor plugin de cache que encontrei até hoje é o W3 Total Cache, pois, além de ser eficiente no quesito de armazenar os arquivos, ele também tem opção de mininificar o código HTML. Converse com o sistema de suporte ao seu servidor e verifique se eles já possuem sistema de cache integrado em seus serviços e de otimização, e assim você nem precise utilizar plugins de cache!


Agora que você já possui estas dicas, você pode investir novamente em toda a reformulação de seu blog e testar novamente nos sites de teste de velocidade que eu recomendei no início deste post. Espero muito que este artigo tenha te ajudado e que sirva como um mini-manual para você visitar sempre que precisar! *u*

E ai, já otimizou o seu blog hoje? O que achou da experiência? Conhece alguma outra dicas de otimização que poderia ser acrescentada neste posts? Comente se gostou do artigo e se o achou útil. Ou então, caso tenha dúvida, deixe-a nos comentários.

20 de abr de 2015

Como contratar uma hospedagem e domínio para o seu blog

Essa é uma das maiores dúvidas para quem está começando na blogosfera ou pensa em migrar de plataforma. Muitas pessoas entram na dúvida sobre qual tipo de hospedagem contratar, como contratar e porque contratar! Resolvi postar sobre este assunto para também deixar aqui do blog o quanto estamos mega felizes com nossa nova parceria, a Nuvem Hospedagem! Não é nada menos do que digno comentar um pouco mais a fundo sobre o que significa uma hospedagem para quem quer ter um site ou um blog. Vamos começar?

Imagem: Picjumbo.

Imagem: Picjumbo.

1. O que é uma hospedagem?

Uma hospedagem não é nada mais, nada menos do que o local que possibilita uma pessoa ou empresa guardar informações, imagens, vídeo e ter a possibilidade de publica-los aos internautas. Quem fornece este tipo de serviço são os provedores, como a Nuvem, dos quais cobram um determinado valor para cada tipo de hospedagem. Eles cedem um espacinho do servidor deles para você colocar o seu blog e tudo o que é necessário para ele ficar no ar.

Eu realmente preciso de uma hospedagem?

Eis a questão. Muita gente acredita que é necessário contratar um serviço de hospedagem sem saber se irá precisar dela (ou até mesmo nem sabe da existência de hospedagem). Digo isso pois já vi caso de uma pessoa contratar uma hospedagem acreditando que seria domínio ou até mesmo para tentar usar no blogger achando que precisaria fazer como no wordpress. É estranho? É, mas é normal pois não são todos que tem acesso à informação correta sobre hospedagem x domínio x plataformas de blogs que já vêm com hospedagem pronta. A ansiedade de criar um blog é tanta que acaba atropelando algumas coisas sem pesquisar. Vamos às perguntas básicas:

  1. Quero ter um blog. Preciso de hospedagem? Não exatamente. Se você tiver um blog no Blogger, no WordPress.com ou Tumblr (e dentre outras plataformas) você não precisa pois estes serviços já vêm com hospedagem embutida na conta. Mas se você quer ter um blog utilizando o WordPress.org você precisará contratar, sim! Mas, para isso, saiba da diferença entre WP.com e WP.org para evitar confusão.
  2. Quero um blog no WordPress.org. Preciso de domínio? 99% dos casos precisa, sim. Entretanto, há empresas que fornecem subdomínios para caso o cliente queira apenas a hospedagem. Mas é legal que tenha um domínio e, de preferência (não é obrigação, ok?, é mais por comodidade mesmo), na mesma empresa para a gestão ficar mais fácil.
  3. Qual a diferença entre domínio e hospedagem? Como eu disse, hospedagem é o local de armazenamento do blog. Domínio é a URL te identifica na internet com o objetivo de facilitar o acesso. Você pode ter um registro com extensão .com, .com.br, .me, .tv, .org e mais um monte de infinidade de nomes, caso contrário você usa um domínio com nome de uma empresa, como seunome.blogspot.com.br, meublog.wordpress.com ou meusite.wix.com.br etc.
  4. Tenho um blogger. Posso ter um domínio e hospedagem? Você pode ter um domínio para retirar o blogspot.com.br da sua url e ter uma url própria. Entretanto, hospedagem não é necessária — a não ser que queira migrar para o wordpress.
  5. Tenho um blog em wordpress mas nunca contratei uma hospedagem. Fiz algo de errado? Não, isso significa que você utiliza a plataforma do wordpress.com (já tem hospedagem embutida), que é diferente do wordpress.org, que neste é necessário fazer o download para instalar e utilizar.

Qual é o preço em média?

Isso vai depender do que cada hospedagem irá fornecer. Por isso, é necessário pesquisar bastante. Os planos mais simples, comumente utilizados para blogs iniciantes ou com menos de 2mil visitas diárias, giram em torno de R$10 a R$20 por mês. Veja abaixo as coisas que você deve se atentar e analise qual é a melhor hospedagem custo-benefício para você. Lembrando que o barato às vezes sai caro, então tudo é questão de pesquisa e o que melhor atende as suas necessidades neste momento.

2. O que devo me atentar em um serviço de hospedagem?

Você decidiu blogar com wordpress e precisa de hospedagem. Agora começa sua procura por uma. Existem vários tipo de hospedagem para diversos tipos de sites, dos mais pequenos e com poucas visitas aos mais famosos e visitados. Por isso, o ideal é começar aos poucos, mas ter muito cuidado e se ligar nos seguintes itens e dou algumas dicas de como se atentar.

  1. Pré-requisitos: Alguns sites exigem que você tenha um registro de domínio, enquanto outros oferecem o serviço de subdomínio gratuitamente. Há serviços também que oferecem domínio grátis para quem contrata determinado tipo de hospedagem (a Nuvem é um desses).
  2. Linguagem de programação: As principais linguagens de programação para web, além do PHP, é o ASP, JSP, Perl, Python, Ruby/Ruby on Rails. Essa questão de linguagem suportada do servidor dependerá muito de como o seu site será programado. Os blogs em WordPress possuem a linguagem PHP, e praticamente quase todos os serviços de hospedagem oferecem suporte à esta linguagem por ser a mais popular de todas.
  3. Limites: É o detalhe que mais precisa ficar atento. Os limites são definidos em 3 itens:
    1. Transferência mensal: Toda vez que uma página é atualizada por um usuário ou quando alguém faz atualização de algum arquivo do servidor, isso requer atualização de dados para mostrar ao usuário o que há de novo. Isso chama-se transferência de dados, e a maioria dos provedores contam isso de forma mensal e possuem um limite X de GB que podem ser usados. Dê preferência a hospedagens que possuam transferência ilimitada (para blogs com muitas visitas) ou, pelo menos, acima de 3GB de transferência mensal (para blogs com poucas visitas).
    2. Armazenamento em disco: É o espaço no HD do servidor que seu blog irá ocupar. Analise com cuidado o espaço e veja se isso está de acordo com o seu blog e o que você pretende postar nele. Um blog de fotografia, por exemplo, precisa de muito espaço (de início, no mínimo de 10GB e com o tempo ir subindo) porque imagens custam espaço, e espaço custa dinheiro. Agora, um blog com poucas imagens por post, 3G é mais do que suficiente para começar. E sempre se atente se o provedor fornece conta de FTP (saiba o que é isso), que é uma forma rápida e fácil de compartilhamento de arquivos entre nossa computador e nosso blog.
    3. Quantidade de domínios: Uma hospedagem pode (ou não) ter vários domínios cadastrados no mesmo espaço (e cada espaço para um domínio é separados por pastinha, assim não compromete outros arquivos). É uma boa ter um serviço de hospedagem que dê a possibilidade de ter outros domínios porque nunca sabemos quando precisaremos de mais um, né? Eu, por exemplo, tenho 3 domínios e 2 uso na minha hospedagem: o meu blog e o meu portfólio, onde guardo vários projetos e arquivos de meus clientes.
    4. Exibições diárias: Algumas redes de hospedagem oferecem planos baseados nos acessos (pageviews) de cada conta. Para um blog pequeno, 2mil acessos diários é mais do que suficiente, enquanto um blog grande (ou com vários domínios vinculados na mesma conta), precisa dar preferência para acima de 10mil acessos diários ou, se possível, ilimitados.
  4. Gerenciamento da área de hospedagem: É um local do qual você acessa por um endereço (fornecido pela hospedagem) onde é capaz de ver todos os dados da sua conta, bem como o que é utilizado, o que não é, acesso direto aos arquivos etc. Os painéis mais comuns são cPanel, o Plesk e o HELM, mas tem provedores que possuem seus próprios painéis. Eu, particularmente, prefiro o cPanel pela praticidade e facilidade de instalação de vários itens (inclusive o wordpress, através de uma ferramenta de instalação automática chamada Fantástico Deluxe).
  5. Bancos de dados: É o local de armazenamento do que é postado em seu blog em sua forma textual. Ao contrário da lógica, nada do que postamos ficam dentro de pastas em nosso servidor, mas sim num banco de dados. Tudo o que você publica, comentários, páginas etc., são armazenados em tabelas (o que ajuda muito no backup, pois é muito fácil de restaurar um blog inteiro!). O tipo de armazenamento mais comum para blogs é o MySQL, gerenciado pelo programinha phpMyAdmin (que já vem instalado no servidor), e nele conseguimos gerenciar o banco de dados e inclusive também criar usuários e tabelas para instalar o wordpress.
  6. Sistema operacional: Você também pode se atentar a isto. Querendo ou não, servidores são máquinas como nossos PCs, porém, mais potentes. Existem servidores com Windows, bem como Linux e cada possui melhores desempenhos para linguagens de programação específicas. Por exmplo, server Windows é ideal para quem possui um site programado em C++, enquanto Linux é mais barata e é menos complicada de rodar PHP (que é a linguagem do WordPress). É o sistema mais comum dos provedores de hospedagem para blogs. Saiba mais a diferença entre os dois sistemas aqui.
  7. Serviço de e-mail: Não adianta nada você ter uma hospedagem maravilhosa sem ter um serviço de recebimento e disparo e-mail, além de precisar possuir protocolo SMTP e um protocolo de download de e-mails para os usuários, como POP3 e IMAP, para caso você queira utilizar seus e-mails em outro gerenciador (como o gmail, por exemplo) para ficar mais fácil. Um serviço de e-mail é muito importante pois, além de você construir e-mail para você utilizar para contato profissional de seu blog, muitos plugins de formulário de contato e reply de comentários fazem uso deste serviço de e-mail da hospedagem para funcionarem corretamente. Portanto, atente-se!

3. O que o CDB recomenda?

Quando você finalmente acha uma empresa de serviços de hospedagem perfeita de acordo com os itens acima, o que deve ser feito logo em seguida é conversar com quem a utiliza para saber se vale a pena e o que ela pode ter sofrido com a empresa e, caso sim, se foi atendida rapidamente e resolvido o caso. Todos nós sabemos que não existe nada perfeito neste mundo, mas o que irá diferenciar se vale a pena ou não é o atendimento ao cliente. Quando o suporte da empresa se preocupa com o cliente e o ajuda a resolver qualquer tipo de situação que possa ocorrer (porque sabemos que imprevistos acontecem), é a melhor coisa que se tem. Pergunte nos grupos de blogueiros e na internet à fora sobre empresas de hospedagem, converse com o chat da empresa e com funcionários. É melhor pecar por informação demais do que por falta delas. E nós, do Coisas de Blogueiras, recomendamos a Nuvem Hospedagem com todo amor. ♥ Fomos muito bem recebidas pela Thais Hipólipo, funcionária da Nuvem, que sempre nos ajudou em tudo o que precisamos! Isso nos deixaram apaixonadas! *u*

O que os clientes da Nuvem falam sobre o serviço?

Nós do CDB reunimos alguns depoimentos de clientes da Nuvem que nos ajudou a tomar a decisão de adquirir essa hospedagem e também pela linda parceria. ♥

depoimento-luadeoutubro Luanna Lima do blog Lua de Outubro.
Onde você conheceu a Nuvem Hospedagem? Através de um grupo de blogueiras onde outras pessoas me indicaram. Por que você escolheu a Nuvem? Porque era a mais em conta, satisfazia (ainda satifaz) todas as minhas necessidades e foi a que mais me passou confiança. Qual é o seu plano de hospedagem? Nuvem 1 – R$14,90/mês Pontos positivos da Nuvem: Ótimo atendimento, estão sempre prontos para te atender e preparados para o seu problema. Não demoram a resolver e são sempre muito educados.

depoimento-makeupwoo Sara Caroline, do blog MakeUp Woo.
Onde você conheceu a Nuvem Hospedagem? No grupo Coisas de Blogueiras.
Por que você escolheu a Nuvem? A equipe foi atenciosa, mesmo sem ter obrigação. Tirou todas as minhas dúvidas e me ofereceu um tempo de teste para a adaptação. Gostei bastante e contratei. Qual é o seu plano de hospedagem? O básico. Meu blog não tem tantos acessos e o básico está sendo ótimo para ele. Pontos positivos da Nuvem: Equipe atenciosa, suporte na hora que precisarmos, sempre a disposição para ajudar.

depoimento-antitese Gabriela Bara, do blog Antíteses.
Onde você conheceu a Nuvem Hospedagem? Em grupos de interação de blogs do Facebook. Por que você escolheu a Nuvem Hospedagem? Porque muitas pessoas usavam no grupo e recomendavam, inclusive donas de blogs grandes e com muitos acessos (que em servidores ruins podem cair). Qual é o seu plano de hospedagem? Nuvem 1. Pontos positivos da Nuvem: Suporte online, contato via redes sociais com o Staff, espaço e transferência ilimitados, painel de controle Cpanel com Softaculous (instalador de aplicativos). Melhor custo benefício. Pontos negativos: Ativei no meu WordPress um plugin que avisa quando o site sai do ar, e tenho recebido alarmes frequentes de que o servidor cai pelo período de mais ou menos 1h entre 00:00 e 3:00. Não é um grande problema para mim que não tenho um blog importante, por isso até esqueci de perguntar ao suporte o que acontece, mas pode ser um incômodo grande.

Editado em 20/04 às 17:10, por Equipe CDB: Esse detalhe do depoimento da Gabi já foi verificado pela Nuvem e tudo já foi testado e averiguado. Foi constatado que o problema não é a hospedagem, mas sim um erro de verificação do plugin do WordPress. A Gabi já foi avisada ^^

depoimento-segredosdageovanna Geovanna Teixeira do blog Segredos da Geovanna.
Onde você conheceu a Nuvem Hospedagem? Eu conheci a Nuvem pedindo dicas para onde comprar o meu domínio. Não queria dores de cabeça e prezei pelo o que soube no “boca a boca”, afinal, essa é a melhor propaganda. Por que você escolheu a Nuvem Hospedagem? O fato de ter alguém para me atender 24h por dia já me deu uma certeza que o meu domínio seria na Nuvem Hospedagem. Eu sou bastante leiga com essas coisas e não queria complicações. Tudo que eu perguntava eles me respondiam na hora, portanto, não tinha como escolher outro meio. Qual é o seu plano de dominio? O meu plano é de domínio é o internacional, paguei via boleto e custou R$29,00. Pontos positivos da Nuvem: Infinitos! Estou in love e compartilho com todo mundo essa minha experiência, afinal, eu realizei o micro sonho de ter um domínio próprio graças a indicações. Pontos negativos: Não consigo achar pontos negativos, e olha que nem é publipost hein? É cliente satisfeita mesmo.

4. Como eu contrato um serviço de hospedagem?

Muita gente faz um bicho de sete cabeças enorme sobre isso. Não gente, isso não é um monstro, hehe. Se atentando nos itens do tópico 2 (com ênfase no 1, 3, 4 e 7 da lista) você pode fazer a contratação tranquilamente. Veja o passo-a-passo a seguir (de acordo com o painel da Nuvem):

  1. [Ver print] Selecione o seu plano de sua preferência;
  2. [Ver print] Selecione a opção de domínio, se você quer registrar um novo, transferir (que equivale ao preço de um novo mas equivale a um ano de renovação) ou até mesmo utilizar um que você já possua só para linkar (através de DNS) com a hospedagem nova;
  3. [Ver print] Selecione a opção de hospedagem, se será mensal, trimestral, semestral ou anual;
  4. [Ver print] Selecione se já quer instalação automática do wordpress ou não, com opção de comentários adicionar, caso queira algo especial, como uma migração do blogger para o wordpress (sim, transferem todo o seu blogger para ti!) ou instalar uma pasta específica;
  5. Finalizar a compra com a forma de pagamento desejada;
  6. Esperar confirmação e liberação de hospedagem;
  7. Ser feliz e blogar loucamente! 3_3

E prontinho! Sua hospedagem é liberada no mesmo dia da confirmação de pagamento! Mas até tudo ficar bonitinho e funcionando é necessário esperar até 3 dias, pois domínios podem demorar cerca de 72h para migrar e fazer vínculo com a hospedagem que você acabou de contratar. Depois disso é só ser feliz!

Ufa! Que post gigantesco senhor GZUIS, hahaha. Mas acredito que tenha valido a pena e espero ter ajudado a esclarecer muitos blogueiros iniciantes por aqui, hehe. Alguma dúvida ou quer compartilhar sua experiência? Comente aqui conosco!

Página 1 de 212