Mundo do Blog - O que você procura acha aqui

sexta-feira, 28 de fevereiro de 2014

Blog do LeoCabral

teste

Posted: 27 Feb 2014 05:42 PM PST

teste

The post teste appeared first on My Blog.

quinta-feira, 27 de fevereiro de 2014

Curso Web Design | Descubra o que é Parallax, uma das grandes tendências do webdesign em 2014

Link to Blog do Curso Web Design - Microcamp SP

Descubra o que é Parallax, uma das grandes tendências do webdesign em 2014

Posted: 27 Feb 2014 05:27 AM PST

Efeitos de rolagem Parallax são divertidos, fáceis de usar e permitem novos caminhos para a criação do design de um site. O resultado final é uma técnica que pode criar uma experiência altamente visual e interativa para os usuários. Com a evolução do HTML, CSS e jQuery, e mais pessoas utilizando conexões de internet de alta velocidade, não é um exagero pensar que muitas técnicas outrora inimagináveis pudessem ser criadas e fazer bastante sucesso no web design atual, como no caso do Parallax.

Mas afinal, o que é Parallax?

Parallax é uma técnica onde camadas de conteúdo e de imagens são projetadas para trabalhar e se moverem juntas. Com essa técnica, as imagens de fundo, de segundo e de primeiro plano são criadas e projetadas para se mover em velocidades diferentes, de modo que criem a sensação de movimento dos elementos na tela.

Parallax pode funcionar com um clique ou uma função de rolagem em que os elementos podem ser movidos para cima, para baixo ou para os lados. Em alguns projetos, todos os elementos se movem juntos, assim parece que você está se movendo de uma tela para a outra. Outros projetos permitem a existência de várias partes móveis, de tal forma que o que vemos na tela são verdadeiras animações em atividade.

O efeito Parallax não é novo. Ele tem sido utilizado há vários anos (pense em cenários de videogames, como o do Mario Bros e gifs animados, por exemplo). O problema é que até recentemente, esses efeitos foram utilizados muitas vezes de maneira simples e até mesmo limitada. A técnica era de difícil criação e designers e desenvolvedores não se interessavam muito por ela.

Mario Bros e o conceito de Parallax: cenário de fundo, criaturas e personagem se movendo em camadas e velocidades diferentes.

Só que a Apple (sempre ela!) mais uma vez ajudou a elevar uma tecnologia tornando-a mais visível e utilizada, ao usar efeitos Parallax no lançamento do iOS 7 no ano passado. E uma grande parte dos designers seguiu o exemplo, é claro, com efeitos de rolagem Parallax aparecendo em toda a web e em uma variedade de aplicações. Mas desta vez a técnica era muito mais refinada e fornecia ao usuário uma experiência muito mais memorável.

2014, o ano do Parallax?

A grande aposta para o sucesso do Parallax neste ano é que ele permite uma ênfase na experiência do usuário. A técnica pode ser usada para criar um site bastante interessante, sem um monte de cliques. Efeitos de rolagem Parallax podem criar uma sensação de mistério para o usuário como uma “história” que se desenrola. Com cada novo movimento, algo novo se desdobra, e assim por diante. Este efeito cria no usuário um desejo de continuar interagindo com a página, o que não é nada menos que espetacular quando pensamos que é isso mesmo que desejamos: mais tempo de permanência dentro do site. Parallax oferece uma abordagem diferente para mostrar o conteúdo e o design, e os designers estão experimentando mais esse conceito atualmente porque:

É divertido;
Cria uma nova e distinta experiência para o usuário;
Incentiva os visitantes a ficarem mais tempo no site;
Apela para o nosso senso de curiosidade;
É uma nova maneira de criar uma história visual;
É um estilo de contar histórias distintas ao mesmo tempo;
Pode ser usado para informar aos usuários o que você quer que eles façam. De clicar em um link para o preenchimento de um formulário ou a compra de um item, os efeitos de Parallax podem levar os usuários a uma ação direta.
Você pode usar efeitos de Parallax para mostrar um produto. Pense sobre os pontos de vista de 360 graus de itens em alguns sites de varejo. Isso pode permitir que os usuários realmente possam ver um item antes de compra-lo.

Grandes efeitos em uma página

