Entre em contato

Enviar Mensagem

Mensagens Categorizado: Frontend

Integração Contínua
O valor da integração contínua 3/4

Continuando nossa série de artigos sobre os benefícios da utilização de integração continua no ambiente de desenvolvimento, veremos como ela melhora a visibilidade do projeto e estabelece uma maior confiança no produto sendo entregue ao cliente.

Melhorando a visibilidade do projeto através do CI

Integração continua provê a habilidade de identificar tendências e tomar decisões mais eficazes, ajudando a prover a coragem para inovar nas melhorias. A maioria dos projetos sofre quando não existem dados reais ou recentes para embasar decisões, então todos se baseiam no bom senso. Tipicamente, membro dos projetos coletam essas informações manualmente, tornando o processo cansativo e demorado. O resultado é que a informação, muitas vezes, nunca realmente é obtida.

Ao utilizar a integração continua, os benefícios na visibilidade do projeto permitem:

  • Decisões eficazes: Um sistema de integração continua pode prover dados em tempo real da build mais atual, contendo seu status e suas métricas de qualidade. Alguns sistemas de integração ainda podem mostrar taxas de erro e conclusão de funcionalidades.
  • Identificar tendências: Uma vez que integrações ocorrem freqüentemente em um sistema de integração, a habilidade de identificar tendências no sucesso ou falha de uma build, alteração na qualidade da aplicação e outras informações rotineiras se torna possível.

Aumentando a confiança do produto através da integração continua

Em resumo, a aplicação de práticas de CI podem aumentar a confiança na produção de um software. A cada nova build, a equipe sabe que testes são executados para verificar comportamento da aplicação, que padrões de design e programação são alcançados e que o resultado é uma solução comprovada.

Sem integrações frequentes, algumas equipes podem se sentir sufocados, uma vez que eles não sabem quais os impactos que uma modificação no código pode causar. Uma vez que um sistema de CI avisa quando alguma coisa dá errado, membros da equipe de desenvolvimento ficam mais tranquilos em realizar modificações. A utilização de um sistema de integração continua encoraja uma base primária onde todos os recursos do software são construídos. Existe uma maior confiança na acuracidade da solução sendo desenvolvida.

Com tantos beneficios em sua utilização, o que previne então, que equipes utilizem práticas de integração continua no desenvolvimento de suas aplicações? Freqüentemente, é uma combinação de fatores, os quais veremos na ultima parte de nossa série sobre o valor da integração continua. Fique ligado!

TesteAB-Zaez
O que é Teste A/B?

Seus resultados são obtidos de que maneira, qual o método que você utiliza para alcançar um público especifico, com a mensagem certa? Não sabe? Calma, você conhece o Teste A/B?

O que é Teste A/B

O teste /AB é um método bem simples, com o nome bem explicativo, que pode te ajudar a encontrar o motivo certo de certas campanhas e ações darem certo e outras nem tanto. Vamos por partes, Teste A/B nada mais é do que um teste entre duas páginas, campanhas, imagens, seja o que for com o mesmo conteúdo mudando apenas alguns itens entre um e outro.

Essas pequenas alterações podem ocorrer em diversos lugares na sua página em questão, pode mudar alguma cor, algum elemento, texto, afinal a página A (original) continua como está desde a criação, e a página B (secundária), será onde as alterações ocorrem.

testes-ab

O principal objetivo dessas páginas, é gerar métricas diferentes, afinal cada página terá o seu público aleatório para que possamos mensurar a ação desses usuários frente a diferentes tipos de informações, elementos visuais e textuais, como será a reação de cada indivíduo referente a essas diferenças. Posteriormente, esses dados serão analisados, onde é feito um cruzamento identificando pontos fortes e fracos relacionando as páginas A/B.

Na Prática

Um exemplo clássico, pode ser visto nas páginas onde o principal objetivo é capturar e-mails, assinaturas de newsletter, onde podemos criar uma página normal, com todos os elementos necessários, e na outra página, adicionar apenas uma seta apontando para o campo de e-mail. A seta funcionará como atrativo visual, onde o indivíduo pode perceber mais facilmente e não passar batido pela página, o elemento visual pode chamar a atenção do usuário, basta saber como inserir na página, cores, etc.

Outro exemplo, saindo um pouco das páginas, seria os anúncios do facebook. Quando estamos criando um anúncio para o facebook, somos levados a escolher até 6 tipos de imagem para um único anúncio, dessa forma diferentes formas de propagar sua mensagem é gerado, o facebook cruza as métricas referente a cada imagem escolhida e a que obteve maior desempenho continua sendo veiculada. Um teste A/B mais complexo, por se tratar de vários tipos de imagem, mas segue o mesmo pensamento.

Conclusão

O Teste A/B é uma ferramenta util para todas as situações em que queremos testar alguma coisa, colocar a informação de diferentes formas para que o usuário te indique qual é a melhor e o mais certo de ser feita. Esse teste irá aumentar suas conversões e resultados referente ao tipo de campanha que deseja, seja converter em vendas ou cadastro em sua newsletter.

 

Fique de olho no Blog da Zaez que podemos dar dicas para utilizar o Teste A/B da melhor forma possível em diferentes tipos de projetos.

webxredes
Por que não devo ter apenas uma página na rede social?

Nos dias de hoje um fator bastante preocupante, são as famosas páginas corporativas nas redes sociais, principalmente no facebook. Não estou falando que a página da empresa no facebook não tem relevância, mas sim, que ela pode aumentar o seu desempenho com um website! O fator preocupante é justamente esse, as empresas estão deixando de lado os websites para criarem somente páginas em rede social. Errado!

