Edição 44

:: Ano 6 :: R$ 9,90 :: Edição 44

:: Ano 6 :: Edição 44

:: www.locaweb.com.br ::

email marketing

A Internet em Revista

l i a m E m

::Tableless ::Eventials ::HTML5 ::Cursor do mouse

arketing Aprenda a fazer campanhas eficientes de acordo com o seu tipo de negócio e saiba como criar as peças de maneira correta para aumentar a taxa de entregabilidade

Veja também:

locaweb

O poder do crowdfunding

Diego Reeberg revela porque o método de arrecadação de fundos por financiamento coletivo ganha cada vez mais espaço no Brasil

WordPress mais seguro Selecionamos 10 plug-ins desenvolvidos especialmente para o CMS com o intuito de deixar o seu site ou blog mais protegido

Além dos vídeos

O YouTube é uma excelente ferramenta para divulgar seus projetos online. Entenda como ele pode impulsionar o seu negócio

lwao_leitor

Marketing de respeito

O

e-mail marketing é um dos símbolos da era digital que provam que nem sempre o caminho mais fácil é o mais seguro a ser seguido. Afinal, parece simples, após montar um negócio, virtual ou não, arrumar uma lista com um bocado de e-mails de pessoas que você nem sabe como foram selecionadas e enviar para elas mensagens com os seus produtos, ofertas e por aí vai.

Ocorre, porém, que, da mesma forma que você dispensa rapidamente da sua caixa de entrada um e-mail que não solicitou receber, os seus “potenciais clientes” dispensarão a sua mensagem não desejada assim que aparecer em suas telas. Pior: eles podem ficar irritados com o assédio e depor contra a sua marca nas redes sociais ou no tradicional boca a boca.

Felizmente, no entanto, é possível explorar todos os benefícios gerados pelo e-mail marketing a partir de técnicas honestas de coleta de endereços de pessoas que realmente desejam receber as suas ofertas. Essas se identificam com os seus produtos e são as suas verdadeiras clientes, com quem você deve se comunicar com clareza e precisão.

A partir de campanhas simples e bem direcionadas, você verá que o resultado não tardará a aparecer. Prova disso é que, mesmo diante de todo o progresso do setor no mercado, o e-mail marketing ainda é a ferramenta queridinha dos marqueteiros online.

Na reportagem de capa desta edição, a repórter Bianca Bellucci mostra quais caminhos você deve seguir para criar peças eficientes e vendáveis. Além disso, deixa claro como vale a pena tratar os seus clientes com respeito, algo que a Locaweb em Revista tem como política ao abordar, a cada edição, assuntos que visam contribuir para o seu conhecimento e engrandecer a sua carreira.

:: ANO 6 :: R$ 9,90 :: Edição 44

:: ANO 6 :: EDIÇÃO 44

Fernando Cirne / Diretor de Marketing

:: www.locaweb.com.br ::

A INTERNET EM REVISTA

Email

::Tableless ::Eventials ::HTML5 ::Cursor do mouse

EMAIL MARKETING

marketing Aprenda a fazer campanhas eficientes de acordo com o seu tipo de negócio e saiba como criar as peças de maneira correta para aumentar a taxa de entregabilidade Veja também:

LOCAWEB

O poder do crowdfunding

Diego Reeberg revela porque o método de arrecadação de fundos por financiamento coletivo ganha cada vez mais espaço no Brasil

WordPress mais seguro Selecionamos 10 plug-ins desenvolvidos especialmente para o CMS com o intuito de deixar o seu site ou blog mais protegido

Além dos vídeos

O YouTube é uma excelente ferramenta para divulgar seus projetos online. Entenda como ele pode impulsionar o seu negócio

LW44.capa.indd 1

1/29/14 5:24 PM

Aydano Roriz Luiz Siqueira Tânia Roriz Vivi Carrara

Locaweb em Revista Edição 44 Diretor de Marketing: Fernando Cirne Coordenação de Comunicação: Luis Carlos dos Anjos Coordenação Editorial: Andréa Ascenção Assistente Editorial: Gislaine Lima Editora Europa Editor e Diretor Responsável: Aydano Roriz Diretor Executivo: Luiz Siqueira Diretor Editorial e Jornalista Responsável: Roberto Araújo - MTb.10.766 araujo@europanet.com.br

Editores: Paulo Basso Jr. e Sérgio Vinícius Revisão: Cátia de Almeida Editor de Arte (projeto gráfico): Alexandre Dias (Nani) Colaboração: Adèle Helena Ribeiro, Bianca Bellucci, Max Reinhold Jahnke e Rodrigo Louteiro Publicidade São Paulo: publicidade@europanet.com.br Diretor de Publicidade: Mauricio Dias (11) 3038-5093 Executivos de Negócios: Alessandro Donadio (coordenador),

Nesta edição...

Marketing no YouTu

desvendad

Segurança no WordPreSS

Especialistas em divu explicam os benefício peças publicitárias no

C

om o evidente crescimento das mídias sociais e o advento da transmissão de vídeos online, o marketing virtual passou a ser mais considerado por profissionais do ramo publicitário, principalmente no site de vídeos mais famoso e acessado do mundo, o YouTube. De acordo com a página, são aproximadamente 1 bilhão de usuários únicos

44locaweb

52locaweb

::WordPress 44 LW44.especial_plugins.indd 44

1/29/14 5:25 PM

locaweb45

::YouTube 52 LW44.especial_youtube.indd 52

1/29/14 5:27 PM

LW44.especial_youtube.indd 53

capae-mailMKT capa capae-mail capaerroseacertos e-mailMKT e-mailMKT

mail E m

arketing U

m garoto entra no site de sua loja de games favorita.

Após ele colocar no carrinho virtual os jogos dos quais mais gostou, a empresa solicita o preenchimento de um cadastro para o envio de novidades por e-mail. Do outro lado do país, uma menina faz compras em uma filial física da mesma loja.

Depois de escolher o que vai arrematar, o atendente pergunta se ela quer se registrar para receber notícias sobre lançamentos futuros por e-mail. Com o cadastro aprovado pelos clientes, os dois clientes passam a fazer parte do mailing de e-mail marketing da marca. E, a partir daí, a empresa tem em mãos uma das maiores ferramentas publicitárias disponíveis no mercado. Simples assim,

Entenda por que o e-mail marketing é o queridinho dos marqueteiros e saiba como construir uma peça infalível de acordo com o seu tipo de negócio e o público que você deseja atingir Por Bianca Bellucci

porém com algumas regras que devem ser cuidadosamente observadas.

Para começo de conversa, ao contrário do spam, o e-mail marketing deve ser solicitado pelo destinatário. Além disso, ele tem um código ético que deve ser seguido, chamado CAPEM (Código de Autorregulamentação para a Prática de E-mail Marketing). Entre suas regras, está o fato de o remetente ter de oferecer ao cliente a opção clara de opt-out (descadastro). Além disso, só é permitido enviar mensagens por um endereço eletrônico vinculado ao seu nome de domínio próprio (por exemplo, contato@nomedaempresa.com.br). Para conferir o código completo, acesse o site http://lwgo.to/11s. E para saber mais sobre a ferramenta queridinha dos marqueteiros, vire a página.

30locaweb

locaweb31

::E-mail marketing vencedor 30 LW44.materiadecapa.indd 30

1/29/14 5:40 PM

LW44.materiadecapa.indd 31

::Entrevista: Diego Reeberg .................... 6 ::Caixa de entrada.................................... 8 ::Notícias Locaweb................................. 10 ::Wishlist.................................................. 12 ::Case: VAR Digital................................. 16 ::Case: Loja Virtual................................. 18 ::Vitrine Virtual........................................ 20 ::Espaço ABRADI: Rodrigo de Almeida.... 22 ::Opinião: Bruno Domingues................. 24 ::Opinião: Marcelo Negrini..................... 26 ::Opinião: Diego Eis................................ 28 ::Design: Tableless.................................. 40 ::Eventials Locaweb............................... 48 ::Speed Tips em HTML5........................ 58 ::Como mudar o cursor do site.............. 62 ::Parceiros em destaque......................... 66

Angela Taddeo, Adriana Gomes, Elisangela Xavier, Ligia Caetano, Renan Pereira, Renato Peron, Roberta Barricelli e Rodrigo Sacomani Criação Publicitária: Paulo Toledo Tráfego: Rafael Galves (11) 3038-5097 Circulação e Promoção Gerente: Ézio S. Vicente Desenvolvimento de Pessoal: Tânia Marilia Ribeiro Roriz e Elisangela Tokashiki

Locaweb em Revista é uma publicação da Editora Europa Ltda. e do departamento de comunicação e marketing da Locaweb Serviços de Internet.

A Editora Europa não se responsabiliza pelo conteúdo dos anúncios de terceiros.

Distribuidor Exclusivo para o Brasil: Fernando Chignalia Distribuidora S.A. Rua Teodoro da Silva, 907 - CEP 20563-900 - Grajaú - RJ Impressão: Log&Print Gráfica e Logística S.A.

1/29/14 5:40 PM

m p é f a d

s a P d g

Diego Reeberg foi um dos pioneiros do movimento de financiamento coletivo no Brasil, com a criação do blog CrowdfundingBR

V

aquinha online. Essa talvez seja a definição mais popular do que é crowdfunding. Mas essa palavra estranha, na verdade, é usada para definir um modelo de arrecadação de fundos para a realização de projetos pessoais ou institucionais que dá recompensas aos investidores.

Sucesso no ambiente online, o sistema vem ganhando cada vez mais espaço no Brasil e dando destaque a algumas empresas.

Entre elas, desponta a Catarse, líder no mercado nacional de serviços de financiamento coletivo. Fundador da empresa, o administrador paranaense Diego Reeberg falou à Locaweb em Revista sobre o poder do crowdfunding e sua experiência à frente da plataforma. Confira:

O poder do crowdfunding Método de arrecadação de fundos por financiamento coletivo ganha cada vez mais espaço no Brasil e se revela um bom meio de explorar os benefícios da internet Rodrigo Loureiro 6locaweb

Arquivo pessoal

lwentrevista

Da esquerda para a direita: Diego Reeberg, Luis Otávio Ribeiro e Rodrigo Maia, sócios-fundadores do Catarse

lwentrevista

funcionar e ficavam assustados em saber que nós não garantíamos que os projetos seriam realizados.

Com o passar do tempo, uma cultura passou a ser construída e a confiança se espalhou pela rede.

Hoje, há um verdadeiro ecossistema de pessoas, iniciativas e empresas que surgiram e vivem do financiamento coletivo.

Locaweb em Revista O que é crowdfunding?

Diego Reeberg Para definir o que é crowdfunding, vale a pena, primeiramente, explicar o conceito de crowdsourcing, que é quando você usa a multidão (crowd) como fonte (source) para resolver uma questão. Ou seja, é uma atividade participativa online na qual um indivíduo, instituição, organização ou empresa propõe que um grupo variado de pessoas realize voluntariamente uma tarefa que resultará em benefício mútuo. Dessa forma, crowdfunding é uma modalidade de crowdsourcing em que as pessoas usam o dinheiro arrecado para financiar projetos que, de alguma forma, beneficiem a todos os envolvidos.

LW Sucesso nos Estados Unidos e na Europa, o crowdfunding ainda não é muito conhecido no Brasil. Por que essa modalidade de arrecadação de fundos ainda não deslanchou por aqui?

DR É difícil afirmar que não deslanchou no Brasil ou fazer comparações simples com outras realidades de outros lugares. Há de se considerar uma série de fatores ligados à plataforma, entre eles acesso à internet, renda média e até mesmo as diferenças socioculturais de cada usuário. Mesmo assim, o Brasil é, atualmente, um dos países que mais usam crowdfunding no mundo.

LW Acredita que o sucesso ou o fracasso do crowdfunding no País possa ser influenciado pelo medo que o brasileiro tem de ser enganado em transações online?

DR No começo houve certa desconfiança de investir em projetos de pessoas desconhecidas na internet.

Muitos não entendiam como a dinâmica podia

LW Qual garantia o colaborador tem de que o projeto em que ele investiu realmente sairá do papel?

DR Não garantimos. Como ferramenta, procuramos oferecer cada vez mais instrumentos para que os apoiadores possam se mobilizar para o sucesso do projeto. Trabalhamos com conceito de comunidades que decidem se uma ideia deve ou não ser financiada e que se mobilizam para ajudar na sua realização e cobrar o resultado final. A responsabilidade, portanto, é do realizador do projeto.

LW Por que é importante oferecer recompensas aos doadores?

DR A recompensa é um símbolo entregue ao apoiador por compartilhar daquela ideia. É algo que valoriza a experiência como um todo, estabelecendo uma relação de troca entre as partes. Acreditamos muito em relações de ganha-ganha, nas quais todos os lados saem beneficiados daquela interação.

LW Em que o Catarse se diferencia de outras empresas que também trabalham com crowdfunding?