Efeitos Parallax trabalham em harmonia com outra grande tendência no web design atual – o projeto de uma única página. Você pode criar diferentes telas de conteúdo que parecem e agem quase como páginas diferentes, mas que são, na verdade, uma única página.

Alguns dos meus sites favoritos de rolagem com Parallax incluem efeitos que contribuem para experiências de visualização distintas. Muitas vezes, a cor vai mudar quando você começa a visualizar novos conteúdos, ou uma troca de imagem ocorre. Muitas vezes, o efeito é utilizado para contar uma história com movimento, utilizando texto, vídeo e imagens, criando uma experiência verdadeiramente interativa.

Dicas antes de fazer seu site em Parallax

Efeitos de Parallax não são para todos os tipos de site. Você precisa saber o que você deseja obter a partir dessa técnica antes de usá-lo apenas porque está "na moda".

O melhor conselho é sempre manter as coisas simples. Decida qual o efeito que você deseja usar e cumpri-lo em todo o site. Fornecer indicações para os usuários se houver qualquer questão de como o site funciona. Usuários apontam na direção certa: as chamadas para a ação devem ser claramente identificadas na tela com instruções fáceis de usar.

Use Parallax para contar uma história. É com certeza a melhor maneira de fazer uso da técnica. Certifique-se de seus efeitos refletem ações que os usuários fariam ao interagir com seu conteúdo.

Esteja ciente do peso do site. Com tanta coisa acontecendo em segundo plano e código, tudo sobre este tipo de design do site deve ser devidamente otimizado. Crie imagens com tamanhos e escalas corretas, mantenha seu código limpo e certifique-se que o seu site carrega rapidamente.

Desvantagens do Parallax

Sites Parallax podem ficar pesados, podem não cumprir algumas exigências de SEO e são muitas vezes incompatíveis com estruturas de design responsivo.

Um site Parallax pesado deve ser evitado. Se o site não carregar rapidamente, os usuários podem não esperar para ver o seu conteúdo. Crie seu site tendo especial cuidado com imagens e efeitos!

Com relação a Search Engine Optimization, a natureza do site em Parallax é tão simples que não há muito que pode ser feito para reforçar a palavras-chave, criar links e contribuir para pesquisas. Como dica, o impulso SEO poderá ser dado através das mídias sociais, porque sites diferentes e criativos tendem a ser mais compartilhados.

Quando se trata de design para mobile, Parallax não é lá essas coisas. Muitas vezes você precisa de uma tela grande para realmente ver os efeitos. E também é uma técnica que funciona melhor para um projeto com um escopo mais limitado. Afinal, com muito conteúdo, ele pode ficar muito poluído ou simplesmente não comportar uma grande quantidade de informações.

Exemplos de sites em Parallax

A seguir, alguns exemplos de sites que utilizam Parallax Scroller, de uma maneira simples ou mais complexa, há exemplos para todos os gostos: eles vão ajudá-lo a compreender melhor a utilização desse recursos para que possa criar seus próprios projetos no futuro:

Sweez - excelente site brasileiro, com vários efeitos e conteúdo distribuído de maneira inteligente.

Life of Pi - Site de divulgação do filme Life of Pi (As aventuras de Pi). Assim como o filme, surpreendente e criativo. Muitas opções de interação com o usuário, informações de bastidores, vídeos, fotos, depoimentos etc. Um primor de exemplo de como os recursos podem ser explorados.

Flash vs HTML - O título já diz tudo. Clique e conheça para tirar as suas próprias conclusões. É show! E não esqueça de votar!

Minha Cidade - O Minha Cidade transforma dados públicos (disponíveis em portais de transparência e demais sites públicos) em visualizações de dados interativas e agradáveis. Assim, você tem muito mais tempo para analisar e aprender sobre pontos fundamentais sobre a sua cidade, como educação, saúde, segurança, transporte etc. Simples e eficaz. Merece uma olhada, e também é brasileiro.

Ratatattoo - Isto não é realmente o que você espera de um site de estúdio de tatuagem. Eles fizeram um ótimo trabalho utilizando imagens em tamanho real e rolagem Parallax para criar uma experiência divertida e bonita.

Instituto Cultural do Google - O Instituto Cultural do Google foi criado para ajudar as pessoas a tomar consciência de diferentes culturas. Eles usam uma linha de tempo para ajudar as pessoas a compreender as diferentes épocas e os diferentes anos em que os eventos ocorreram. Neste site, a navegação é importante porque torna mais fácil de interagir com a linha do tempo e interagir com diferentes reportagens que incentivam a educação de diferentes culturas.

