Zaez – Comunicação Digital Welington Sampaio, Autor em Zaez

WebP revoluciona imagens na internet

25 de julho de 2014 sem comentários em Desenvolvimento, Frontend, Internet por Welington Sampaio

Google revoluciona novamente, desta vez foi desenvolvendo um novo formato de imagens chamado WebP. Mas você pode estar se perguntando o que uma nova extensão de imagens pode ter de tão diferente que esta revolucionando tanto?! É simples, ela usa uma nova forma de compressão que reduz cerca de 25-34% o tamanho do arquivo. Acompanhe esta matéria que você entenderá melhor o poder do WebP e porque grandes portais estão correndo para utilizar este novo formato.

A história do WebP ( pronuncia-se “weppy” ) se inicio quando a gigante das buscas comprou a On2 Technologies em 2010, empresa que desenvolvia Codecs de Videos ( leia ) como exemplo o VP8, estes codecs serviram como base para a criação do WebP.

O ponto forte do WebP é conseguir taxas de compressão maiores do que o JPEG sem necessariamente degradar a qualidade da imagem, suportando transparências (alpha channel, como o PNG) e animações (como o GIF, só que com 24 bits em vez de 8 bits), em arquivos de até 16384×16384 pixels. Ainda assim, o tamanho do documento final é menor quando comparado a um arquivo PNG (algo impressionante, considerando os bits adicionais da camada de transparência).

É importante lembrar que o WebP não foi desenvolvido para quem trabalha com imagens em altíssima resolução, mas sim para diminuir o tráfego de dados ao carregar páginas da web. Padrões de web são difíceis de mudar da noite para o dia e, se o novo formato vingar, veremos ele ser implementado aos poucos lado a lado com o JPEG, formato padrão atualmente.

Exemplo de aplicação com camada alpha

Agora que atendemos um pouco mais sobre o que realmente é o WebP, vamos aos cálculos e ver qual a real vantagem da utilização deste formato.

Com base nos dados fornecidos pelo Instagram ( veja ) vamos fazer as contas. O Instagram tem 200 milhões de usuários ativos por mês com média de 1,6 bilhões de imagens curtidas por dia ( numero incríveis ).

Então fui até meu instagram e peguei uma imagem, com o tamanho de 85kb, se temos 1,6B de imagens curtidas subentende-se que foram visualizadas pelo menos 1,6B de imagens diferentes por dia, gerando tráfego da internet.

Efetuando uma conta rápida teremos 136000Gb de imagens por dia ( 85kb * 1,6B fotos * 10^-6 ).
Verificando os preços fornecidos pela Microsoft Azure ( veja ), temos um custo de $0.05/Gb.
Logo 136000 * 0.05 = 6800 dólares por dia apenas de tráfego das imagens curtidas.

Então converti a imagem para o formato WebP através deste link, e obtive um tamanho de 43kb, cerca de 50% de redução. Então vamos aos cálculos…
(43kb * 1,6B fotos * 10^-6) = 68800Gb * $0.05 = 3440 dólares por dia, uma redução de 3360 dólares, que ao fim de um ano chega a incríveis $1,226,400.00

Agora vemos a incrível revolução. E a Zaez já trabalha e temos experiência com estes formatos. Confira as imagens realizadas para o cálculo, abaixo. (Utilize o Chrome ou Opera para melhor visualização)!

imagem jpeg ( 85kb )	imagem webp ( 43kb )

Fontes: CanalTech

designer drawing website development wireframe

5 motivos para usar Wireframe

24 de julho de 2014 1 comentário em Desenvolvimento, Frontend por Welington Sampaio

Há algum tempo atrás estive em algumas reuniões que a pauta do job era o lançamento de um website. E em uma dessas reuniões foi sugerido, pular a etapa de apresentação do wireframe e irmos diretamente para a criação do design. Esta sugestão surgiu logo após alguém ter falado, “o cliente não entende o que são wireframes” e pular esta etapa iria nos deixar mais próximos do lançamento do website. Mas esta era uma péssima sugestão.