DR Divulgamos os valores de nossa plataforma por meio de nosso blog (http://blog.catarse.me). Além disso, o início forte em três cidades importantes do Brasil (São Paulo, Rio de Janeiro e Porto Alegre), as redes dos fundadores da plataforma e as boas experiências dos primeiros usuários contribuíram para destacar a empresa no mercado.

LW Quais são as estimativas para o futuro do site? Há novidades vindo por aí?

DR Já passaram pelo Catarse 1.501 projetos, dos quais 843 (56%) foram bem-sucedidos. Estamos com uma média de 120 projetos em captação e já chegamos ao pico de 160 campanhas no ar. No longuíssimo prazo, queremos ser a primeira opção para viabilizar ideias criativas no Brasil. Este ano, a ideia é chegar a 2 mil projetos financiados, quintuplicando o número que atingimos no ano passado.

locaweb7

lwcaixa_de_entrada //O canal direto entre você e a equipe de redação da Locaweb em Revista

Extensões para Google Chrome Fiquei sabendo que existe uma loja de extensões do Google Chrome para computador e que, nela, é possível encontrar desde jogos até programas para ver a temperatura ambiente.

Como acho essa loja e como faço para baixar os aplicativos?

Carlos Eduardo // Por e-mail A loja de extensões para o Google Chrome chama-se “Chrome Web Store”. Ela é semelhante a uma loja virtual de smartphones, como a App Store, da Apple, e a Google Play, do Android.

Para encontrá-la é fácil.

Basta abrir o navegador (Chrome) e clicar no ícone com três listras horizontais que aparece no canto superior direito

da tela. Depois, selecione a opção Ferramentas e, em seguida, Extensões.

A página que aparecerá em seguida mostrará os aplicativos que já estão instalados em seu navegador. Clique em Obter mais extensões para ser levado automaticamente para a Chrome Web Store. Lá, você encontrará diversos aplicativos e extensões para incrementar o seu browser, além de temas para enfeitá-lo da maneira que quiser. Basta seguir as instruções para baixá-los e instalá-los. Reinicie então o navegador para que eles funcionem normalmente.

Emoticons para WhatsApp Tenho o comunicador instantâneo WhatsApp instalado em meu iPhone 4S, mas não consigo acessar o teclado com emoticons,

que eu gosto muito de usar. Quero saber como faço para instalá-lo no meu celular. Imagino que a opção exista, já que meu amigo tem um telefone com Android, no qual os desenhos e ícones aparecem sem problemas.

Carmem Ribeiro // Por e-mail Assim como muitos aparelhos que operam com sistema Android, o iPhone oferece sim o teclado com emoticons para vários apps. Porém, para ativá-lo em seu smartphone, você precisa acessar o menu de Ajustes do iOS. Depois de habilitá-lo, o teclado estará disponível não só para o WhatsApp, mas para todos os aplicativos instalados no celular que usem emoticons. Para realizar o procedimento, vá até Ajustes e depois clique

Envie seu e-mail Se você tem alguma dúvida, sugestão ou crítica, entre em contato com a nossa redação pelo e-mail locaweb@ europanet.com.br.

em Geral. Procure pela opção Teclado e selecione, novamente, Teclados.

Agora, clique em Adic.

Novo Teclado e procure pelo item Emoji. Após selecionar essa opção, o seu aparelho terá ícones disponíveis para todos os aplicativos que usam o teclado de emoticons, inclusive os de mensagens comuns.

O iPhone oferece teclado de emoticons para diversos apps, mas é preciso habilitá-lo

Loja de extensões para o Google Chrome conta com temas e aplicativos úteis

8locaweb

lwnotícias //As novidades da Locaweb, a maior empresa de serviços de internet do Brasil

Monitoramento em nuvem

Locaweb oferece diversas ferramentas de monitoração para cada tipo de cloud

A

tecnologia de cloud computing deixou de ser uma novidade e passou a ser uma tendência no mercado. A escolha por essa plataforma moderna e avançada se justifica pelos benefícios oferecidos, como flexibilidade no uso dos recursos, proporcionando uma opção de consumo mais inteligente, e ótimo custo-benefício em comparação à tecnologia de um servidor exclusivo e dedicado, por exemplo.

A fim de incentivar melhor administração e acompanhamento de projetos, a Locaweb oferece uma solução completa e gratuita de monitoração para site, aplicação, rede e servidor. Para conferi-la, acesse www.locaweb.com.br/CloudServer.

Ao considerar que os sistemas de hoje têm complexidade, sofisticação e volume de dados muito maior do que há alguns anos, fazer o monitoramento proativo de infraestrutura é fundamental.

Principalmente porque ajuda a reduzir o tempo de resolução nas correções emergenciais, evitar que os profissionais de TI gastem tempo com incidentes do dia a dia e prevenir eventuais falhas, antes que os visitantes do site ou usuários da aplicação percebam e isso gere prejuízos.

10locaweb

Veja as ferramentas de monitoração e compatibilidade disponíveis para cada solução de cloud: New Relic (monitoração de aplicação) Disponível para: Cloud Server Gerenciado (apenas para Linux), Cloud Server Pro e Jelastic Cloud. Faz a monitoração em tempo real, encontra gargalos e melhora o desempenho do aplicativo web, seja ele em Ruby, PHP, Phyton, Java ou .NET. Monitis (monitoração de site) Disponível para: Cloud Server Gerenciado, Cloud Server Pro e Jelastic Cloud.

Ferramenta que auxilia acompanhar de perto a disponibilidade e o tempo de resposta do site, simular transações online, melhorar a experiência do usuário e monitorar processos, como carrinho de compras, formulários, busca, web services, entre outros.

Boundary (monitoração de rede) Disponível para: Cloud Server Pro. Possibilita monitorar todo o tráfego, dependências e latência da rede entre os componentes da aplicação ou de serviços externos. Isso sem contar o tempo de resposta das APIs de compartilhamento com as redes sociais.

Monitoração proativa do servidor Funcionalidade inclusa no Painel do Cloud Server Pro. Identifica o consumo de cada recurso e a necessidade de upgrade, com alertas instantâneos, via e-mail, sobre o limite de uso da memória e processamento.

lwnotícias

Precisa de mais informações sobre os serviços? Ligue para o número 0800-770-2235 ou mande um e-mail para comercial@locaweb.com.br.

Integrações do Email Marketing Locaweb O

APP Mobile e o módulo da Magento são as novas integrações para o Email Marketing Locaweb, desenvolvidas para simplificar a rotina de envios e aumentar a eficiência de campanhas de e-mail marketing.

Disponível para os sistemas Android (por meio do Google Play: http://lwgo.to/11x) e IOS (via Apple Store: http://lwgo.to/11y), o aplicativo mobile do Email Marketing Locaweb possibilita acompanhar os resultados de campanhas e verificar os relatórios das mensagens na palma da mão, sem precisar ficar “preso” a um desktop, por exemplo.

O módulo de integração da Magento, por sua vez, serve para sincronizar os contatos cadastrados na loja virtual Magento com a ferramenta de envio de mensagens Email Marketing Locaweb.

O primeiro passo é gerar uma lista de destino dos contatos ou selecionar uma lista já criada na ferramenta. Depois, é preciso fazer o processo de exportação dos cadastros por meio do Painel de Administração da Magento cada vez que quiser atualizar os contatos. O download gratuito está disponível na página http://lwgo.to/11z.

Para conhecer todas as funcionalidades do Email Marketing Locaweb, acesse o endreço: www.locaweb.com.br/emailmkt.

Práticas de segurança Encontro A Locaweb

Cartilha de Segurança para Internet, desenvolvida pelo Centro de Estudos, Respostas e Tratamento de Incidentes de Segurança no Brasil, ofereceu recentemente três novos fascículos: Códigos Maliciosos, Computadores e Internet Banking. Todos visam alertar e facilitar a difusão de práticas que protegem os equipamentos de rede e os dispositivos móveis. Para baixar a cartilha completa, acesse: http://cartilha.cert.br.

Material preventivo foi criado para disseminar medidas de segurança em computadores e equipamentos móveis

Edney Souza, Martha Gabriel, Gustavo Caetano e muitos outros palestrantes estarão no 16º Encontro Locaweb. Para participar, acesse: eventos.locaweb.com.br e inscreva-se até 28 de fevereiro, pagando R$ 70.

locaweb11

lwwishlist

O melhor da vitrine digital O que há de mais interessante nas prateleiras ao redor do mundo GIGANTE DA LG

A tela 5,2 polegadas e o processador de 2,26 GHz credenciam o LG G2 a apresentar-se ao mercado como um dos melhores smartphones com Android no momento. Equipado com câmera de 13 MP, o “quase phablet” da empresa sul-coreana conta com tecnologia 4G e uma bateria que não deixa o usuário na mão. E, por falar em mão, o design ergonômico do celular reduz, segundo a LG, o risco de queda em até 38%. Uma boa opção para quem é craque em derrubar aparelhos. O preço sugerido é de R$ 2.000.

Mais informações: www.lge.com

SMART TV EM UM ADAPTADOR

O NewLink Adaptador Android para televisão TV101 transforma o televisor comum em um aparelho inteligente (com acesso à internet). Para isso, basta conectar os equipamentos por meio de uma entrada HDMI e outra USB. Assim, torna-se possível navegar pelo sistema operacional do Google sem grandes dificuldades para acessar a web e até usar aplicativos como NetFlix e YouTube, entre outros. O gadget vem com Android 4.2 e conta com 4 GB de espaço interno.

O preço sugerido é de R$ 250.

Mais informações: www.newlink.com.br

TABLET COLORIDO

Com modelos em cinco cores diferentes, o Asus MemoPad HD7 é uma ótima opção de compra para quem busca um tablet bonito e cumpridor. Além da tela de 7’’ e do processador quad-core de 1,2 GHz, o produto conta com duas câmeras, sendo a principal de 5 MP. O sistema Android 4.2 complementa o aparelho, que pode ser encontrado por R$ 800.

Mais informações: www.asus.com

12locaweb

lwwishlist

ULTRABOOK TOUCH

Com peso de cerca de 1,5 kg e dotado de uma eficiente tela touchscreen, o Samsung ATIV Book 9 Lite é uma ótima escolha para quem busca praticidade e sofisticação na hora de comprar um computador. Capaz de ser aberto em ângulos de até 180 graus, o aparelho tem processador de 1,4 GHz, 4 GB de RAM e 128 GB de espaço SSD que rodam muito bem o Windows 8. O preço sugerido para o ultrabook é R$ 3.100.

Mais informações: www.samsung.com

TABLET ATÉ DEBAIXO D’ÁGUA

O Sony Xperia Z é um tablet de respeito.

Com tela de 10,1’’ à prova d’água e de poeira, o novo produto da empresa japonesa é robusto e eficiente. O processador Quad-core de 1,5 GHz e os 2 GB de RAM garantem velocidade na realização das diversas funções oferecidas pelo produto. Além disso, o tablet pode ser usado como controle remoto universal para diversos tipos de eletrônicos. O Xperia Z também conta com tecnologia 4G e duas câmeras, das quais a principal tem 8,1 MP. O preço sugerido para a versão com cartão SIM é R$ 2.600.

Mais informações: www.sony.com

MOUSE DE COPACABANA

Moderno, sofisticado e brasileiríssimo, o Kit Passion Mouse + Mousepad Calçadão da Leadership traz o famoso calçadão do Rio de Janeiro direto para a sua casa ou o seu escritório. Composto de um mouse óptico de 800 DPI com botão wheel e mousepad personalizado, o conjunto tem preço sugerido de R$ 30.

Mais informações: www.leadership.com.br

locaweb13

lwwishlist

O mundo dos games ENCANADOR ITALIANO 3D

Mário está de volta! Super Mario 3D World, novo título da saga do bigodudo italiano, conta com novos desafios e promete fazer os fãs da franquia não largarem o Wii U antes de finalizarem o game. A interface gráfica que une o 2D com o 3D deixa o game mais divertido.

Apontado pela crítica como um dos melhores jogos dos últimos tempos, o novo jogo da Nintendo sai por R$ 180.

Mais informações: www.nintendo.com

SAUDAÇÃO ROMANA NO XONE

Ryse: Son of Rome é um dos cartões de boas-vindas do novo console da Microsoft, o Xbox One. Com gráficos que beiram a perfeição, o game de ação conta a história de Marius, um general romano traído pelo imperador Nero e que busca vingança após ter sua família devastada.

Destaque interessante é que o jogo permite controlar não apenas o general Marius Tito, mas também todo o exército imperial por comandos de voz no Kinect.

O preço sugerido é de R$ 200.

Mais informações: www.crytek.com

14locaweb

lwwishlist

TÉCNICO VIRTUAL

O torcedor que está cansado de criticar o treinador do clube de coração vai se apaixonar pelo aclamado game Football Manager 14. Traduzido inteiramente para o português, o jogo coloca o gamer à beira do gramado, permitindo que ele comande os bastidores de um time de futebol. Disponível para Windows e Mac, Football Manager 14 é produzido pela Sega e tem preço sugerido de R$ 70.

Mais informações: www.footballmanager.com

PIRATAS ASSASSINOS

O quarto game da série Assassin’s Creed fará o jogador navegar pelos sete mares. Em Assassin’s Creed IV: Black Flag, a Ubisoft aposta em uma história mais simples e voltada para o protagonista do game, o pirata Edward Kenway. Dublado e legendado em português, o game está disponível para PS3, PS4, Xbox 360, Xbox One, Wii U e PC. O preço sugerido é de R$ 200.

Mais informações: www.ubisoft.com

locaweb15

lwcase //Ações criadas pelos clientes da Locaweb para melhorar o dia a dia online

Valor agregado Parceria com a VAR Digital dobra 20 vezes o número de visitantes mensais no site da Patrimônio Incorporadora Por Fernanda Brianezi

D

esde 1990, a holding VAR Soluções atua no mercado de infraestrutura de redes, tendo como sócio e diretor Vital de Oliva Rizzieri, que também é responsável pela área de tecnologia do grupo. A empresa surgiu na época em que a internet estava se popularizando no Brasil e, com ações pioneiras, percebeu rapidamente uma nova oportunidade de negócio para capacitar e atuar no mercado.

Não demorou para surgir uma nova divisão de negócios dentro da VAR Soluções. Esta ficou

aos cuidados do irmão de Vital, Alexandre Rizzieri, que trabalhava até então com planejamento em agência de propaganda. Diante do rápido crescimento dessa nova área, resolveu-se criar uma nova empresa, e, em 1998, nasceu a VAR Digital, para agregar os serviços de web, que passaram a ser utilizados pelos clientes da holding, além de somarem vantagens no momento de captação de novos clientes independentes.

A partir de 2005, essa empresa começou a atuar também como agência digital, desenvolvendo ações de marketing e mídia online. Com foco

Empresa: Var Digital (www.vardigital.com.br). Área: Agência digital com foco em soluções de e-commerce, portais de conteúdo e relacionamento para mercado farmacêutico e plataformas integradas para mercado imobiliário.

16locaweb

em soluções de e-commerce, portais de conteúdo e relacionamento para o mercado farmacêutico e plataformas integradas para o mercado imobiliário, como construtoras e incorporadoras, a VAR Digital desenvolve atualmente soluções próprias customizadas para todas essas áreas.

Para agregar valor aos clientes, porém, a agência percebeu que precisava estabelecer uma parceria com uma empresa de tecnologia que mantivesse o mesmo nível de qualidade e seriedade no trabalho prestado. Foi nesta época que os sócios chegaram até a primeira sede da Locaweb, localizada no Itaim Bibi, após conhecer o grupo em um evento.

Assim, deu-se início a uma relação que cresce ano a ano.

Hoje, a Digital usa vários serviços oferecidos pela Locaweb. Entre eles, destacam-se: Hospedagem, Revenda de Hospedagem Plesk, E-mail Marketing, Revenda de E-mail Marketing, Google AdWords, Cloud Server Pro, Servidores Dedicados, Tray Commerce, Gateway de Pagamento SuperPay, Solução de Pagamento, domínios (registro e transferência), E-mail Locaweb e WebDesk.

De acordo com Alexandre Rizzieri, a estabilidade dos serviços, a atenção dos gerentes na consultoria das

lwcase

A Var Digital desenvolveu várias plataformas que trouxeram resultados positivos para a Patrimônio, entre elas o novo site da incorporadora imobiliária

soluções mais adequadas e a eficiência da equipe de suporte criaram uma relação de confiança. “Graças aos serviços prestados pela Locaweb, conseguimos implantar com sucesso a plataforma completa VAR INCORP, que otimizou os processos da empresa e maximizou os resultados comerciais.”

Patrimônio Atualmente, a agência conta com 150 clientes. Entre eles está a Patrimônio Incorporações, que chegou à VAR Digital em 2008.

Fundada em 1995, a Patrimônio é uma incorporadora imobiliária e também braço imobiliário do Grupo Hiroshima, um dos maiores desse setor no Brasil, com atividades diversificadas em comércio e produção. A empresa, que está presente em diversos estados brasileiros, já construiu mais de 1 milhão de metros quadrados e tem mais de 6.200 unidades entregues.

Além da necessidade de reformular seu site institucional, a incorporadora precisava desenvolver também soluções de atendimento para clientes, para a área comercial

A profissionalização do negócio implementada pela VAR agregou novos canais de relacionamento e comerciais para a Patrimônio e para a intranet. Para isso, a VAR Digital implementou diversas plataformas que, ao longo dos últimos anos, foram responsáveis por uma grande evolução na empresa.

Chamam a atenção o novo site institucional criado para o grupo (www.patrimonio.com.vc), uma plataforma SAC, um hotsite de lançamentos e a intranet. Para realizar todos esses trabalhos, a VAR optou por usar seis serviços da Locaweb: Hospedagem, E-mail Marketing, Google AdWords, Cloud Server Pro, E-mail Locaweb e WebDesk.

Segundo o diretor de marketing da Patrimônio, Leonardo Raymundo,

vários pontos ajudaram a incorporadora a fechar a parceria com a Digital. “Optamos pela agência porque, além da experiência que eles têm no mercado imobiliário, o desenvolvimento de sistemas customizados e a expertise nas operações de empresas na área de incorporação e construção, o histórico e a reputação da VAR e de seus parceiros, como a Locaweb, reforçou para nós a garantia de um trabalho benfeito.”

O resultado da parceria entre a empresa de tecnologia, a Var Digital e a Patrimônio se traduz em números impactantes. A quantidade de visitantes do site, que se limitava a mil por mês, passou, depois da reformulação, a ser de 20 mil no mesmo período.

Assim, a internet se tornou um canal indispensável de captação de novos clientes para a Patrimônio. “Hoje, a estratégia de lançamento de novos empreendimentos é focada nesse canal, que se mostrou fundamental para alavancar a área comercial da empresa”, conclui Raymundo.

locaweb17

lwcaselojavirtual

Sua loja aqui!

www.queijodalagoa.com.br

Se você também tem uma Loja Virtual TrayCommerce e deseja aparecer nesta seção, entre em contato conosco por meio do e-mail locaweb@europanet.com.br. Aguardamos seu contato!

Inovar é fazer

A Queijo d’Alagoa atrai tantos turistas a Alagoa que, ao chegar à cidade, os visitantes consomem farinha de milho, fubá, broa, e outros produtos no comércio local, além de se hospedarem nas pousadas indicadas por Osvaldo Filho – produtor de queijos que, em outubro passado, recebeu o Prêmio José Costa, concedido pela Fundação Dom Cabral e o Diário do Comércio. “Eles entenderam que meu negócio foi inovador e que ele ajuda no desenvolvimento social de Minas Gerais. Concorri com mais de 300 empresas do estado e fui vencedor na Categoria Comércio. Acho legal isso, pois hoje em dia fala-se tanto em startups que crescem nos grandes centros, e com o meu jeito mineiro, numa pequena cidade, consegui chamar a atenção deles como empreendedor”, estimula-se Osvaldo Filho.

18locaweb

lwcaselojavirtual

Queijo d’Alagoa Venda pioneira de queijo artesanal, pela internet, conquista famosos e atrai turistas para Alagoa, em Minas Gerais

N

o sul de Minas Gerais, há uma cidade com pouco mais de 2.700 habitantes chamada Alagoa. Foi lá que, certa vez, um produtor de queijos conhecido como senhor Batistinha desabafou com o irmão da igreja: – Osvaldinho, não tô conseguindo vendê meus quêjo!

Compadecido, Osvaldo Martins de Barros Filho se pôs a pensar em uma solução, até que lhe surgiu uma ideia.

– Vendi queijo pela internet, uai – propôs ao senhor Batistinha.

A ideia surgiu em 2009 e começou a tomar forma com a divulgação de fotos do famoso queijo artesanal Alagoa – conhecido também como Parmesão de Alagoa ou Parmesão da Mantiqueira – com vídeos, poesias e outros textos que Osvaldo Filho publicava em uma rede social (depois transformada em blog). Em janeiro de 2012, isso deu corpo ao site www.queijodalagoa.com.br.

Com o tempo, Osvaldo Filho sentiu a necessidade de oferecer um ambiente online amigável e mais confiável, que possibilitasse ao cliente pagamento via boleto ou cartão de crédito. Depois de várias pesquisas sobre lojas virtuais, ele aderiu ao

TrayCommerce, uma solução da Locaweb, que permitiu “configurar facilmente os meios de pagamento PayPal e Bcash”, afirma.

Os clientes compram o queijo e interagem com Osvaldo Filho pelo Facebook.com/QueijodAlagoaMG ou seguindo-o no Twitter (@queijodalagoa), como fazem o cantor Lulu Santos e o jornalista Marcelo Tas. Muitos ficam tão encantados com as fotos de Alagoa e o tratamento que recebem que decidem conhecer a cidade onde fica o Pico de Santo Agostinho, o lugar mais alto da região. Essa topografia e o clima são determinantes para a qualidade dos queijos. E o sabor, costumam dizer, fica inigualável. Para quem gosta da combinação de queijo com vinho ou espumante, o sommelier Daniel Perches dá ótimas dicas em seu site http://lwgo.to/11w.

“A loja virtual é a base de todo o meu serviço. Sem ela, não consigo vender. Em locais estratégicos, a página expõe ícones de divulgação nas redes sociais. Então, o cliente compra o queijo e acaba curtindo no Facebook ou seguindo no Twitter.

Uma vez que ele chega às redes sociais, vê as fotos de Alagoa, que é linda e, assim, nasce o desejo de vir aqui para conhecer as cachoeiras, as paisagens e voltar para casa com mais queijos”, revela Osvaldo Filho.

locaweb19

lwvitrinevirtual

+ e-commerce Está procurando um lugar fácil, prático e rápido onde comprar? Confira aqui 11 lojas virtuais, parceiras da Locaweb, e faça suas compras com todo o conforto que você sempre desejou.

LOJA DO KITE

www.lojadokite.com

QUEEN’S LIFE

Camisa & Companhia

MINHA CAIXA DE JÓIAS

La Boutique

www.queenslife.com.br

www.minhacaixadejoias.com.br

20locaweb

www.camisaecompanhiaonline.com.br

www.laboutique.com.br

lwvitrinevirtual

MGPesca

Biquini Brasil

MOTORSHOPP

EstĂŠril Shop

JOGUE BARATO

Borrachas Bem Te Vi

www.mgpesca.com.br

www.motorshopp.com

www.joguebarato.com.br

https://biquinasil.commercesuite.com.br

www.esterilshop.com.br

www.bbtv.com.br

locaweb21

lwopinião

espaçoabradi

Fique de olho nas novidades do Gmail Q Rodrigo de Almeida Diretor de e-mail marketing da ABEMD e associado da ABRADi Mais informações: www.abradi.com.br

O novo padrão de exibição automática de imagens adotado recentemente pelo Gmail traz impactos positivos e negativos às campanhas de e-mail marketing 22locaweb

ualquer mudança no Gmail provoca agitação no mercado. Afinal, ele engloba uma grande fatia das bases de e-mail marketing das empresas. Por isso, o novo padrão de exibição automática de imagens adotado recentemente pela plataforma traz impactos às campanhas de e-mail marketing. Confira: Impactos positivos - Antes, se um usuário do Gmail não exibisse as imagens nem clicasse em algum link, nenhuma ferramenta de e-mail marketing era capaz de apurar se ele havia aberto a mensagem. Agora, por padrão, essa primeira abertura será contabilizada, salvo se o usuário mudar algo em sua conta. A exibição das imagens é positiva. Infelizmente, porém, a maioria das campanhas vale-se de newsletters belíssimos, mas que, por estarem alicerçados demais no uso de imagens, não funcionam sem elas. Pelo menos para usuários do Gmail, isso tende a gerar uma experiência melhor.

Impactos negativos - As informações de geolocalização baseadas nos endereços IP usados pelos devices em que os internautas leem seus e-mails deixaram de funcionar. Ou, falando melhor: passaram a informar

que todos estão em Mountain View, Califórnia, onde fica o QG do Google. Isso porque as imagens das mensagens passaram a ser armazenadas lá e, de lá, “servidas” para os usuários do Gmail;

- Não são mais contabilizadas as demais aberturas de e-mail que aconteçam no mesmo dia, pois o armazenamento das imagens (cache) feito pelo Gmail será atualizado apenas diariamente. Assim, será difícil identificar quem é “o multiplicador do e-mail marketing” – pessoas que propagam suas mensagens para outras.

- Antes era possível inserir conteúdo baseado em imagem que muda conforme o estoque de um determinado produto – ou, ainda, o prazo de término de uma promoção. Agora, isso acabou, o que elimina o benefício de conteúdo dinâmico.

De qualquer forma, independentemente da mudança implementada pelo Gmail, vale dizer que o e-mail marketing continuará gerando excelentes resultados quando bem executado. E a melhor maneira de mensurar isso não são as taxas de abertura ou cliques, suscetíveis às variações de padrões técnicos impostos pelos provedores, mas sim o resultado incremental obtido, seja financeiro, seja em tráfego no site de sua empresa.

lwopinião

mercado

Big Data para big oportunidades U

Bruno Domingues Arquiteto principal da Intel E-mail: bruno.domingues@intel.com

O Big Data pode ser um grande aliado dos profissionais de marketing, pois os dados mais relevantes vêm de recursos acessíveis de TI 24locaweb

m estudo da Forrester Research previu que o número de e-mails enviados em 2013 chegaria a 258 bilhões – 63% superior a 2012. Como é de conhecimento comum, muitos desses e-mails passaram a ser tratados como spam pelos filtros ou pelos próprios usuários, por causa da frequência de envio e da irrelevância do conteúdo.

De fato, os números da Forbes mostram que 80% das maiores mil empresas listadas na revista ainda usam suas experiências passadas para tomar decisões de marketing, a fim de criar e otimizar suas campanhas. Apenas 11% estão usando algum dado do usuário – e, de fato, tais dados estão entre os últimos recursos usados.

Especialistas em marketing que têm se apoiado nas informações dos consumidores estão conseguindo aumentar relevância e precisão ao atingir a audiência correta e apresentam melhoras nas previsões de vendas.

O Ascena Retail Group, por exemplo, teve aumento superior a 300 vezes em vendas originadas por e-mail e 225% de aumento na taxa de conversão.

Isso prova que o Big Data pode ser um grande aliado dos profissionais de marketing, pois os dados mais relevantes na tomada de decisão

e customização dessa interação com o cliente vêm de recursos acessíveis de TI. Entre eles, destacam-se: • Interação com o e-mail: links clicados, taxas de abertura, conversões de clientes e métricas relacionadas.

• Interação com a web: para o analista de marketing acompanhar, por meio da seção do browser do usuário, sua interação com o site. Isso fornece importantes dados, entre eles se o usuário preencheu o cadastro no site e abandonou o carrinho de compras no meio. Essas pistas são valiosas para a estratégia da campanha.

• Dados de compras: o conhecimento de compras passadas dos clientes dá alguma previsibilidade de compras futuras.

Ao saber que o cliente comprou um smartphone, por exemplo, torna-se mais previsível que sua próxima compra seja uma capinha de proteção ou uma fonte veicular, entre outros produtos.

• Perfil e preferências: Informações sobre localização da moradia, idade, sexo podem não ser tão confiáveis quanto os dados atuais de interação com web/e-mail, porém ainda servem de referência.

lwopinião

mercado

O desafio do e-mail responsivo O Marcelo Negrini

Diretor de evangelismo da Buscapé Company E-mail: marcelo.negrini@ buscapecompany.com Dúvidas: http://lwgo.to/zk

É preciso se aprofundar nas técnicas para usá-las de maneira correta. Não apenas a formatação tem de ser responsiva, mas também o conteúdo em si 26locaweb

crescimento das plataformas móveis traz desafios para quem trabalha com e-mail marketing. Por volta de 50% dos e-mails de publicidade são lidos em dispositivos como smartphones e tablets.

E, para complicar a vida de quem os envia, uma mesma pessoa pode ler seu e-mail no desktop, no tablet ou no telefone, dependendo do momento.

Portanto, não adianta mandar um e-mail otimizado para desktop ou mobile. Você precisa de e-mails que se adaptem dinamicamente a qualquer dispositivo. Ou melhor: que sejam “responsivos”.

O que é e-mail responsivo?

O e-mail responsivo se adapta a uma série de fatores, como tamanho e resolução da tela, tipo de dispositivo e sua orientação. Isso é importante, sobretudo, nos smartphones.

A questão não é só de tamanho, pois muitos e-mails construídos com boas práticas para desktop também precisam de rolagem vertical e horizontal para serem vistos completamente. Além disso, nem sempre uma unidade completa de informação cabe na tela de uma vez.

Quais são as limitações?

Muitas das técnicas usadas na criação de websites responsivos não funcionam dentro dos

clientes de e-mail – ou, pela sua natureza, devem ser implementadas de maneira diferente. Nem todos os clientes de e-mail tratam CSS da mesma maneira, e ele precisa ser inserido no próprio corpo da mensagem.

Muitas dessas dificuldades podem ser resolvidas com o uso de templates responsivos fornecidos por empresas de disparo (como a Locaweb). Ainda assim, é preciso se aprofundar nas técnicas, para usá-las de maneira correta. Não apenas a formatação deve ser responsiva, mas o conteúdo em si também.

Por fim, existe a questão do caminho seguido pelo usuário ao clicar em um link de e-mail. O seu site de destino é responsivo? Nada é mais frustrante do que abrir um e-mail marketing de comércio eletrônico e ser levado a um site sem adaptações para mobile.

Não é só para técnicos Uma boa estratégia de e-mail marketing responsivo passa por todo o time. O pessoal de marketing precisa criar em torno das novas limitações. Designers e desenvolvedores têm de tomar todos os cuidados técnicos e trabalhar em conjunto, ficando de olho nas taxas de abertura, clique e converso. É um processo de tentativa e erro. Por isso, comece imediatamente.

Existe um lugar onde tecnologia, talento e descontração trabalham juntos.

Venha trabalhar na Locaweb.

A Locaweb foi eleita uma das melhores empresas para se trabalhar no Brasil. Isso só foi possível porque nosso time é feito por pessoas apaixonadas pelo que fazem. Gente que respira tecnologia e trabalha junto pela inovação.

Faça parte deste ambiente criativo e descontraído.

Vagas nas áreas de Tecnologia e Negócios.

Seja um Locaweber.

Acesse Locaweb.com.br/trabalheconosco

Locaweb.com.br

lwopinião

mercado

Diego Eis

Autor do blog: http://tableless.com.br E-mail: diego@tableless.com.br Twitter: @diegoeis

Cada cliente de e-mail tem suas restrições de segurança e um suporte específico aos padrões web 28locaweb

E-mail Marketing e o CSS E

squeça tudo o que você sabe sobre CSS 3, HTML 5, JavaScript e qualquer outra novidade que tenha visto nos últimos 10 anos. Para fazer um newsletter, você não vai usar nada disso.

Criar e-mail marketing é chato. Não é fácil e, provavelmente, não vai ficar do jeito que você quer na primeira ou na segunda vez. Se você reclama do Internet Explorer quando vai fazer seu código, provavelmente ainda não lidou com clientes de e-mail. É um mundo bem diferente do que conhecemos e estamos acostumados.

Eu sei que você gostaria que eu estivesse exagerando, mas não estou. Cada cliente de e-mail tem suas restrições de segurança e um suporte específico aos padrões web. Os online, como o Gmail, têm preocupações que um cliente instalado, como o Outlook, não precisa ter. É por isso que sempre temos de voltar à base, com o mínimo de features possível.

Prova disso é que as tabelas funcionam bem em todos os clientes de e-mail. É com elas que você deve estruturar o layout. Nada de float, que não funciona no Outlook, seja para o cliente online, seja para o instalado. Mas funciona em todos os outros provedores de e-mail. Com as tabelas, você poderá usar as propriedades font e text,

com todos os seus respectivos valores. Logo conseguirá formatar a tipografia do e-mail, contanto que use apenas font do sistema, porque a propriedade font-face funciona apenas no Apple Mail e em aparelhos que rodam iOS. Além disso, sem seletores CSS não se consegue fazer muita coisa, né? Pois é… Vamos continuar sem fazer muita coisa. O selector mais básico, que chamamos de “selector encadeado” − feito assim “div p” −, pode não funcionar no Gmail. Em todos os outros provedores ele roda.

Width funciona em tudo. Height só não roda em Outlook 2007/2010 e 2013. Já padding e margin podem ser usadas à vontade. Perceba que as principais propriedades do CSS não são aceitas perfeitamente pelos clientes de e-mails conhecidos. Na verdade, até podem ser, mas você vai precisar abrir mão de alguma delas.

De acordo com o Litmus, serviço que testa e-mail marketing, o cliente de e-mail do iPhone é o mais popular. Depois, vêm Outlook, Android, iPad, Apple, Apple Mail, Yahoo! Mail e Gmail. Confira em http://emailclientmarketshare.com.

Lembre-se: nesse ambiente de e-mails, teste exaustivamente. Não acredite apenas em serviços online para analisar seus e-mails. Teste pessoalmente em todos os clientes de e-mail que puder. Essa é a melhor forma de se dar bem.

l i a m E m

arket Entenda por que o e-mail marketing é o queridinho dos marqueteiros e saiba como construir uma peça infalível de acordo com o seu tipo de negócio e o público que você deseja atingir Por Bianca Bellucci

30locaweb

capae-mailMKT capaerroseacertos

ting U

m garoto entra no site de sua loja de games favorita.

Após ele colocar no carrinho virtual os jogos dos quais mais gostou, a empresa solicita o preenchimento de um cadastro para o envio de novidades por e-mail. Do outro lado do país, uma menina faz compras em uma filial física da mesma loja.

Depois de escolher o que vai arrematar, o atendente pergunta se ela quer se registrar para receber notícias sobre lançamentos futuros por e-mail. Com o cadastro aprovado pelos clientes, os dois clientes passam a fazer parte do mailing de e-mail marketing da marca. E, a partir daí, a empresa tem em mãos uma das maiores ferramentas publicitárias disponíveis no mercado. Simples assim,

porém com algumas regras que devem ser cuidadosamente observadas.

Para começo de conversa, ao contrário do spam, o e-mail marketing deve ser solicitado pelo destinatário. Além disso, ele tem um código ético que deve ser seguido, chamado CAPEM (Código de Autorregulamentação para a Prática de E-mail Marketing). Entre suas regras, está o fato de o remetente ter de oferecer ao cliente a opção clara de opt-out (descadastro). Além disso, só é permitido enviar mensagens por um endereço eletrônico vinculado ao seu nome de domínio próprio (por exemplo, contato@nomedaempresa.com.br). Para conferir o código completo, acesse o site http://lwgo.to/11s. E para saber mais sobre a ferramenta queridinha dos marqueteiros, vire a página.

locaweb31

capae-mailMKT

Ao contrário do spam, que muitas vezes incomoda quem o recebe, o e-mail marketing deve ser solicitado pelo destinatário.

Além disso, ele deve seguir um código chamado CAPEM o esquema correto Um bom e-mail marketing é aquele que, antes de tudo, é honesto em relação às técnicas de envio e tem resultado eficiente. Acima do design chamativo e atrativo, a campanha deve gerar retorno para o anunciante. O produto tem de ser desenvolvido e direcionado para públicos específicos, que estejam realmente interessados naquele determinado conteúdo.

Segundo especialistas, parece simples, mas para que o e-mail marketing cumpra seu objetivo, ele deve endereçar questões complexas.

Entre elas, destacam-se: conteúdo, segmentação de base, configurações técnicas no domínio de remetente e infraestrutura de envios.

Dessa forma, para criar de forma correta um e-mail marketing eficiente, o usuário deve seguir cada etapa do projeto cuidadosamente.

Primeiramente, é preciso elaborar

32locaweb

E-mail marketing em números

Confira o potencial de mensagens enviadas corretamente Em terra de spam, quem consegue emplacar um e-mail marketing é rei. O Brasil é responsável por 36,3% de todas as mensagens indesejadas enviadas na América Latina. O estudo, realizado em agosto de 2013 pela Trend Micro, empresa de segurança de conteúdo para a internet, mostra que o País do carnaval e do futebol é seguido de longe pelo México (18,1%) e pela Argentina (11,9%).

Em relação às peças corretas de e-mail marketing, números apontam que 59% das enviadas chegam à caixa de entrada dos brasileiros.

Os dados da Return Path, empresa de certificação e monitoramento de reputação de e-mails, foram divulgados em agosto de 2013 e também revelam que 15% das mensagens caem na caixa de spam e 25% são perdidas ou bloqueadas.

O comportamento do internauta também pode ser mensurado pelas

empresas que desejam usar esse recurso. Em 2013, 44% das pessoas ao redor do mundo fizeram ao menos uma compra por meio de uma promoção recebida por e-mail. O dado divulgado pela ExactTarget, provedora global de softwares de marketing interativo, faz parte de um estudo que analisou o desempenho do e-mail marketing e seus receptores nos últimos meses.

A pesquisa também mostrou que, a cada US$ 1 (cerca de R$ 2,35) investido em campanhas, são retornados em média US$ 44,25 (cerca de R$ 104,13). Dos e-mails que chegam até a caixa de entrada, 64% deles são abertos por causa do que está escrito no “Assunto”. Se a mensagem for personalizada, a chance de o conteúdo ser aberto sobe para 22%. A análise revela, por fim, que 64% dos receptores abrem seus e-mails em um smartphone e o melhor dia da semana para disparar uma mensagem é a segunda-feira.

capae-mailMKT

a campanha (com continuidade e definição do que falar, quando falar e para quem falar). Depois, deve-se ter em mãos um mailing qualificado (formado apenas por contatos que tenham aceitado receber as mensagens). Por último, é necessário ter uma peça com design profissional e atraente, com criação em HTML, layout bem distribuído e call-to-action – links ou funções que levam o usuário a realizar ações.

Vale ressaltar que o cenário atual já não comporta trabalhos amadores.

“Há muito tempo o e-mail marketing deixou de ser uma ferramenta de comunicação em massa. Hoje, as mensagens personalizadas, baseadas nos interesses e no perfil de navegação dos usuários, têm muito mais chances de converter internautas em clientes efetivos”, diz Victor Popper, diretor comercial e presidente da All In, empresa que criou uma poderosa ferramenta de envio de e-mail marketing, adquirida recentemente pela Locaweb.

Construa um mailing Imagine a seguinte situação: uma empresa pequena decide lançar sua primeira campanha de e-mail marketing. Por não ser muito conhecida no mercado, ela decide comprar um mailing pronto.

Disseram que usá-lo era uma opção certeira e que geraria muito retorno. Mas estavam redondamente enganados. “A compra de uma base é o pior erro que um gestor de e-mail marketing pode cometer em suas estratégias”, adverte Popper.

Lembre-se de que o internauta deve ter concedido anteriormente a permissão para que o conteúdo fosse enviado a ele. Uma lista de contatos comprada, porém, não inclui a

Para Victor Popper, da All Inn, o e-mail marketing não é mais uma ferramenta de massa, mas sim uma peça personalizada

informação sobre o usuário querer receber o e-mail ou não.

“O ideal é criar uma estratégia de aquisição para a empresa obter uma base de contatos própria. Tente usar todos os meios disponíveis no mercado, como mídias sociais, call centers, lojas físicas, entre outros. Essa parte da estratégia é fundamental para o sucesso do processo”, recomenda o sóciodiretor da Next Target, Danilo Fadel.

Os especialistas ainda deixam claro que o custo financeiro diminuto da compra de bases prontas não compensa o prejuízo que isso provoca na qualidade de entrega. Isso sem contar as reclamações de pessoas insatisfeitas por receberem spams. É fundamental evitar, também, a prsença de spamtraps na base adquirida. Tratam-se de ferramentas usadas por provedores de e-mails para identificar mensagens indesejadas. “As spamtraps podem prejudicar radicalmente a

reputação dos remetentes dentro dos provedores. Ao perceberem que muitas das mensagens enviadas não estão gerando engajamento, rebaixam sua reputação e passam a direcionar seus e-mails para a caixa de spam. Isso reduz significativamente o potencial de retorno dos investimentos (ROI) nas campanhas de relacionamento”, conta Popper.

Uma campanha honesta precisa, acima de tudo, oferecer ao receptor a opção de remoção do mailing, geralmente posicionada no rodapé

locaweb33

capae-mailMKT

fique de olho no que deu certo

Inspire-se em algumas peças que obtiveram sucesso O e-mail marketing chamativo, com ofertas atrativas e chamada agressiva da loja de utilidades domésticas Ricardo Eletro conquistou clientes desde o início da atuação da empresa mineira em São Paulo. “Começamos a avaliar o comportamento de clientes em 2010.

Primeiramente deixando o carrinho de lado e depois com o abandono de navegação. Dessa maneira, oferecemos o produto certo para o consumidor que esteja interessado em algo que vendemos”, diz a gerente de marketing da companhia, Karina Belo.

Uma das peças que mais têm dado resultado é a “Relâmpago”. Nela, são divulgadas de uma a três ofertas com preços exclusivos. “Batemos forte no senso de urgência, já que o e-mail é válido por apenas um dia, e sempre trabalhamos com a mesma identidade visual. Os produtos divulgados são negociados exclusivamente para esta ação”, explica Karina. Essa peça tem alcançado resultados altos, acima da média dos outros e-mails distribuídos.

Outra empresa que tem se beneficiado com a ferramenta é a Brandsclub, clube de compras de moda. Seguindo os parâmetros e critérios RFV (Recência, Frequência, Valor), o e-mail marketing é um canal

34locaweb

fundamental desde a criação da marca, há quatro anos. “Impactamos diariamente milhões de pessoas. A mensuração de todos esses disparos nos ajuda a melhorar as próximas peças e redefinir nossos critérios de segmentação e abordagem”, diz o diretor de marketing da empresa, Jose Larrucea.

A Brandsclub conta com parceria da Return Path, que aumenta a taxa de entregabilidade dos e-mails, além de gerar maior eficácia e eficiência para atingir os usuários. A marca também usa o double opt-in. “Ele consiste em um primeiro cadastro do usuário por meio de um formulário. Na sequência, segue um disparo de e-mail ao endereço cadastrado para que o cliente possa clicar e confirmar o fluxo de comunicação”, explica Larrucea.

André Vasconcelos, da HitMídia, alerta que quem compra uma base de e-mail tem baixas taxas de retorno da campanha

Os mailings comprados ainda podem apresentar vários contatos com erros, duplicados ou até mesmo inválidos. “Cadastrar e enviar bases nessas circunstâncias pode ser prejudicial. A empresa terá como retorno baixas taxas de aberturas do e-mail, além de poder afetar a entrega para os contatos válidos”, diz o diretor geral da agência de comunicação especializada em marketing digital HitMídia, André Vasconcelos.

Entenda os provedores A reputação é fundamental para determinar se o e-mail marketing que

Jose Larrucea, diretor de marketing da Brandsclub: e-mail marketing de sucesso

capae-mailMKT

O produto tem de ser desenvolvido e direcionado para públicos específicos, que estejam realmente interessados no conteúdo Na hora de criar as peças, é preciso respeitar os protocolos de segurança aplicados por cada provedor de e-mail, como o Gmail

você desenvolveu cairá na caixa de entrada do cliente ou não. Diversos fatores podem influenciar essa classificação. Entre eles, índices de envio para receptores desconhecidos, reclamações de usuários e número de spamtraps em suas listas.

Geralmente, os remetentes precisam realizar configurações de autenticação para seus envios, sendo que os provedores suportam inúmeros tipos de protocolos. Os principais são: SPF (Sender Policy Framework), DomainKeys e DKIM (DomainKeys Identified Mail). O uso de qualquer um desses protocolos comprova a origem e a veracidade do e-mail marketing. É importante ressaltar ainda que cada provedor também tem características próprias para identificar os spams. O Gmail, por exemplo, usa a técnica batizada de Reconhecimento de Caracteres, que é baseada em algoritmos que conseguem classificar os resultados de pesquisas feitas no buscador Google para reconhecer as imagens que indicam o que é um e-mail e o que é um spam.

O Yahoo!, por sua vez, usa o Feedback Loop (FBL). A partir dele, toda vez que um usuário classifica o e-mail marketing como spam, a empresa recebe um alerta com o endereço de e-mail do internauta.

Essa ferramenta é controlada por meio de assinaturas e é necessário habilitar o sistema de autenticação DKIM para usá-la.

Enquanto isso, o Hotmail é armado com o painel SRD, que classifica as mensagens com base no conteúdo e na reputação do remetente, de acordo com a experiência dos próprios usuários. Para ranquear as empresas, a Microsoft convida pessoas que têm contas ativas há bastante tempo. O grupo selecionado repassa para o provedor as percepções que tem dos e-mails que recebem.

Assim, classificam como spam ou reconhecem como remetentes verdadeiros. A identidade dos internautas é mantida em sigilo.

exigências. Pior: não adianta gerar uma peça que respeite as normas, mas que chegue ao usuário como um quebra-cabeça, com só algumas partes do conteúdo visíveis.

Para evitar esses inconvenientes, a principal dica é que o template seja sempre criado em linguagem HTML. “O mais importante é

Acerte no alvo Não adianta entender como funciona a política usada pelos provedores, se você não sabe como criar um e-mail marketing que supere com eficiência essas

Segundo Beatriz Costa, da Locaweb, deve-se trabalhar corretamente as imagens para não ser classificado como spam

locaweb35

capae-mailMKT

Para verificar como o e-mail marketing está chegando à caixa de entrada do receptor, crie um modelo, envie a você mesmo e faça testes Olavo Mello, da Dix, ressalta que a experiência acumulada pelos testes colabora para a visualização adequada das peças

lembrar que o layout de um e-mail não deve ser igual ao de um site.

O HTML precisa ser construído em tabelas, da forma mais básica possível”, explica Popper.

“Os grandes provedores têm algum tipo de bloqueio de segurança para imagens que fiquem posicionadas no corpo da mensagem. O resultado disso é que, ao enviar uma ilustração ou foto inteira, a chance de o remetente não conseguir vê-la ao abrir o e-mail é muito grande. Como consequência, o provedor pode classificar o seu domínio como spam por não reconhecer o conteúdo enviado”, diz a analista de marketing de produtos da Locaweb, Beatriz Costa.

Para verificar como a campanha está chegando à caixa de entrada do receptor, crie uma peça-modelo.

Use-a como teste, envie para você mesmo e, a partir dela, modifique o conteúdo para o e-mail marketing seguinte. “Isso facilitará bastante o trabalho e garantirá a visualização correta de suas campanhas”, conta

36locaweb

Olavo Mello, diretor da Agência Dix, especializada em soluções para internet.

“O teste A/B, bastante usado nas áreas de marketing, é essencial para avaliarmos as preferências e comportamentos dos clientes.

A partir da análise do perfil de navegação, conseguimos oferecer os conteúdos dispostos da maneira que gera maior engajamento”, ratifica Popper, da All In.

Danilo Fadel, da Next Target: “O conteúdo criado deve direcionar o usuário a algum tipo de interação, como visitar um site”

Explore datas importantes Veja a importância de criar um calendário com as ações de marketing Como as datas comemorativas são programadas ao longo do ano, vale a pena planejar campanhas para elas. “Crie um calendário anual com celebrações, lançamentos importantes, eventos. O e-mail marketing pode ser a mídia principal da campanha ou apenas um apoio para outros meios”, explica o sócio-diretor da Next Target, Danilo Fadel.

O planejamento com antecedência evita erros e permite criar algo especial, que chamará a atenção do público-alvo. Além disso, é preciso definir quem deverá receber cada e-mail. Uma campanha de aniversário de uma determinada cidade, por exemplo, deve ser enviada apenas para aqueles que nasceram ou vivem na região.

Por ser uma mídia dinâmica e flexível, vale dizer que o e-mail marketing pode ser previsto meses antes de ser enviado, mas também alterado ao longo do ano de acordo com a demanda da empresa. “É complicado criar uma campanha e engessá-la com muita antecedência, principalmente para os varejistas, que têm uma dinâmica maior em relação à demanda de seus clientes e ao limite do estoque”, conclui Fadel.

Outra boa dica é não focar apenas em datas tradicionais.

Explore as comemorações menos relevantes, pois elas podem ser um excelente tema para uma campanha.

“Que tal ampliar suas vendas em materiais esportivos oferecendo descontos exclusivos no Dia do Atleta (21/dez) ou aumentar o acesso de seu blog sobre culinária no Dia do Muffin (18/dez)?”, sugere o diretor da Agência Dix, Olavo Mello.

capae-mailMKT

Email Marketing Locaweb Confira algumas campanhas de sucesso realizadas na Locaweb

Campanha de Divulgação Locaweb Cloud Computing: o cabeçalho do e-mail deixa claro de forma divertida e descontraída o conteúdo que o leitor encontrará no corpo da mensagem.

Campanha do Estado de S. Paulo aposta em elementos bem-aceitos pelo público, como botões coloridos, splashs e links em negrito

AdWords: Campanha de Divulgação Google AdWords Locaweb: destaque para os cards de planos claros e coloridos.

Outra dica na hora de elaborar a campanha é visualizar as taxas de entrega e entregabilidade, que, ao contrário do que muitas pessoas pensam e os nomes sugerem, são fatores distintos e que devem ser observados de maneira específica.

As taxas de entrega são calculadas com base no número de e-mails enviados que chegaram aos provedores – ou seja, que não sofreram nenhum tipo de bloqueio no caminho. “O ‘x’ da questão é que, avaliando a taxa de entrega, não conseguimos saber para onde o e-mail marketing foi direcionado, se para a caixa de entrada ou para a caixa de spam”, explica Popper.

A entregabilidade, por sua vez, é um processo bem mais refinado. Refere-se ao conjunto de configurações e estratégias baseadas em boas práticas de mercado que os provedores atribuem para entregar, ou não, um e-mail à caixa de entrada.

“Este é um dado que mostra o destino final do e-mail marketing e a qualidade da entrega”, diz Beatriz.

Caso precise usar imagens na campanha, tenha em mente que as fotos devem ser produzidas e ter um tratamento profissional

Além da questão da entrega e entregabilidade, a reputação também pode ser usada como base para o cálculo do retorno dos investimentos (ROI) de uma campanha. Uma alta taxa de e-mail marketing entregue na caixa de entrada, por exemplo, significa uma maior probabilidade de abertura e cliques.

atinja o cliente Depois de planejar a campanha, fazer um mailing próprio, entender como funciona a política dos provedores e criar a peça em cima de um HTML básico, chega finalmente o momento de desenvolver um design atrativo para

locaweb37

capae-mailMKT

As peças devem ter um design responsivo para abrir corretamente no computador e também em dispositivos móveis, como tablets

atingir o cliente. “O conteúdo criado deve direcionar o usuário a algum tipo de interação, como visitar um site, comprar um produto, ler um artigo, entre outros”, explica Fadel.

Para isso, sempre tenha um call-to-action claro e direto. Botões coloridos, setas e links em negrito são bons caminhos. Além disso, vale a pena colocar o conteúdo mais relevante no topo à esquerda. “Este é o primeiro local para onde os olhos se dirigem e também é o ponto que sempre será visto na visualização básica”, conta Beatriz.

Apesar de a peça de e-mail marketing ter como objetivo funcionar mesmo sem a exibição de

38locaweb

imagens, caso sejam indispensáveis, as fotos devem ser produzidas e ter um tratamento profissional. Imagens com baixa resolução nunca devem ser usadas.

Além disso, o final da mensagem sempre deve apresentar um link para cancelamento da inscrição (opt-out), sem contar outro para feedbacks ou comentários (principalmente no caso de newsletters). Mas tudo isso só funcionará se a empresa souber corretamente quem é seu público-alvo e como atingi-lo.

“Uma marca premium pode esconder parcelamento no layout.

Por outro lado, uma empresa mais popular terá melhores resultados apresentando os valores das parcelas em vez do preço cheio.

Essas técnicas comuns de mercado devem estar presentes nas peças”, conta Fadel.

Como os dispositivos portáteis tornaram-se fundamentais para impulsionar qualquer negócio, é importante também compor o e-mail com técnicas de design responsivo, às quais permitirão que ele seja ajustado automaticamente para quem visualizar a mensagem em um smartphone ou tablet, por exemplo. Mas lembre-se de que, independentemente da plataforma, o design não pode ser grosseiro, não ter estilo nem se esquecer da personalidade da marca.

“Errar no visual é o mesmo que gritar para o usuário: ‘Olha a pamonha!’. Além de deixá-lo irritado e perdido, você vai conseguir contabilizar mais um opt-out em sua lista”, diz Mello.

Técnicas para realizar uma boa peça e atingir o público-alvo, portanto, não faltam. Cabe a você adotá-las de acordo com os seus objetivos e aproveitar o potencial

crie Um bom e-mail marketing em três passos Solicitado pelos clientes e com um código a ser seguido, o e-mail marketing está longe de ser um spam e só deve apresentar o que é realmente relevante para o usuário.

De forma simples e básica, entenda em três passos qual é o procedimento adequado para criar uma peça eficiente: 1. Planeje a campanha Antes de sair por aí disparando e-mails, elabore corretamente sua campanha. Tenha planejado o que você vai falar, quando vai falar e com quem vai falar. Respondendo os três itens, sua campanha estará pronta para chegar até a caixa de entrada dos usuários.

2. Crie seu mailing Comprar uma lista de contatos é inaceitável. Faça seu próprio mailing conquistando clientes por meio de mídias sociais, call centers, lojas físicas, etc. Lembre-se de que ele deve ser formado apenas por usuários que tenham aceitado receber as mensagens.

3. Construa a peça O instrumento da sua campanha deve ter design profissional e atraente. O layout tem de ser bem distribuído e contar com um call-to-action claro e direto. A criação em HTML simples é insubstituível. O link para opt-out também não deve deixar de aparecer no final do e-mail.

do e-mail marketing. Desprezá-lo é o que você não pode fazer, já que ele não se tornou o queridinho dos marqueteiros à toa. E olha que isso já faz muito tempo, ao contrário de modinhas passageiras da internet.

Tableless web design Uma visão profunda da filosofia de desenvolvimento que visa banir o uso dos elementos de tabela do HTML para controle de layout de um site Por Adèle Helena Ribeiro e Max Reinhold Jahnke

40locaweb

designTablelessWebDesigner

Página de Diego Eis, colunista da revista da Locaweb e um dos maiores especialistas e entusiastas do assunto Tableless no Brasil

S

e pensar com calma, você verá que o Tableless é uma filosofia que vai um pouco além de simplesmente não usar tabelas onde não se deve. É, na verdade, um movimento que visa fazer com que desenvolvedores compreendam o significado das tags HTML e as usem para criar e representar a semântica do conteúdo, e também fazer com que o layout seja montado com a linguagem certa, o CSS. Mas se você usou tabelas para posicionar elementos em seu site,

Tableless é um movimento que visa fazer com que profissionais que trabalham com web compreendam o significado das tags HTML

não se preocupe. É um erro fácil de ser cometido. Por exemplo, quando se pensa em montar um site, logo vêm à mente alguns layouts comuns, como um cabeçalho para apresentar o site, um rodapé com informações de copyright e políticas do site e duas ou três colunas separando o conteúdo.

Colunas! Ou seja, a própria maneira como pensamos nos induz ao erro.

Não se preocupe, vamos aprender um pouco de HTML e CSS e resolver esse probleminha de design.

Arrume seu site A ideia é construir um simples site de exemplo usando tabelas em layout e aprender como modificá-lo da maneira mais adequada.

O site vai ser muito simples. Ele vai ter um cabeçalho com uma mensagem de boas-vindas e um rodapé no final da página. Além disso, faremos uma coluna na esquerda com um menu,

Acima, um exemplo de layout de página eletrônica desenvolvida sem utilizar tabelas em sua interface

teremos no centro uma coluna de conteúdo e mais uma coluna à direita, que poderia ser usada para propaganda.

O código HTML usando tabelas é muito simples. Basta usar as conhecidas tags para criação de linhas e colunas e preencher com as informações desejadas.

Saiba mais sobre o assunto Quem quiser se informar melhor sobre Tableless web design e aprender diversas outras técnicas de web design pode procurar informações no site criado por Diego Eis, o papa do Tableless no Brasil: http://tableless.com.br.

locaweb41

designTablelessWebDesigner

Interface do site Tableless.com.br: trata-se de um dos principais pontos de encontro digitais a respeito do desenvolvimento sem tabelas

<html> <body> <table border="0" cellspacing="0" width="600px"> <tr> <td colspan="3" style="backgroundcolor:#EEEEEE;text-align:center;">

<h1 style="margin-bottom: 0;">Bem vindo...</h1> </td> </td> <tr cellpadding="20" style= "vertical-align: top;"> <td style="width: 130px;">Entradas</ br>Pratos quentes</br>Petiscos</td> <td style="background-color:#EEEEEE; vertical-align: top; height: 200px;"> Conteúdo do site aqui.</td> <td style="width: 130px;">Cervejas belgas</br>Vinhos italianos</br> Uísques escoceses</td> </tr> <tr> <td colspan="3" style="backgroundcolor:#EEEEEE;clear:both; text-align:center;fontweight:bold;">Pé do site</td>

42locaweb

</td> </table> </body> </html> Agora, há um layout bem simples e também algumas poucas informações de formatação. Infelizmente, essa maneira de organizar o site possui diversos problemas. O problema mais óbvio é que usando essa organização é muito mais difícil manter o site.

Para fazer uma simples mudança na posição dos menus, seria necessário reestruturar toda a tabela.

Além disso, se quiser um efeito mais bonito, com sobreposição de elementos, por exemplo, seria necessário criar uma tabela ainda mais complicada.

Alguns desenvolvedores e profissionais de internet chegam a usar uma tabela para posicionar várias imagens, algumas vezes imagens de um único pixel, tudo isso para alcançar o efeito desejado. Tais improvisos não são mais necessários com o CSS.

Bem, agora vamos aprender a consertar o site que acabamos de fazer.

A primeira tag que devemos aprender a usar é a tag div, que serve para criar um elemento que representa um bloco de informação. Assim, consegue-se agrupar e classificar informações que estão de alguma forma relacionadas.

O atributo da tag div que se precisa aprender a usar é o class.

Com ele, informa-se qual é a classe da informação e consegue-se tratar todas as informações da mesma classe de maneira semelhante.

Tabelas são amigas Algumas pessoas se confundem e pensam que, ao seguir a filosofia tableless web design, não se deve usar tabelas nunca.

Mas há informações que são melhores organizadas em tabelas e é importante aprender a identificá-las.

designTablelessWebDesigner

mesmo tamanho. Os menus tinham 130 px de largura. Serão mantidos esses tamanhos também nas classes menu1 e menu2.

Outro detalhe desejado são as cores, então configure header, content e footer para ficarem cinza.

A parte mais importante agora é entender o posicionamento dos objetos.

Para os objetivos do tutorial, basta dizer qual menu ficará à esquerda e qual à direita. Isso é feito usando o atributo “float” com a opção “right” ou “left”.

Transformando a explicação acima em CSS e acrescentando algumas outras informações de formatação, obtém-se o seguinte código:

Acima, o endereço do W3C a respeito do Tableless (http://lwgo. to/12d), datado de 2005

Na página, pode-se destacar quatro grupos de informações importantes: o cabeçalho, que chamaremos de header no código; o menu da esquerda, menu1 no código; o da direita, menu2; o conteúdo, content; e o rodapé, que representaremos como footer.

Crie um div para cada uma dessas regiões e depois coloque tudo em um div maior, com nome de container. Esse último div pode parecer desnecessário, mas com ele pode-se usar o CSS e controlar vários aspectos gerais da página, sem que haja a necessidade de configurar div por div. Transformando toda a discussão acima em código, obtém-se o seguinte HTML. <html> <head> <link rel="stylesheet" type="text/css" href="tableless.css"> </head> <body> <div class="container"> <div class="header"> <h1>Bem vindo...</h1> </div> <div class="menu1"> Entradas</br>Pratos quentes</ br>Petiscos

</div> <div class="content"> Conteúdo do site aqui. </div> <div class="menu2"> Cervejas belgas</br>Vinhos italianos</br>Uísques escoceses </div> <div class="footer"> <b>Pé do site</b></div> </div> </body> </html> A primeira coisa que se pode notar nesse código é o quão legível ele é em comparação com o outro. Note também que, apesar de o código não dizer nada sobre o posicionamento dos objetos, ele deixa bem claro qual é o conteúdo relevante e os classifica de maneira inteligente.

Mas se você escrever esse código e olhar o resultado em seu navegador, vai perceber que a página está bem feia. Vamos então aprender como fazer com que o HTML acima fique o mais parecido possível com a página que tínhamos feito anteriormente.

A tabela anterior inteira ocupava 600 px de largura. A ideia então é configurar container para ter esse

.container { width: 600px; } h1 { margin-bottom: 0; } .header { background-color: #EEEEEE; text-align: center; } .menu1 { width: 130px; float: left; } .content { background-color: #EEEEEE; height: 200px; width: 340px; float: left; } .menu2 { width: 130px; float: right; } .footer { background-color: #EEEEEE; clear: both; text-align: center; } Se você rodar em seu navegador, notará que o resultado final ficou praticamente idêntico ao que conseguiu-se com tabelas, tendo um posicionamento diferente por uns poucos pixels de diferença. É claro que seria possível deixar o layout exatamente igual, mas isso não foi feito para manter o código mais simples e fácil de entender.

locaweb43

Seguranรงa no WordPress 44locaweb

especialsegurançawordpress

Confira uma seleção de dez plug-ins desenvolvidos com o intuito de deixar o seu site ou blog mais protegido Por Bianca Bellucci

H

á pouco tempo, uma série de sites criados em WordPress sofreu um pico de ataques que causou enormes prejuízos aos usuários. Estima-se que mais de 90 mil computadores tenham sido infectados. O surto atingiu, principalmente, páginas que tinham como usuário a palavra “admin” e cerca de 2.500 combinações de senhas comuns.

Após o ocorrido, plug-ins de segurança passaram a ser desenvolvidos em larga escala a fim de blindar os sites e blogs criados no sistema. Ferramentas que vão desde um antivírus para a plataforma até configurações que espiam as tentativas de login estão entre os recursos oferecidos pelo próprio CMS para proteger sua página. A Locaweb em Revista selecionou dez deles para você baixar e manter seus dados em segurança. Confira.

1

Limit Login Attempts (http://lwgo.to/12i) Este plug-in permite configurar um número limite de tentativas de login. Assim, o usuário pode programar o aplicativo para ter, por exemplo, no máximo cinco tentativas. Após exceder esse número, o IP será bloqueado e o login não poderá ser feito. Essa função evita, principalmente, ataques de força bruta, nos quais um sistema maligno tenta várias combinações de senhas e logins até obter sucesso.

2

WP-Sentinel (http://lwgo.to/12j) Depois de instalado, o WP-Sentinel é automaticamente carregado antes de todos os plug-ins instalados em seu site. O objetivo é checar as solicitações HTTP e ver se há algo errado com o blog. Caso a ferramenta identifique uma falha, ela bloqueia o acesso, exibe uma mensagem de erro para o usuário e envia um e-mail para o administrador com detalhes do ataque. Assim, ficará mais fácil proteger seus dados e evitar que algo grave aconteça.

locaweb45

especialsegurançawordpress

3

Acunetix WP Security (http://lwgo.to/12k) O Acunetix WP Security verifica possíveis falhas criadas no site ou blog em WordPress. Ao encontrá-las, sugere as correções que devem ser feitas.

Durante o processo, o plug-in verifica senhas, permissão dos arquivos, banco de dados, proteção da área administrativa, entre outros. Recomenda-se que, caso o plug-in peça para realizar uma modificação, o usuário faça um backup completo do sistema com antecedência. Tudo para que um dado importante não seja apagado por engano.

4

BackUpWordPress (http://lwgo.to/124) Como o nome já diz, este plug-in tem a função de fazer um backup de todo o conteúdo do seu blog ou site desenvolvido no WordPress, incluindo o banco de dados. O programa copia os arquivos no horário que o usuário programar e oferece a opção de enviar o backup diretamente para o proprietário. Uma boa dica é usar o BackUpWordPress antes do Acunetix WP Security (veja o tópico 3, acima).

5

Theme Authenticity Checker (TAC) (http://lwgo.to/12l) Este plug-in verifica os arquivos contidos nos templates. Ele identifica se há links ou outras funções maliciosas. Caso algum erro seja encontrado, o TAC mostra o caminho de acesso para eliminar o arquivo, o número da linha e um pequeno trecho do código suspeito. O aplicativo é útil principalmente para quem deseja encontrar links com propagandas e códigos criptografados.

6

NoSpamNX (http://lwgo.to/12m) O NoSpamNX impede que comentários automáticos sejam enviados pelos formulários. Ao identificar um sistema que queira lançá-los, o plug-in adiciona campos invisíveis, fazendo com que o texto não seja salvo. Além disso, o programa permite que o usuário desenvolva listas negras locais e mundiais para bloquear IPs, links, domínios, entre outros.

46locaweb

especialsegurançawordpress

7

Mata HOYGAN (http://lwgo.to/125) Comentários pornográficos, ofensivos e com símbolos estranhos podem ser desagradáveis. A boa notícia, porém, é que este plug-in promete eliminar os temidos HOYGAN e censurar todo conteúdo obsceno e agressivo.

Além disso, ele corrige erros ortográficos, passa o texto para letras minúsculas e trata todo o conteúdo para deixá-lo mais legível.

8

WP-reCAPTCHA (http://lwgo.to/126) Com o mérito de vir com o selo do Google, este plug-in funciona como uma poderosa ferramenta antispam. Ele gera um campo CAPTCHA, fazendo com que se crie também uma barreira impenetrável para os bots. Apesar de ser incômodo para os visitantes, é imprescindível para quem deseja acabar com comentários desagradáveis gerados por robôs.

9

AntiVirus (http://lwgo.to/12n) Tal como o nome indica, este plug-in tem função semelhante à de um antivírus. Ele foi desenvolvido para proteger seu site contra vírus, malwares, spam e outras ações maliciosas que podem danificar a página e afugentar os visitantes. Além disso, o aplicativo fornece alertas sobre possíveis ataques e neutraliza os problemas encontrados.

10

Ban Hammer (http://lwgo.to/127) O Ban Hammer é indicado para sites que permitem o cadastro de usuários, pois bloqueia determinados e-mails, IPs e domínios.

O plug-in também puxa a lista negra de seu e-mail e, dessa forma, impede quem está nela de se cadastrar em seu blog ou site. Este aplicativo também faz com que os sistemas não consigam realizar comentários automáticos e, assim, elimina possíveis spams.

locaweb47

lwserviço //Conheça as tecnologias disponíveis no mercado para impulsionar o seu negócio

Conheça a

Eventials

Ferramenta da Locaweb permite produzir e lucrar com palestras e cursos online Por Rodrigo Loureiro

M

48locaweb

está no fato de oferecer todas as ferramentas de que o usuário precisa para monetizar seu conteúdo e ganhar visibilidade”, explica Lima.

Se produzir conteúdo relevante é uma preocupação do palestrante, identificar o público-alvo também é vital para o sucesso da empreitada.

Pensando nisso, a Eventials conta com um gerador de lead qualificado que permite ao palestrante saber quem assiste às palestras. É possível formular conteúdos mais elaborados e identificados com esse espectador.

O fácil manuseio da nova ferramenta da Locaweb, aliás, é um dos atrativos do produto. Em menos

de 5 minutos é possível ao usuário cadastrar-se e iniciar uma palestra em transmissão ao vivo para o mundo. Um tutorial rápido feito por Murilo Gun, comediante e cliente do serviço, está disponível no site da Locaweb e mostra como o produto funciona com agilidade e praticidade (www.locaweb.com.br/produtos/ eventials.html).

O usuário que se cadastra no site pode optar entre dois tipos de conta. Uma é classificada como Básico, é gratuita e sem fins lucrativos. A Pró conta com a compra de créditos para garantir a opção de cobrança pelo acesso aos

Foto: Eduardo Gurman/Divulgação

uitas pessoas sonham dar palestras. Desfrutar a satisfação de expor conhecimentos para uma plateia pode ser um prazer e tanto. Fazer isso do computador de casa pode ser ainda melhor. Para facilitar isso, surgiu Eventials, o produto da Locaweb que possibilita ao internauta realizar treinamentos e palestras online.

Inicialmente, a ferramenta Eventials foi criada pela empresa homônima em 2009. Em 2011, depois de ser utilizada para transmitir o 13º Encontro Locaweb de Profissionais de Internet, foi adquirida pela Locaweb. Ela se caracteriza como uma plataforma para streaming de vídeo que permite às pessoas participarem e transmitirem palestras e eventos pela web. De acordo com dados de seu site oficial, 2 milhões de transmissões já foram entregues e mais de 5.500 vídeos produzidos desde a criação da empresa.

Desenvolvido pelo empresário Thiago Lima, o serviço chega como a solução para quem buscava uma plataforma que possibilitasse a realização de palestras online, contendo a integração com um sistema de pagamento próprio, sem necessidade de contratação de gateways. “O principal diferencial

Thiago desenvolveu o produto em 2009. Dois anos depois, em 2011, com a transmissão do 13º Encontro de Profissionais Locaweb, a Eventials finalmente se consolidou no mercado

lwserviçoeventials

Diego Eis é criador do site Tableless.com e já obteve mais de 4 mil acessos em uma palestra utilizando a Eventials

vídeos disponibilizados pelo próprio usuário. Ao optar pelo plano pago, o usuário deve escolher entre quatro diferentes modalidades que variam, principalmente, na quantidade permitida de participantes/hora em palestras gratuitas. Este número

limite pode variar de 35 até 500. Os profissionais que buscam realmente ganhar dinheiro com a produção de palestras no site podem se animar com o exemplo de Diego Eis, articulista da Locaweb em Revista, empreendedor e palestrante. O

Eventials em 4 passos 1. O primeiro passo é se cadastrar em www.eventials.com para obter acesso à utilização do produto. É possível utilizar a conta do Facebook ou do Google+ para se cadastrar de forma mais ágil.

2. A segunda ação consiste na escolha do tipo de palestra que o usuário pretende criar: Básica, palestras públicas e gratuitas, ou Corporativa, opção paga e com controle de acesso e de custos.

3. A terceira etapa nada mais é do que o preenchimento dos campos descrevendo o nome da palestra, o palestrante, o horário e a descrição sobre o tema que será abordado. A inserção de slides, imagens ou vídeos também pode ser configurada nesta fase.

4. O último passo é permitir que o site tenha acesso às configurações de câmera e microfone e começar a palestra.

O usuário deve escolher entre diferentes modalidades que variam na quantidade permitida de participantes/ hora em palestras profissional já obteve mais de 1.500 acessos em uma palestra paga. Além de outros 4 mil em um evento gratuito transmitido pela web.

Além de ser nacional, não exigir a instalação de nenhum software específico e garantir facilidade no acesso, a ferramenta também é

locaweb49

lwserviçoeventials

O serviço atende às demandas de empresas que precisam ministrar cursos online públicos ou restritos aos seus colaboradores elogiada pela eficiência do suporte.

De acordo com Eis, a equipe de apoio “ajuda na divulgação, na correção de problemas técnicos e ainda dá algumas dicas para o palestrante conseguir se habituar à ferramenta”.

Fundadora da consultoria Equipar para Vencer, a escritora Paula Quintão utiliza a ferramenta como forma de transmitir conhecimentos na área de gestão de carreiras e produzir oficinas profissionais. Ela ressalta o poder da Eventials na forma de divulgação de uma marca. “Tenho um retorno muito mais expressivo do valor da minha marca. É uma verdadeira satisfação poder levar conhecimentos e ferramentas de saber a um público interessado em aprimorar-se.”

Para empresas Com clientes como Qualcomm, Editora Globo e Catho, o novo serviço da Locaweb atende às demandas de empresas que anseiam por uma plataforma que possibilite a inserção de cursos online públicos ou restritos aos seus funcionários.

Novidades em breve A área de informática está sempre em constante atualização tecnológica.

Novos softwares surgem a cada dia e, para que a Eventials não fique para trás no mercado, Lima já planeja algumas novidades para os próximos meses.

Entre as boas-novas que os futuros clientes do serviço podem

50locaweb

A escritora Paula Quintão utiliza a Eventials como forma de transmitir conhecimentos em gestão de carreira

Foto: Leonardo Blasch

Em breve, Eventials permitirá a seus usuários terem contato com transmissões de palestras por meio de smartphones e outros portáteis aguardar estão a transmissão de palestras diretamente por um smartphone, o envio de convites personalizados utilizando técnicas de e-mail marketing, a criação de uma rede credenciada em todo o Brasil, em parceria com hotéis, para o fornecimento de uma estrutura homologada para transmissão online de eventos, entre outras.

Para mais informações, acesse www.eventials.com. Na página oficial do serviço, é possível saber mais detalhes dos planos para quem deseja contratar o serviço, além de ter contato na prática com a ferramenta.

A Eventials garante transmissão por streaming de qualidade e ininterrupta, para qualquer lugar do mundo, desde que haja um computador com acesso à rede mundial de computadores.

Requisitos mínimos para a transmissão de palestras

Apesar de não solicitar a instalação de nenhum programa específico, a Eventials necessita que o computador do transmissor tenha as seguintes configurações para a utilização do produto sem problemas: Navegador Internet Explorer 9.0 ou posterior, Firefox 2.0 ou posterior, Safari 3.0, Chrome 4.0 ou posterior; Sistema operacional Microsoft Windows XP SP2, Vista ou posterior; Macintosh OS X v10.6 ou posterior; 2 GB de memória RAM - Mínimo, sendo 4 GB o recomendado; Placa de som 16 bits; Câmera e microfone.

Marketing n

desven 52locaweb

especialmarketing

no YouTube

ndado Especialistas em divulgação digital explicam os benefícios da utilização de peças publicitárias no site Por Rodrigo Loureiro

C

om o evidente crescimento das mídias sociais e o advento da transmissão de vídeos online, o marketing virtual passou a ser mais considerado por profissionais do ramo publicitário, principalmente no site de vídeos mais famoso e acessado do mundo, o YouTube. De acordo com a página, são aproximadamente 1 bilhão de usuários únicos

mensais, alcance de até 72% da população brasileira. A plataforma é, atualmente, a segunda maior ferramenta de busca da web, atrás apenas do próprio Google (também de acordo com o próprio YouTube).

Com números expressivos, o site é mais do que um portal para assistir a gatos tocando piano.

Para o gerente da área de parcerias do Google, Alisson Pedro, os gestores descobriram no portal

Foto: Dico Kremer

Joaquin Presas é doutorando em marketing e atua como diretor de criação na agência Pontodesign

locaweb53

especialmarketing

“Hoje, é impossível não utilizar o YouTube como instrumento de marketing”

Joaquin Presas

uma importante ferramenta de publicidade. “Os empreendedores perceberam o potencial do vídeo online ao identificarem a demanda em determinado mercado e transformarem criatividade em resultado de negócios.”

Mestre em comunicação e considerado um dos cem professores e diretores de marketing mais influentes do mundo no Twitter pela revista norte-americana Social Media Marketing Magazine, Joaquin Presas ressalta a importância do site na criação de campanhas online. “Eu acredito que a boa comunicação reside na integração de diferentes ferramentas, e hoje é impossível não utilizar o YouTube como um desses instrumentos”, afirma.

Diversas são as maneiras que o serviço de vídeos do Google e o marketing se relacionam. Engana-se quem pensa que o marketing nesta plataforma está reduzido aos comerciais antes dos vídeos. O posicionamento das propagandas na página, o vídeo sequencial ao assistido, além dos anúncios virais são apenas alguns exemplos da utilização da ferramenta de marketing virtual no portal.

Porém, para que um vídeo na plataforma realmente chame a atenção do futuro consumidor, alguns cuidados devem ser tomados. “É muitíssimo importante que o vídeo tenha duração máxima de 3 minutos e que a linguagem seja apropriada para internet. Em outras palavras, deve ser rápida e interativa, de forma a agradar usuários”, destaca o gerente de parcerias da Google, Alisson Pedro.

54locaweb

Acima, exemplo de publicidade no YouTube: página de vídeos atrai usuários

YouTube Trueview O Trueview é um plano do próprio site que insere a peça publicitária antes do vídeo a ser assistido pelo usuário, possibilitando ao consumidor a liberdade de pular o comercial após cinco segundos de exibição.

O formato é considerado por Presas como o melhor para o anunciante, já que ele só é cobrado quando o internauta opta por não pular o vídeo e decide realmente assistir à propaganda. Chevrolet, Nikon, Adidas e P&G são exemplos de empresas que utilizam a ferramenta.

O desafio nesse caso é fazer com que o vídeo seja assistido integralmente pelo internauta.

“Ainda não existe uma receita ou fórmula mágica para garantir o sucesso do comercial. Entretanto, sabe-se que os elementos de

especialmarketing especialmarketing

DailyMotion, Bing Videos e Vimeo: sites de vídeo também podem ser usados para marketing

Marketing viral deve ter como objetivo gerar a rápida disseminação; não se deve enganar o consumidor por meio dele ineditismo e surpresa precisam ser considerados nos primeiros segundos do vídeo, segurando o espectador até o final do anúncio”, explica o professor universitário.

Para exemplificar a necessidade de chamar a atenção no primeiro instante do vídeo, o comercial da

Evian, marca norte-americana de água mineral, surge como um case de sucesso. A propaganda exibe logo de entrada um homem que vê em um espelho seu próprio reflexo formado por uma versão bebê de si mesmo (http://lwgo.to/12c).

A surpresa faz com que o consumidor queira saber do que se trata a peça, que termina com o slogan “viva jovem”, fazendo alusão aos benefícios físicos do consumo da água (http://lwgo.to/12o).

Marketing viral De “perdi meu amor na balada” até a satirização da Microsoft ao próprio navegador, as propagandas utilizando técnicas de marketing viral tornaram-se interessantes formas de divulgação de produtos e serviços utilizando o YouTube. O objetivo do viral é espalhar o vídeo para o maior número de pessoas,

levando em conta o público-alvo e a mensagem a ser transmitida.

Apesar de ter sido criticada por muitos internautas que se sentiram enganados pelo comercial, a Nokia conseguiu divulgar o produto que pretendia por meio da propaganda camuflada na busca de Daniel por seu amor da balada (http://lwgo.to/12e).

Já a Microsoft é outro exemplo de empresa que utilizou o viral para divulgar a nova versão do, como dito na mensagem da propaganda, “navegador que você adorava odiar”, o Internet Explorer.

“Marketing viral, por definição e por princípio, tem como grande objetivo gerar a rápida disseminação e não enganar o consumidor. Vídeos ou estratégias com esse intuito têm, sim, o risco de irritar as pessoas, da mesma forma que ficamos irritados ao sermos enganados em outras situações”, explica Presas.

locaweb55

lwprogramação Serviço: Otimização

Nível técnico: Iniciante/Intermediário/Profissional

Dicas para desempenho Criar aplicativos web de alto desempenho é crucial para todo desenvolvedor de internet Por Adèle Helena Ribeiro e Max Reinhold Jahnke

jatinder mann A apresentação de Jatinder Mann, que faz parte da equipe de desenvolvimento do Internet Explorer, pode ser conferida na íntegra em: http://lwgo.to/129.

Para quem preferir, em seu blog há uma bela discussão sobre o mesmo assunto, que também foi publicada na .Net Magazine. Veja os links. http://lwgo.to/12a http://lwgo.to/12b

B

em antes de se pensar nas ferramentas de desenvolvimento de sites, como o HTML5 e o JavaScript, era preciso ter em mente como um navegador funciona, sua interação com o hardware e suas limitações. O navegador é o gargalo,

então, se não souber lidar com ele, não conseguirá alcançar o objetivo de um site eficiente.

Não há dúvidas de que o tempo de resposta de um site é a medida mais usada para avaliar desempenho.

O tempo de renderização da página, ou seja, o tempo que leva desde uma ação do

Mesmo com a página carregada, é possível que processos continuem rodando em background para finalizar uma tarefa 58locaweb

usuário até a visualização do resultado na tela é crucial nessa tarefa. Por outro lado, mesmo com a página completamente carregada, é possível que processos continuem rodando em background para finalizar uma tarefa solicitada pelo usuário. Esse tempo, necessário para solicitações como envio de e-mail, download de conteúdo e envio de informações ao servidor, também afeta muito a impressão de responsividade do site.

A execução completa de um pedido do usuário não depende apenas

das comunicações via rede. Como os navegadores de internet utilizam processamento da máquina local, é importante administrar bem os processos e os recursos de hardware. Usos excessivos de memória ou processamentos desnecessários de gráficos acabam atrasando muito a visualização final da página.

E, por fim, na era dos mobiles, é importante considerar o uso da bateria ao utilizar os recursos de hardware. Mais energia implica maiores custos ao usuário e maior impacto

lwprogramação

ao meio ambiente. Assim, energia e desempenho precisam caminhar lado a lado na conquista de um site eficiente.

Diante disso, em outubro de 2012, Jatinder Mann, que faz parte da equipe de desenvolvimento do Internet Explorer, compartilhou algumas dicas na internet sobre como melhorar o desempenho de sites e aplicativos na web.

Como não há nada melhor que aprender com um grande time que atualmente está focado em desempenho na web, serão destacadas algumas dicas importantes dessa apresentação em especial.

Jatinder Mann listou em seu blog os sete princípios que todo desenvolvedor web deveria levar em consideração na criação de seus sites:

1

Evite redirecionamentos de URLs do tipo 3xx É muito comum encontrar sites que utilizam um código HTTP de redirecionamento, como o 301 no código-fonte de exemplo abaixo, quando o domínio foi alterado.

Página oficial do Internet Explorer: navegador precisa de páginas eficientes

Olhando a lista, até parece fácil, mas desenvolvedores sabem que há muitas armadilhas que podem pegar alguém desprevenido. Por isso, Jatinder nos presenteou também com 50 dicas.

Vamos agora discorrer sobre algumas que julgamos mais relevantes.

HTTP/1.1 301 Moved Permanently Location: http://www.exemplo.org/ Content-Type: text/html Content-Length: 174 <html> <head><title>Movida</title></head> <body> <h1>Movida</h1> <p>Esta página foi movida para <a href="http://www.exemplo.org/">http://

• responder rapidamente aos pedidos de rede; • minimizar a quantidade de downloads; • criar estruturas de marcação eficientes; • otimizar o uso de mídias; • escrever código JavaScript rápido; • desenvolver utilizando os padrões da web; • monitorar o que seu aplicativo está fazendo.

Como browsers utilizam processamento da máquina local, deve-se administrar bem os recursos de hardware

Acima, página de internet que oferece 25 dicas rápidas para se trabalhar com HTML5

locaweb59

lwprogramação Dicas para desempenho

O especialista Jatinder Mann trabalha na Microsoft com as equipes de desenvolvimento de Windows 8, Windows 7, Internet Explorer 10, 9, e 8. Também tem grande interesse em gráficos, em particular HTML5 Canvas, e é editor de muitas especificações no W3C Web Performance Working Group.

Para saber mais sobre ele, veja:

http://jatindersmann.com.

www.exemplo.org/</a>.</p> </body> </html> Essa abordagem pode aumentar o tempo de carregamento inicial da página em 250 ms, o que equivale a 10% do tempo total de carregamento.

2

Utilize redes de fornecimento de conteúdo (CDNs) Para sites que exigem um tempo de resposta muito curto, uma possibilidade é utilizar serviços que procuram o servidor de dados mais próximo do usuário, conhecidos como CDNs.

Um navegador de internet pode fazer até seis conexões de uma só vez, por isso, distribua seu conteúdo em domínios diferentes 60locaweb

O HTML5 permite o desenvolvimento de páginas mais rápidas e dinâmicas

Diferentemente de uma hospedagem comum, onde há apenas um único servidor, em uma CDN o conteúdo do seu site é replicado em vários servidores ao redor do mundo.

Serviços como esse podem acelerar o tempo de resposta em até 300 ms. É importante frisar que nem toda CDN é uma nuvem e nem toda nuvem é uma CDN. Uma nuvem simplesmente distribui um grande recurso computacional em vários nós que podem ser acessados remotamente, já a CDN também é um grupo de servidores, mas estão necessariamente espalhadas ao redor do país ou do mundo. Com CDN é possível fornecer ao usuário os dados do servidor mais próximo a ele.

Quanto mais perto, mais rápida será a resposta do seu site.

3

Maximize conexões concorrentes Para quem não sabia, um navegador pode fazer até seis conexões de uma só vez! Para isso, você precisa distribuir seu conteúdo, por exemplo, imagens, em domínios diferentes.

Assim, os recursos serão baixados simultaneamente, reduzindo significantemente o tempo de carregamento da página.

4

Utilize compressão Gzip para reduzir o tráfego na rede Muitos servidores já oferecem esse serviço de forma automática e gratuita, comprimindo todos os dados durante a comunicação.

Verifique essa funcionalidade em seu servidor e garanta que ela esteja ativada.

lwprogramação

Ao utilizar HTML5 video, sempre especifique uma imagem para preview.

Caso contrário, o navegador carregará o filme inteiro

5

Padronize os nomes dos arquivos Surpreendentemente, apesar dos gerenciadores de arquivos serem “insensitive case”, os servidores são sensíveis a letras maiúsculas e minúsculas nos nomes de arquivos.

Assim, se utilizar duas variações para a solicitação de uma mesma imagem, por exemplo, uma apenas com letras minúsculas: <img src="icon.png" /> e outra com a primeira letra do nome do arquivo alterada para maiúscula: <img src="Icon.png" /> serão realizadas duas solicitações de rede para um mesmo resultado.

6

Evite eventos JavaScript inline Embora seja possível colocar um código JavaScript junto com as marcações do HTML, como, por exemplo: <button onclick="validate()"> Validate</button> essa prática, além de ser mal

vista por projetistas de sites, pois tira a clareza do código misturando o que é apresentação e o que é comportamento, também pode trazer comportamentos inesperados ao site.

Isso aconteceria, por exemplo, em páginas que o script foi colocado no fim do arquivo. Assim que carregar a página, o usuário já conseguiria interagir com os elementos, mas poderia, talvez, invocar um evento cujo script ainda não foi carregado.

7

Faça o link com o arquivo CSS logo no topo da página Ao contrário do arquivo JavaScript, que deve ser sempre indicado no fim da página, a melhor prática para fazer o link do arquivo de estilos é no head da página. Com isso, primeiramente o navegador irá carregar o CSS, bloqueando a renderização dos elementos até que o CSS esteja completo. Dessa forma, imagens, JavaScript e outros recursos que podem demorar mais para serem carregados poderão ser carregados mais tarde.

8

Somente inclua estilos necessários Muitos têm a prática de utilizar um único arquivo CSS para todo o site.

Para sites pequenos, isso pode fazer uma diferença pequena, mas sites grandes, como de notícias, pode chegar a ter mais de 4 mil regras de estilo e apenas 5% a 10% delas são necessárias para renderizar uma única página. Dessa forma, o navegador acaba carregando todos os estilos desnecessariamente.

9

Especifique uma imagem de preview para o HTML5 video Ao utilizar HTML5 video, sempre especifique uma imagem para preview. Caso contrário, o navegador

precisará carregar todo o vídeo, descobrir o primeiro frame e só então mostrar ao usuário.

10

Minimize seu JavaScript É muito mais rápido buscar variáveis em um código direto e com nomes de variáveis curtos. Isso melhora tanto o tempo de download da página quanto o tempo de execução do script. Utilize programas como o YUI Compressor para otimizar seus códigos JavaScript. Além disso, procure inicializar o JavaScript dinamicamente, ou seja, apenas quando necessário. Isso evita carregamentos desnecessários.

11

Verifique o status de visibilidade do aplicativo A visibilidade da página, recurso disponível na maioria dos navegadores modernos, permite que você determine o status de um aplicativo. Com essa funcionalidade, é possível projetar o aplicativo para economizar recursos quando ele não está visível, reduzindo tempo de CPU e aumentando a vida da bateria.

Conclusão Com as 11 dicas que foram destacadas nesta reportagem, já é possível aumentar bastante a velocidade com que o site é carregado e melhorar o tempo de resposta para o usuário, porém ainda existem diversas outras técnicas que podem ser implementadas para obter um desempenho ainda melhor. O importante é observar as específicas de seu site ou aplicativo e estudar quais os pontos que podem estar causando baixo desempenho.

E lembre que prática e realização de vários testes são essenciais para um bom desenvolvimento web.

locaweb61

lwprogramação Serviço: Blippex

Nível técnico: Iniciante/Intermediário/Profissional

Como mudar o cursor de seu site Veja como usar o CSS para alterar o ícone do mouse quando o internauta visitar sua página Por Adèle Helena Ribeiro e Max Reinhold Jahnke

Mãos ao código Douglas Burchard fez uma compilação de imagens de vários cursores disponíveis que podem ser vistos em: http://lwgo.to/120.

Vale a pena conferir uma referência de quais opções são suportadas em cada navegador web: http://lwgo.to/121.

O

CSS tem sido muito bem usado para aumentar a usabilidade e interatividade de uma página da web. Várias das funcionalidades do CSS são discutidas frequentemente, como posicionamento, colorização, inserção de mídias e tipografia. No entanto, pouco se fala

de uma das modificações de estilo mais fáceis: a customização do cursor.

Cursores comuns como a seta, o ponto de interrogação e os indicadores de texto e link fornecem, com uma simples imagem, uma sinalização direta do que pode ou não ser feito na página. Com a chegada dos dispositivos com tela de toque, foi nítida

Cursor é um dos elementos com mais importância na interação com o usuário 62locaweb

a perda de usabilidade causada pela ausência do cursor. Os web designers precisam agora fazer um grande trabalho para tornar as funcionalidades do site fáceis de serem compreendidas, mesmo sem o uso do cursor.

Apesar da onda de dispositivos móveis estar muito forte, os usuários de notebooks e desktops não são nem de longe desprezíveis e o projeto de usabilidade das páginas deve levar em consideração os melhores recursos disponíveis. Se o site não for

bem projetado, rapidamente o usuário fica perdido e desiste da navegação.

Sendo algo que pode ser feito com apenas uma linha de código, mas que fornece ao usuário uma experiência completamente diferente, o cursor não pode ser deixado de lado.

O cursor no projeto de layout Certamente o cursor é um dos elementos da página com mais importância na interação com o usuário, colaborando principalmente na distinção entre o que

lwprogramação

Tome cuidado para não exagerar na estética e prejudicar o desempenho do site: toda imagem adicional aumenta o tempo de download da página web opções Existem diversas outras configurações de cursores.

Quem quer uma lista completa de tudo o que pode ser feito com cursores usando CSS3 pode conferir com detalhes em:

http://lwgo.to/122.

Também há o conhecido w3schools, que, além de explicar diversas propriedades, também fornece um aplicativo no qual é possível testar o efeito de várias propriedades:

http://lwgo.to/123.

é elemento decorativo e elemento gráfico funcional. Se essa propriedade for usada corretamente, é possível dar o destaque correto a certos elementos da página, além de tornar o site muito mais intuitivo, explicitando conteúdos, links e ações.

Criar seu próprio cursor usando uma imagem pode ser interessante, mas é uma arma traiçoeira e deve ser usada com extremo cuidado.

Não sobrecarregue demais com efeitos especiais, isso pode frustrar a expectativa do usuário.

Quando se está navegando por uma página em um dispositivo que suporta cursor, é esperado que, ao passar sobre uma região comum da página, apareça uma seta. Já quando passa o mouse sobre um texto, espera-se o indicador feito pela letra maiúscula I; quando passamos por cima de algum link, espera-se que uma mão apareça.

Embora menos visto, é agradável também quando encontramos alguma

região da página com o cursor de ajuda. Assim, é uma boa prática não fazer alterações inesperadas no cursor usando, por exemplo, alguma imagem de difícil reconhecimento ou significado.

Além disso, tome cuidado para não exagerar na estética e prejudicar o desempenho do site. Embora seja um problema de menor escala, lembre-se também de que toda imagem adicional aumenta o tempo de download da página. E, claro, não podemos esquecer o bom gosto. É extremamente irritante navegar por sites festivos, como os sites da década de 1990, repletos de gifs animados. Ou seja, não coloque uma caveira rodando nem pegando fogo como cursor do seu site.

Com o projeto do layout em mãos, é muito fácil fazer a alteração do cursor com CSS. Basta definir algum valor para o elemento cursor. Por exemplo, se quiser que o cursor se altere para o indicador de ajuda, quando o mouse está sobre um div, basta configurar o estilo da seguinte maneira:

de estilos, pode-se também definir essa propriedade em uma classe.

Por exemplo, basta definir a classe “cursor-ajuda” que altera o cursor para o indicador de ajuda.

<div style="cursor: help">Ajuda</div>

O elemento cursor existe desde o CSS1. No CSS2 tínhamos as opções: auto; default: duas opções diferentes que definem o cursor padrão; crosshair: opção para um cursor em forma de cruz; help: símbolo que indica que uma ajuda está disponível; move: símbolo que indica que algo pode ser movido; pointer: o cursor é renderizado como um ponteiro; progress, wait: opções para indicar que algum programa está em progresso; text: símbolo que indica que pode ser

Ou, caso prefira alterar seu arquivo

Sem grandes dificuldades, o cursor pode ser mudado para diversas formas

.cursor-ajuda { cursor: help } E, em seu HTML, apontar a classe do estilo seguinte: <div class="cursor-ajuda"> Passe o mouse sobre esta área para ver o cursor de ajuda. </div> É possível também mudar o cursor utilizando JavaScript. Por exemplo, com o código abaixo, o cursor se altera para o “redimensionar para a esquerda” quando o mouse passa sobre o link: <a href="links.html" onMouseOver="this.style. cursor='w-resize';">Redimensione</a>

locaweb63

lwprogramação Cursores

As propriedades do CSS garantem diversas opções ao programador; mas lembre-se de que cada nova imagem requer um download a mais

inserido ou selecionado um texto; inherit: opção que especifica que o valor da propriedade do cursor deve ser herdada do elemento-pai.

Há ainda os símbolos que indicam redimensionamento. Os valores para a propriedade cursor podem ser: e-resize, w-resize, n-resize, s-resize, ne-resize, nw-resize, se-resize e sw-resize. Os prefixos indicam a direção. Assim, temos e-resize para redimensionamento à direita (east); w-resize à esquerda (west); n-resize para redimensionamento para o norte; s para o sul; ne para direção nordeste; nw para noroeste; se para o sudeste; e sw para o sudoeste.

Já com o CSS3 foram adicionadas mais opções de cursor que indicam redimensionamento: ns-resize ou row-resize indicam redimensionamento para o norte e para o sul; ew-resize ou col-resize indicam redimensionamento para a esquerda e para a direita.

Apesar dessas inúmeras opções, também pode-se criar o próprio cursor. Para isso, é possível listar diferentes urls para o cursor, separadas por vírgula. No entanto, é preciso preocupar-se com a compatibilidade de forma geral.

Assim, uma boa prática é fornecer a

64locaweb

O site da W3Schools oferece tutoriais a respeito da modificação de ponteiro

imagem do cursor em formato gif e svg para os navegadores modernos (como o Google Chrome), em formato cur, que é o formato do navegador web Internet Explorer, e também deve-se fornecer um cursor padrão no final da lista (auto), para o caso dos outros cursores não funcionarem corretamente.

Nada melhor que umas linhas de código para exemplificar: .cursor-customizado { cursor: url(meucursor.gif),url(meucursor. svg),url(meucursor.cur),auto; }

Um problema é que, como esperado, nem todas as opções funcionam em todos os navegadores de internet.

Valores de URL, por exemplo, não são suportados no Opera. Já o Internet Explorer até a versão 8 exige o valor “hand” como opção padrão em vez de “pointer”. Assim, é necessário sempre adicionar essa opção para manter compatibilidade com o ainda popular navegador Internet Explorer, da Microsoft: .cursor-padrão { cursor: pointer, hand; }

lwparceirosemdestaque //Empresas e profissionais liberais que oferecem serviços de desenvolvimento de sites

MASTERS MX

SOLUÇÕES UPGRADE

Marcos França

Web D2

Virtual Criativa

DEEP

www.mastersmx.com

www.marcosfrança.com.br

www.virtualcriativa.com.br

66locaweb

www.upgradese.com.br

www.webd2.com

http://deep.com.br

Você enxerga o futuro da sua empresa. Nós oferecemos o espaço para você alcançá-lo.

Venha para o Cloud Locaweb.

Escolha a líder no mercado de hospedagem e pioneira em Cloud Computing no Brasil.

Na Locaweb você economiza sem precisar limitar os recursos do seu servidor.

Ganhe flexibilidade, controle e segurança.

Um ótimo negócio para o seu projeto.

Soluções Cloud Locaweb Tecnologia inteligente para seu projeto ir mais longe.

Conheça: Locaweb.com.br/Cloud

Locaweb.com.br