Performance e Velocidade

Bom dia, boa tarde e boa noite.

Hoje vamos falar sobre um assunto importante, mas faremos de maneira rápida, pois existe um programa muito bom sobre isso no site do JovemNerd que você pode ouvir para aprender mais.

A velocidade de carregamento do site é importante tanto para seu posicionamento em buscadores (Google) quanto para experiência dos seus usuários.

  1. Para os usuários, é frustrante esperar um site carregar por muito tempo e geralmente, quando demora mais de 3 segundos o usuário abandona seus site.
  2. Para o Google, não é interessante apresentar aos seus usuários um site que provavelmente eles irão abandonar.

Código:

Minificar o código ou Minify code.
Essa é a prática de diminuir os arquivos Javascript e CSS, dessa forma somente um arquivo seria carregado gerando um acesso mais rápido. Fazendo isso, se você tiver 3 arquivos Javascript e 4 de CSS, você conseguiria reduzir para 1 Javascript e 1 CSS. Se você usar um CMS como WordPress e Joomla, existem componentes e Widgets que fazem isso automaticamente.

Compressão GZIP:

No painel de controle de alguns CMS’s você pode habilitar esta funcionalidade. A compressão GZIP faz que a página seja carregada mais rapidamente pois ela será comprimida antes de chegar ao navegador. É importante acompanhar o desempenho do servidor para ver se realmente está compensando o usar o GZIP.

Imagens:

Elas são importantes para o site e otimizá-las pode reduzir muito o tempo de carregamento das páginas. Em alguns casos podemos compactar imagens em até 60% sem perder qualidade. Duas ferramentas online para fazer esse serviço são o TinyPNG e o TinyJPG, eles limpam o ‘lixo’ das imagens e compactam.

Dica:
Você pode definir largura e altura das imagens no HTML, mas isso não quer dizer que uma imagem grande vai ficar pequena de verdade, por exemplo: Uma imagem de 400 X 400px em 20 X 20px. O tamanho em KBs será o mesmo.
Para melhorar o carregamento das imagens, já as deixe no tamanho que serão utilizadas.

Ferramentas online para comprimir imagens:

  1. https://tinypng.com/
  2. http://www.jpegmini.com/main/shrink_photo?test_cookie=1
  3. https://kraken.io/web-interface

WordPress:

Se o seu site foi feito em WP, temos algumas opções de automatização das otimizações citadas cima.
Dois plug-ins que vão nos ajudar:

  1. https://wordpress.org/plugins/tiny-compress-images/
  2. https://br.wordpress.org/plugins/autoptimize/

Links importantes:

NerdTech03 – Perfomance e Velocidade

Alura – Site com cursos na área de otimização

Ilustrando as internets: saiba mais sobre essa tendência

Falai pessoal, beleza?

As ilustrações estão tomando conta da internet desde meados de 2015. Designers estão criando websites ilustrados de todas as formas, desde grandes ilustrações digitais até simples traços feitos à mão. Essa tendência só irá aumentar nos próximos meses, pois ilustrações ajudam muito a aumentar a sensação de design personalizado (mesmo quando o design não é).

Aqui vão algumas dicas de como usar ilustrações no seu design.

ILUSTRAÇÕES PARA SITES AULA 1

Ilustrações são uma forma versátil de criar um design personalizado. Desde imagens feitas à mão, elementos, letras, tudo que envolva uma imagem totalmente ilustrada ou simplesmente um rascunho já deixa o site com um layout único. Essa é uma das razões da popularidade das ilustrações.

concept

Mas existem muitas outras razões para os designers embarcarem nessa tendência:

  • Ilustrações permitem que os usuários se familiarizem com sua proposta, pois seu site não utiliza fotos de pessoas reais.
  • Existem detalhes que só podem ser atingidos através de um desenho.
  • Ilustrações conseguem juntar realidade e imaginação e criar um design extraordinário.
  • Personalizar fica mais fácil quando você está criando os elementos de arte.
  • Ilustrações são geralmente coloridas e isso já te coloca na tendência de sites grandes e chamativos.
  • Essa técnica é útil mesmo quando você não é um ilustrador graças à kits de designs que podem ser comprados e vem com muita coisa para ser usada em seu projeto.
  • Ilustrações podem assumir muitas variações de estilos, desde rascunhos até imagens mais elaboradas geradas em programas feitos para artistas digitais.

Continue reading “Ilustrando as internets: saiba mais sobre essa tendência” »

Redirecionar a Url do site com ou sem ‘www’ usando o .htaccess

Então você precisa que seu site seja acessado com ou sem o ‘www’?

Se você pensa que não precisa, pense de novo, pois não fazer isto leva os buscadores a considerar o site como dois lugares diferentes e isso pode gerar problemas.