Primeiramente, vamos entender o que são wireframes, para depois falarmos de sua importância. Para os que pretendem construir um site de qualquer tipo, tamanho ou forma, wireframe é a base sobre a qual deve ser construído. Wireframe geralmente tem sido determinado por um mapa do site e/ou gráfico de páginas e fluxo de navegação, na linha do tempo de um projeto web vem entre a arquitetura local e a fase criativa de design.

Existe várias formas de se descrever um wireframe, mas a mais conhecida acredito que seja o termo: Desenho preto e branco onde deverão ir as informações. Sendo mais descritivos podemos dizer:

Wireframes são layout preto e branco simples que descrevem o tamanho e posicionamento específicos dos elementos de uma página web, recursos do website, áreas de conversão, navegação e interatividade.
Eles são totalmente sem cores, opções de fonte, logotipo e qualquer outro elemento real de design, sendo de uso específico para a estrutura de um website.
Costumamos dizer que são parecidos com planta baixa de uma casa, onde podemos ver facilmente o posicionamento da estrutura, quartos, sala e cozinha, porém sem qualquer tratamento de um designer de interiores.

Veja um exemplo de um wireframe e entenda as semelhanças:

Imagem demonstrativa da Internet

Somente através desta explicação podemos ver a real importância de um wireframe em um projeto, se tornando o mapa base para qualquer processo visual no decorrer do projeto. Ou você moraria em um prédio que não foi criado uma planta baixa, antes de ser construído? Foi pensando nisso que e criei uma lista para exemplificar importantes razões do uso de um wireframe. Confira logo abaixo:

1. Visualize a arquitetura do Website

Um mapa ou fluxograma do site é abstrato demais, especialmente os que são muito grandes e complexos. Com base no mapa/fluxograma o wireframe inicia o primeiro processo visual concreto para o projeto. Transformando o abstrato em algo real e tangível. Esta etapa se assegura que todas as informações estão no projeto visual.

2. Permite esclarecimento de recursos para o site

Em muitos casos, os clientes podem não entender o que você quer dizer quando diz “slideshow dinâmico”, “feeds de noticias”, “integração com google map”, “filtragem de produtos”, “caixas de luz”, e centenas de outros tipos de recursos. Afim de enquadrar características específicas do projeto em um site, fornecer uma comunicação clara para um cliente como esses recursos funcionarão, onde viverão na página e qual a utilidade que pode realmente ter.

Às vezes você pode ficar indeciso para decidir utilizar um recurso ou outro, sem saber qual recurso encaixaria melhor, o wireframe poderá ajudar na decisão. Vendo os recursos sem qualquer influência criativa, permite esclarecer as duvidas entre os recursos e selecionar o que melhor de adapta à estrutura do projeto. Restando ao cliente se concentrar em outros aspectos igualmente importantes do projeto esclarecendo todas as expectativas quanto aos recursos que serão executados.

3. Melhora a usabilidade do frontend

Este é um dos aspectos mais importantes de todo o processo de frontend. Criação de wireframes melhora a usabilidade do frontend em mostrar os layouts de páginas em seu esqueleto. Obriga a equipe a olhar objetivamente à usabilidade de um website, caminhos de conversão, os nomes de links, a colocação de navegação e posicionamento de recursos. Wireframes pode apontar falhas em sua arquitetura ou como uma característica específica pode funcionar. E isso é uma grande coisa.

4. Ajuda a tornar o processo de design interativo e exato

Em vez de tentar combinar aspectos, funcionalidades, layout, marca do site e muita criatividade em uma única etapa, wireframe garante que esses elemento serão levados um de cada vez para aprovação do cliente. Imagine desenvolver um layout completo de um homepage se atentando aos detalhes de uma boa criação, e quando o atendimento envia para a aprovação do cliente o cliente retorna dizendo que a logo deve ficar no “meio e brilhar” todo o processo de criação foi perdido e os custos de alteração e re-criação ficam mais caros, no entanto se utilizado wireframe podemos reduzir a aprovação em modificar um arquivo em p&b simplificado.

5. Experiência mostra que funciona

Construir um site é um processo. Wireframe é uma dessas etapas do processo web que não deve ser ignorada, assim como você não iria construir um apartamento sem um projeto, ou viver nele sem decoração. Cada etapa tem um lugar importante em um processo maior.