NASAprospect - NASA Prospect foi criado por um grupo de designers e estudantes da Universidade de Dakota do Sul, em colaboração com a NASA e os estudantes do programa Espaço de Arte, nos Estados Unidos. É bem simples, mas tem bastante informação e ilustrações.

Conclusão

Graças a sua natureza simples e divertida, as técnicas de design Parallax são algo que vamos continuar a ver cada vez mais durante este ano. O número de sites que já utilizam alguma forma de ação Parallax está crescendo diariamente. É uma tendência em que a maioria das pessoas aposta e gostam, principalmente para navegar pelo conteúdo e ver o que acontece em seguida.

E você? Gostou da experiência de navegação em Parallax? Tem algum outro site para indicar? Deixe-nos saber nos comentários! Em breve publicarei um tutorial com um passo-a-passo sobre como fazer esse efeito incrível em suas páginas.

Um grande abraço a todos e até o próximo post!

Mundo Blogger

Em busca de Emprego? Jobtonic é a solução!
Como adicionar código CSS através do painel do blogger
Posts do blog na página do facebook com RSS Graffiti
Como as redes sociais podem aumentar a popularidade de um blog?

Em busca de Emprego? Jobtonic é a solução!

Posted: 26 Feb 2014 05:45 PM PST

Mundo Blogger - Templates, Tutoriais, Dicas e Acessórios para Blogger. Olá Amigos, estou aqui hoje para trazer de uma incrível oportunidade que pode ser muito útil a todos. Estou falando da Jobtonic, que é um dos maiores e melhores banco de empregos online da atualidade. Embora muitos ainda não o conheçam, o fato é que o JobTonic tem feito um trabalho incrível e em função(...) Por: Vanessa Confira o artigo original publicado por Mundo Blogger: Em busca de Emprego? Jobtonic é a solução!

[[ Este é apenas um resumo do conteúdo. Visite o Mundo Blogger para ver o artigo completo ]]

Como adicionar código CSS através do painel do blogger

Posted: 20 Feb 2014 01:43 PM PST

Mundo Blogger - Templates, Tutoriais, Dicas e Acessórios para Blogger. Se você tem dificuldade para adicionar código CSS no Blogger, hoje você vai aprender uma maneira mais prática e rápida de adicionar CSS (folhas de estilo em cascata) e poder personalizar melhor o seu blogger. Alguns leitores me relataram que ao instalar algum recurso no blogger, quando precisam aplicar códigos CSS , encontram dificuldades em(...) Por: Vanessa Confira o artigo original publicado por Mundo Blogger: Como...

[[ Este é apenas um resumo do conteúdo. Visite o Mundo Blogger para ver o artigo completo ]]

Posts do blog na página do facebook com RSS Graffiti

Posted: 12 Jan 2014 07:05 PM PST

Mundo Blogger - Templates, Tutoriais, Dicas e Acessórios para Blogger. Se você ainda não conhece o RSS Graffiti, conhecerá hoje, e vai ver como publicar os seus posts recentes automaticamente na sua página do facebook. O RSS Graffiti é um aplicativo que permite que você envie automaticamente os artigos do seu blog para serem publicados na sua página do facebook, através do feed já existente(...) Por: Vanessa Confira o artigo original publicado por Mundo Blogger: Posts do blog na página...

[[ Este é apenas um resumo do conteúdo. Visite o Mundo Blogger para ver o artigo completo ]]

Como as redes sociais podem aumentar a popularidade de um blog?

Posted: 26 Dec 2013 04:19 PM PST

Mundo Blogger - Templates, Tutoriais, Dicas e Acessórios para Blogger. Os hábitos comportamentais na internet são visivelmente mutáveis. Se antes a utilização das redes sociais se restringia em estabelecer relações interpessoais entre os usuários, hoje não só isso, ela oferece uma infinidade de opções, inclusive abrem a brecha para o trabalho de profissionais gestores de redes sociais para a captação de público e estreitamento de(...) Por: Vanessa Confira o artigo original publicado por...

[[ Este é apenas um resumo do conteúdo. Visite o Mundo Blogger para ver o artigo completo ]]