Os websites possuem diversas vantagens para sua empresa e não pode ser substituído integralmente por uma página de rede social, listarei alguns pontos positivos que os sites na internet podem trazer para sua empresa:

Design e Customização: as páginas do facebook, possuem sempre o mesmo padrão, afinal elas seguem a identidade visual do facebook e não da sua empresa. Tudo bem que você pode trocar foto aqui e trocar foto ali, mas ela não é totalmente customizável. O que por contra partida uma página de website criado por uma agência especializada é.

Desde o wireframe até o visual final do seu site, serão criados traços e elementos de maior identificação com seus consumidores e que identifiquem sua marca, portanto o website consegue atrair novos olhares e ser mais atraente.

Sistema próprio: com um website você sai das rédeas das redes sociais. Nele você é livre parar gerar seu próprio conteúdo, fazer mudanças em layout, adicionar e remover elementos a hora que quiser. O contrário de uma página, que você está limitado a mudar somente imagens de topo, alguns botões o que pode limitar o crescimento da sua empresa.

SEO: Search Engine Optimization é uma prática bastante usual em websites, é uma das formas de crescimento para sua empresa. Com um Design bem feito e customizado de acordo com a necessidade da sua empresa, e com seu sistema próprio, você cria mecanismos corretos para que seu site apareça nas buscas de seus consumidores em sites de buscas como Google e Bing.

A optimização correta de palvras-chave dentro de conteúdos produzidos dentro da empresa e publicado no website, facilita o crescimento e consequentemente a visibilidade da sua empresa na internet.

Com isso conseguimos perceber que as redes sociais, sozinhas, não são tão eficazes assim para uma empresa é por isso que apresento as vantagens da empresa unir seu website a uma página de rede social.

As redes sociais podem trazer conectividade entre os usuários, uma vez que ligada ao seu site, pode haver interação entre as duas plataformas.

Mesmo não customizável é um canal aberto de comunicação, por estar na internet você pode facilmente divulgar o que é publicado em seu website.

A propagação da mensagem, por sua vez é eficaz nas redes sociais. Uma vez que gerado um conteúdo original em seu website, você pode propagar no seu canal de comunicação.

E como todos nós sabemos, as redes sociais são populares e uma grande parte está nela, portanto seu público também estará!

Na Zez você pode ficar despreocupado!

cuidamos do seu website e também da gestão em sua página na rede social. Criando uma sinergia entre elas e possibilitando o crescimento da sua empresa.

Orçamento
escolhas
Por que escolher uma agência do Interior?

Uma pergunta frequente das empresas localizadas nos grandes centros, deve, com certeza, ser essa: “Porque escolher uma agência do interior se estou na capital?”. Realmente, o porquê escolher uma a agência do interior?

Alguns pontos são de extrema importância para essa escolha, mas não podemos deixar de falar que também existem agências que trabalham da mesma forma nas capitais, e que também as agências grandes fazem um ótimo trabalho, o artigo não visa desmerecer nenhum tipo de trabalho dentro de uma ou outra agência, mas sim mostrar pontos positivos das agências localizadas no interior dos grandes centros.

agência do Interior Um ponto importante é o tempo, o tempo passa igualmente para todos, estando no interior ou na capital ele vai passar e passar depressa, mas pense: no interior os pedidos de serviço são relativamente proporcional, portando menor do que uma grande empresa. Com serviços mais controlados e menos mirabolantes do que em agências grandes, nós do interior adotamos a política de esquecer os grandes prêmios e fazer uma comunicação mais voltada para a empresa e não para os olhos de jurados.

Portanto o planejamento é minucioso e bem trabalhado, destacamos pontos a serem trabalhados para que ocorra o melhor desenvolvimento da empresa em questão, ressaltando mais uma vez, as grandes e pequenas agências da capital também fazem um bom trabalho, mas vamos continuar o artigo.

As pequenas agências do interior tem por sua natureza menos funcionários, portanto o engajamento dentro da própria empresa relacionado aos trabalhos de um cliente. O que seria isso? Ok, os funcionários, os profissionais dentro da empresa estão engajados em fazer o melhor para aquele trabalho, naquela hora! A agência tem seus departamentos, lógico, mas é bem menos dividido como em grandes agências onde cada um faz as funções do seu departamento e pronto. Na agência do interior contamos com opiniões e pontos divergentes e convergentes para o melhor desenvolvimento do job.dreamstime_xxl_20666622

A exclusividade com o cliente é outro fator importante. Nas agências de pequeno porte do interior, possuímos uma cartela menor de clientes e isso abre uma brecha para criarmos um vínculo maior com nossos poucos clientes.

A sua confiança, e credibilidade com uma empresa como a nossa só pode gerar benefícios para sua empresa e o crescimento dela. Portando alguns pontos que você pode levar em consideração na hora de escolher a empresa que cuidará da sua comunicação e sua imagem. Portanto pense antes de escolher a agência que irá entregar o futuro da sua empresa.

webp
WebP revoluciona imagens na internet

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

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 )
6043100e7f5311e2beb322000aaa0754_7 6043100e7f5311e2beb322000aaa0754_7

Fontes: CanalTech

 

designer drawing website development wireframe
5 motivos para usar Wireframe

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:

  1. 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.
  2. 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.
  3. 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:

Wireframe

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.

 


Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'addcopy' not found or invalid function name in /home/zaez/public_html/wp-includes/plugin.php on line 503