O jeito mais rápido de resolver isso é fazer o redirecionamento para uma das opções. Na verdade não importa se usamos ou não o www, mas você precisa escolher.

Para quem usa servidor com Apache é possível usar o arquivo .htaccess para fazer estes redirecionamentos. Este arquivo fica no diretório raiz do servidor e você pode editá-lo com seu bloco de notas.

Os códigos são esses (lembrem de adicionar seu domínio):

Redirecionar de www a sem www

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.(.*) [NC] RewriteRule ^(.*) http://%1/$1 [R=301,L]

Redirecionar de sem www a com www

RewriteEngine On
RewriteCond %{HTTP_HOST} ^dominio.com
RewriteRule ^ http://www.dominio.com%{REQUEST_URI} [L,R=301]

Caso você use hospedagem Windows onde não há htaccess, vá até a página default.asp existente na raiz do seu site e coloque a seguinte instrução:

<% URL = Request.ServerVariables("SERVER_NAME") Select Case URL Case "nomedosite.com.br" Response.Redirect ("http://www.nomedosite.com.br/default.asp") End Select %>

Taxa de Rejeição, como entender – Parte 1

E ai pessoal, beleza?

Eu ia fazer um único post sobre o assunto, mas infelizmente o texto ficou grande e não quero jogar muita informação para vocês absorverem. Então, hoje a gente vai tratar de uma parte importante sobre as Taxas de Rejeição: Como entender as taxas e identificar se elas são ruins.

Semana que vem vou postar a segunda parte mostrando como utilizar isso a seu favor.

Continue reading “Taxa de Rejeição, como entender – Parte 1” »

13 Mitos sobre trabalhar como Freelancer

Muitos webdesigners e programadores tem uma ideia errada sobre como é realmente trabalhar como freelancer. Ao contrário do que a maioria pensa, ser freelancer não é trabalhar de pijama e na hora que você quiser.

Em algum momento da carreira, todo profissional da nossa área considera a possibilidade de trabalhar como freelancer. Antes que você tome essa decisão, existem algumas coisas que precisam ser levadas em conta.

Continue reading “13 Mitos sobre trabalhar como Freelancer” »

Microsoft Edge: O que os webdesigners precisam saber

Essa semana a Microsoft apresentou seu novo browser, o Edge, que era conhecido anteriormente como Projeto Spartan.

Muito se falou sobre a capacidade dele de adicionar anotações pessoais em websites. No entanto, esses recursos são destinados a usuários comuns, os webdesigners irão usar o navegador de uma forma bem diferente; Enquanto os webdesigners vão esperar para adotar o Edge como navegador padrão, a maioria dos programadores deve usá-lo para testes de código.

Continue reading “Microsoft Edge: O que os webdesigners precisam saber” »

3 princípios básicos do design responsivo que você deve dominar.

Há alguns anos atrás, era relativamente fácil projetar e construir websites. Os sites eram mais simples, eram vistos em desktops e laptops com pouca variação de tamanhos de tela. Hoje os dispositivos móveis e smartphones evoluíram a experiência de navegação dos usuários, um site pode ser visto em um tablet, um Iphone ou em qualquer tamanho de tela disponível no mercado.

Dessa forma como você garante que o seu site abra corretamente em todos os tipos de dispositivos e tamanhos de tela?

Continue reading “3 princípios básicos do design responsivo que você deve dominar.” »

Como construir um Logotipo de sucesso.

A logomarca O logotipo é o elemento mais importante de toda empresa e costuma ser pensado antes mesmo da empresa existir formalmente.

Infelizmente não existe uma receita para a criação do logo perfeito e sempre vemos criações de qualidade questionável (até mesmo em empresas líderes).

Com isso em mente, preparamos algumas dicas que consideramos essenciais para que você crie trabalhos eficazes e que se tornem referência de estilo e criatividade.

1. Crie sua lógica de trabalho

Pessoas organizadas são normalmente as que menos se estressam. Ter uma lógica de trabalho eficiente é algo que não se aprende na faculdade. Cada pessoa possui uma sistemática de trabalho própria. No entanto, alguns pontos são comuns para a grande maioria dos designers.

Continue reading “Como construir um Logotipo de sucesso.” »

5 dicas para todo Web Designer decente

Todos sabem automaticamente o que faz um site ser ruim: Musiquinha tocando no fundo, degradê, layouts superlotados. Estes incômodos podem ser facilmente corrigidos tendo os fundamentos de design em mente da mesma forma que os designers profissionais e artistas fazem.

Grandes sites conseguem unir forma e função. Na verdade, os sites bem desenhados são vistos com mais confiança pelo usuário. Então, aqui estão cinco fundamentos para te ajudar a manter o design de qualidade que você está procurando.

Continue reading “5 dicas para todo Web Designer decente” »