quarta-feira, 26 de fevereiro de 2014

Como criar um programa de Afiliados

Posted: 26 Feb 2014 04:23 AM PST

Criar um programa de afiliados é uma excelente forma de aumentar as vendas dos seus produtos, e ainda conseguir uma publicidade “extra”. Os programas de afiliados são um sistema de benefício mútuo, em que você ganha mais com as vendas, e os afiliados ganham as comissões que você definir. Outra grande vantagem, é que você só paga se existirem vendas (dependendo da forma como definiu o...

Aceda ao nosso site para continuar a ler, clique no título.

terça-feira, 25 de fevereiro de 2014

Resultados do Sorteio: Abril 2013 - WPTotal.com

Resultados do Sorteio: Abril 2013

Posted: 08 Apr 2013 08:14 AM PDT

Olá pessoal, já estamos em abril e é hora de fazer o nosso sorteio mensal de um "pack" composto por uma conta de hospedagem, um domínio e mais de 80 temas premium para wordpress. Ou seja, as coisas necessárias para criar um blog usando o wordpress.

Os Resultados

Como sempre, usamos o random.org para fazer o sorteio da lista de emails subscritos na newsletter. Os resultados foram os seguintes (o vencedor está a verde):

Resultados do Sorteio de Abril

O vencedor já foi contatato e tem até ao próximo dia 30 de abril para receber os seguintes prémios:

1 conta de hospedagem com 5GB de espaço e 400GB de tráfego na Trignosfera
1 domínio .com, .net, .org ou .info
1 conta premium no Elegant Themes que dá acesso a 82 templates para wordpress

Estes prémios têm a duração de um ano e depois o vencedor pode renovar, transferir (no caso do domínio e hospedagem) ou deixar expirar.

Participe também!

Para participar tem que subscrever o wptotal por email. Se ainda não o fez, escreva o seu email, clique em subscrever e siga as instruções que enviamos por email.

Até ao próximo sorteio!

Resultados do Sorteio: Abril 2013

segunda-feira, 24 de fevereiro de 2014

Visual Dicas

Como medir a velocidade do seu site

Posted: 23 Feb 2014 03:57 PM PST

Como está a performance do seu site ou blog?

Como sabemos, todos usuários de sites e aplicativos, e até mesmo os mecanismos de busca, tipo Bing ou Google, preferem as páginas que carregam mais rápido. Portanto a velocidade de carregamento de um site deve ser levado muito a sério pelos desenvolvedores de sites e por nós blogueiros.

Existem vários serviços para medir a velocidade de sites. Mas neste artigo vamos apresentar uma ferramenta fantástica para análise da velocidade de carregamento do seu site, o Pingdom Tools.

Com uma interface pra lá de bonita, esta ferramenta mede o tempo de cada requisição, monstrando o gargalo no carregamento, ou seja, quais requisições demoram mais ou menos para carregar. Também faz recomendações para correção utilizando os métodos do PageSpeed Insights do Google (falaremos sobre esta ferramenta em outro artigo).

Utilizando o Pingdom Tools

Acesse o site: http://tools.pingdom.com/

Digite ou cole o endereço da home ou de uma página qualquer do seu site (não precisa digitar http://)

Como teste, vamos abrir uma página do nosso blog:

http://visualdicas.blogspot.com.br/2014/02/prettify-syntax-highlighter-no-blogger.html

Desta forma, colamos o link no campo para a URL. Clique em [Settings] para definir o local do teste (opcional).

Desmarque a caixa de seleção [Save test and make it public] caso você não queira deixar público a análise. Escolha qual o servidor local que será realizado o teste. Escolhemos Dallas, USA (opcional – você pode testar sem definir o local). Clique no botão [Test Now].

Pronto. Agora observe as informações. Primeiro, vemos que a nossa página é mais rápida que 35% de todos os sites testados. Observamos também que o tempo para carregar a página foi de 4,50 segundos pra 574 requisições (imagens, links, scripts, etc) em um total de 3,8MB. São informações importantes para você ir entendendo melhor o seu site, e cada vez mais otimizando-o.

Abaixo da tela, temos todos os tempos de cada requisição. Assim podemos verificar quais requisições demoram mais e reduzem a performance de carregamento da página.

Posicionando o mouse sobre o gráfico de uma requisição podemos saber o porque da demanda de tampo para o carregamento. Temos também o tamanho e o tipo da requisição.

Muitas vezes diminuindo o tamanho de uma imagem, ou substituindo o local onde ela está hospedada, ou eliminando um script desnecessário, podemos ir eliminando os gargalos do carregamento das páginas e melhorando o desempenho do site.

No final da página do aplicativo, você tem a legenda das cores que indicam os diferentes estágios de tempo de uma requisição:

DNS – tempo que o navegador procurar a informação do DNS
SSL – tempo para a perfromance SSL
Connect – tempo para o navegador conectar-se ao servidor onde o site está hospedado
Send – tempo para enviar dados do navegador ao servidor
Wait – tempo que o navegador espera os dados do servidor
Receive – tempo que o navegador está recebendo os dados do servidor

Você também terá a legenda dos tipos de requisições: documento HTML, código JavaScript, arquivo CSS, arquivo de Imagem, Texto e Outros, como o arquivos em flash por exemplo. Também poderá encontrar tipos como:

Warning – são requisições que precisaram de várias tentativas para carregar ou não puderam ser carregadas.

Redirect – são requisições que precisaram ser redirecionadas.

Quando possível, tanto as requisições Warning como as Redirect devem ser corrigidas ou eliminadas, se deseja otimizar a página do seu site. Para isso você deverá identificá-las no contexto geral da página, texto e imagens, códigos HTML com scripts e layout.

Muitas vezes, os problemas são exclusivamente da design do layout do site, e se você não tem muito conhecimento de programação, não vale a pena ficar procurando estes erros. Se a página estiver muito lenta em função do layout, o melhor a fazer é substituí-lo totalmente.

Avaliação geral de performance

Para fazer uma correção geral da performance da página (ou do site como um todo), clique no botão [Performance Grade].

Você então tem uma grade da performance da página do seu site.

As recomendações que aparecem em vermelho (números baixos) devem ser corrigidas. Considere corrigir as que estão entre os números 50 a 75 (laranja). Já as que estão acima de 75 (verde) não precisam necessariamente ser corrigidas.

Para saber o que corrigir, clique na seta que fica ao lado da barra e siga as orientações. Faça as alterações apenas quando for possível. Muitas requisições são fundamentais e não podem ser eliminadas ou corrigidas.

Faça pesquisas e estude cada orientação antes de fazer qualquer alteração no seu site. Embora o texto esteja em inglês, é bem fácil a sua tradução. Procure mais informações em fóruns de discussão, sites de SEO, etc.

ATENÇÂO: Antes de qualquer alteração no site faça um backup do seu site.

Bem agora é com vocês. Espero que possam melhorar cada vez mais a performance dos seus sites e blogs….

byALF

sábado, 22 de fevereiro de 2014

Dicas Para Poupar Dinheiro e Otimizar a Hospedagem do Seu Site - WPTotal.com

Dicas Para Poupar Dinheiro e Otimizar a Hospedagem do Seu Site

Posted: 21 Feb 2014 05:33 PM PST

A qualidade do alojamento de um site é fundamental para o sucesso desse site. Ninguém gosta de sites lentos que ficam offline quando mais precisamos dele. Por outro lado, um serviço de qualidade é caro e nem sempre o responsável pelo site pode suportar as despesas.

Neste artigo vou sugerir algumas coisas que vão ajuda-lo a reduzir custos com a hospedagem ou pelo menos evitar upgrades aos serviços que tem contratado.

Alojamento

Quero começar por dizer que não sou um "expert" no área, mas ganhei experiência na área da otimização a alguns meses atrás numa altura em que vários problemas pessoais me obrigaram a cortar nos gastos. Na altura uma das principais despesas era a hospedagem, a factura no fim do mês rondava os 200 euros no total (era cliente de 3 empresas diferentes). Como não tinha alternativa, fui obrigado a aprender a otimizar melhor os meus sites para atingir 3 objetivos: poupar dinheiro, usar apenas uma empresa e manter o mesmo nível de qualidade.

Todas as sugestões que vou fazer são baseadas na minha experiência, elas podem não servir para todos os sites. Antes de fazer alguma alteração, analise os prós e contras da mudança.

Otimização dos Sites

Eu sou um grande fã do WordPress e uso-o em quase todos os meus projetos porque serve para quase tudo (desde blogs, passando por lojas até fóruns). A primeira coisa que fiz foi otimizar os meus sites, desde a base de dados (banco de dados) até ao próprio tema. Algumas coisas que podem ser otimizadas:

Base de Dados:

Limpe a base de dados com um plugin com o WP-Optimize. É muitos casos é possível poupar vários megabytes de espaço e quanto mais pequena a base de dados for, melhor.

Plugins:

Usava, sem querer, plugins que podiam fazer a mesma coisa. Por exemplo, se você usar o WordPress SEO, não tem que usar outro plugin para criar um menu de navegação (breadcrumb) e outro para gerar as tags para as redes sociais. Este plugin já faz isso tudo, não é necessário adicionar mais "lixo" a instalação do WordPress.

Se usar algum plugin para fazer a contagem do número de visualizações dos posts, posts mais vistos ou do número de usuários online, considere deixar de usa-los. São plugins que normalmente consomem muitos recursos, um problema muito grande principalmente quando está numa hospedagem partilhada ou tem picos de visitantes online.

Não se esqueça também de usar os plugins mais populares (já estão bem testados) e evitar aqueles que estão desatualizados (por razões de segurança).

Tema:

Abra o seu site, veja e remova tudo o que está a mais. Comece primeiro pelo mais importante: aquilo que é gerado automaticamente (widgets, funcionalidades, informação, etc).

No meu caso, usava um plugin em 3 sites que permitia classificar as postagens. Na lateral dos sites tinha um widget "top" das postagens mais bem classificadas e depois de fazer uma pequena analise reparei que esse widget deixava as páginas mais lentas e consumia muitos recursos por carregar muita informação da base de dados. É verdade que o widget não consumia muitos recursos por usuário, o problema aparecia quando o site recebia 1000 ou 2000 usuários ao mesmo tempo vindos do Facebook.

Aproveite também para otimizar os ficheiros do tema (imagens, javascript, css, etc). Em 2010 escrevi um artigo sobre a otimização das imagens e ficheiros de um tema ou site.

Cache (Importante):

O WordPress usa a base de dados para guardar a informação do seu site. Os posts, configurações, widgets, etc, ficam nessa base de dados e tem que juntar essa informação sempre que alguém abre uma página. Se você tiver apenas uma pessoa no seu site, não tem problema, mas imagine que recebe 20, 100 ou 1000 pessoas de uma só vez. O WordPress vai ter que criar as páginas para todas essas pessoas ao mesmo tempo... e o mais provável é que esgote os recursos do sistema.

A solução é usar um plugin que faça cache das páginas. Em poucas palavras, o que o plugin de cache faz é guardar as páginas já criadas e mostrar elas sempre que alguém abre uma página. No caso de estar a receber tráfego de uma rede social, apenas a primeira visita vai ver uma página "nova", criada naquele momento. Todas as outras pessoas vão ver a página que já está guardada, ou seja, o WordPress só teve que criar essa página uma vez.

Usar um plugin de cache é quase obrigatório. É possível reduzir muito o consumo de recursos fazendo isto. O único problema é que como os usuários estão a ver páginas criadas a algum tempo atrás, o conteúdo pode não estar totalmente atualizado (comentários, alterações no post, etc). A solução é definir que a cache seja limpa a cada X minutos (ou horas/dias) ou sempre que uma alteração seja feita.

Recomendo o plugin W3 Total Cache. É um plugin complexo, mas só tem que ativar as opções "Page Cache" (guardando para o disco - Disk) e a opção "Browser Cache". Se preferir um plugin mais simples, use o WP Super Cache.

Otimização do Alojamento

Esta parte é apenas para quem tem controle sobre a hospedagem ou está numa VPS ou servidor dedicado. Se está num serviço de hospedagem partilhada é praticamente impossível fazer alguma coisa.

Depois de ter feito a otimização dos sites, virei-me para o alojamento, escolhi uma empresa (a PTServidor) e falei com eles para saber o que podiam fazer para melhorar a performance da VPS que tinha contratado. Depois de várias conversas e testes, sugiram que eu passa-se de uma VPS "tradicional" (usando o Apache, cPanel, etc) para uma nova VPS com NGINX no lugar do Apache, sem painel de administração e com outro tipo de cache (APC). Devo de dizer que fiquei um pouco "assustado" com a ideia porque não tinha experiência nenhuma usando comandos e o terminal do meu computador, mas aceitei e a verdade é que não estou arrependido.

No final fiquei com uma VPS com os mesmos recursos, mais barata e muito bem otimizada ao ponto de conseguir receber 3 ou 4 vezes mais visitas que a VPS antiga.

Como é óbvio só consegui isto porque escolhi uma empresa com um suporte que realmente ajuda os clientes. O meu plano inclui a manutenção da VPS, por isso só tenho que me preocupar com os sites, o resto é tratado por eles.

A minha sugestão é que você escolha uma empresa com um bom apoio ao cliente, numa língua que você domine (por exemplo, evite empresas dos EUA se não sabe falar inglês) e que tenha um bom feedback na internet. Depois fale com eles e tente encontrar uma boa solução. Ao escolher lembre-se sempre que é preciso pagar se quiser receber qualidade.

Serviços Externos

Nos últimos tempos vários serviços externos de otimização foram criados. O Cloudflare (ler: O que é o Cloudflare e Como Usar o Cloudflare) é uma dessas empresas e oferece otimização do site, poupanças no tráfego/recursos, segurança e proteção contra ataques.

O Cloudflare não é um serviço perfeito, as vezes tem problemas, mas para mim tem sido muito útil. Uso o serviço principalmente para fazer cache das imagens e fazer também cache das páginas no momentos em que tenho muito tráfego. Para ter uma ideia, só em tráfego consigo poupar cerca de 4 ou 5 terabytes todos os meses:

Cloudflare Savings

Embora fosse possível usar o serviço gratuito, optei por fazer o upgrade para o plano "Pro" em 3 sites. Pago 30 dólares por mês, por opção própria, como "contribuição" para o serviço que prestam.

Para quem usa WordPress, existe uma alternativa apenas para as imagens: a opção "Photon" do plugin Jetpack (criado pela empresa por trás do WordPress). Esta funcionalidade "hospeda" as imagens do seu site no servidores do WordPress.com enquanto o plugin está ativo, resultando em poupanças no tráfego do site.

Outro serviço externo que utilizo é a MaxCDN. É um serviço pago e caro, mas a algum tempo atrás aproveitei uma promoção e comprei vários terabytes de tráfego. Como a velocidade da MaxCDN é fantástica, uso o serviço para o CSS e JS dos sites. São ficheiros importantes e leves, não necessitam de uma CDN, mas como já tinha gasto o dinheiro, continuo a aproveitar. Os meus sites acabam por ter uma velocidade de carregamento fantástica.

Para terminar, deixo uma última recomendação que não pode ser usada em conjunto com os 3 serviços que falei (Cloudflare, Jetpack e MaxCDN): Google PageSpeed Service. É um serviço da Google, em estado Beta (já testei e é bom) e gratuito enquanto está em testes. A performance é boa porque usa a rede de servidores da Google e é capaz de otimizar html, css, js e imagens mas pode ser dificil de configurar para os menos experientes. Se quiser testar, preencha o formulário no site deles e talvez tenha a sorte de ser convidado para o programa.

Resultado Final e Conclusões

Depois de tanta otimização e alteração, consegui atingir os meus objetivos. Mantive a qualidade dos sites em termos de velocidade e uptime e consegui poupar muito dinheiro. Veja a comparação:

Antes:

Despesa de 200 euros por mês;
3 empresas/serviços de hospedagem;
Problemas com os "picos de tráfego";
Consumo elevado de tráfego e lentidão em algumas horas do dia;

Depois:

Despesa de 60 euros por mês para a hospedagem (menos 150 euros) e 30 dólares opcionais para o Cloudflare;
1 empresa de hospedagem com suporte permanente em português;
Consigo ter 3 ou 4 mil pessoas online sem problemas;
Redução de mais de 4 terabytes de tráfego por mês;

Durante um ano consigo:

Poupar cerca de 1800 euros;
Poupar cerca de 50 terabytes de tráfego;
Dedicar o meu tempo a coisas mais importantes;

Neste momento, este é o esquema por trás de quase todos os meus sites:

Esquema Alojamento

Concluindo, para mim a experiência foi muito positiva. Custou, deu trabalho, mas no final valeu a pena.

Espero que este artigo seja útil!