Professional Documents
Culture Documents
ao leitor
Locaweb em Revista Edição 19
Como medir sua
VP Comercial: Cláudio Gora
Gerente de Marketing: Victor Sebastian Reis da Silva
Coordenação de Comunicação: Daniela Veronese
Coordenação Editorial: Déborah De Mari e Douglas Camargo
participação online
Editora Europa A palavra métrica está na moda e o motivo é simples: o
Editor e Diretor Responsável: Aydano Roriz
Diretor Executivo: Luiz Siqueira
mundo corporativo finalmente observou o crescente
Diretor Editorial e Jornalista Responsável:
número de pessoas ligadas às mídias sociais e passou a atuar
Roberto Araújo - MTb.10.766 - araujo@europanet.com.br como nunca nesse território virtual. Como todo mercado incipiente, porém, o relacionamento
Editores: Paulo Basso Jr. e Sérgio Vinícius
Revisão: Cátia de Almeida mais íntimo entre empresas e consumidores via ferramentas sociais trouxe na bagagem uma
Editor de Arte (projeto gráfico): Alexandre Dias (Nani) série de dúvidas sobre como valorar a atuação nesse segmento. Que tipo de investimento, por
Colaboração: Felipe Magalhães, Luciano Delfini,
Gabriel Dudziak, Guilherme Tsubota, Leonor Ribeiro, exemplo, pode ser feito nessas plataformas? Como é possível medir o retorno da campanha?
Yan Borowski, Leandro Gacia e Vinícius Macedo E, o que é mais importante, onde e de que forma são refletidos os resultados.
Publicidade São Paulo: Ao contrário do que ocorre com os anúncios feitos em jornais ou na TV, ferramentas
E-mail: publicidade@europanet.com.br consolidadas há anos no universo publicitário, o poder das mídias sociais ainda reside nesse
Diretor de Publicidade: Mauricio Dias (11) 3038-5093
Executivos de Negócios: Alessandro Donadio, Angela cenário obscuro, porém com potencial evidente e cada vez mais próspero. E é exatamente em
Taddeo, Flavia Pinheiro, Claudia Alves, Elisangela Xavier e meio a esse panorama que surgem as novas métricas oferecidas por agências de publicidade
Rodrigo Sacomani.
Executivos de Contas: Leandro Blotta, Marcos Roberto e e plataformas da web no sentido de orientar quem busca um lugar ao sol na internet por
Renata Naomi meio das mídias sociais. Há caminhos e espaço para todos aproveitarem a maré, como você
Criação Publicitária: Rodrigo Barros e João Paulo Gomes
(11) 3038-5103 - Tráfego: Renato Peron (11) 3038-5097 irá conferir na reportagem completa sobre o tema que ilustra a capa desta edição.
Circulação e Promoção - Gerente: João Alexandre Fora isso, Locaweb em Revista traz as tendências de infraestrutura, mobile e mercado
Desenvolvimento de Pessoal:
Tânia Marilia Ribeiro Roriz e Elisangela Tokashiki para 2010. Ao longo das próximas páginas, você também verá entrevistas com Maurício de
Locaweb em Revista é uma publicação da Editora Europa
Sousa, que usa toda a força da internet em sua produção, com direito a recursos do Twitter e
Ltda. e do departamento de comunicação e marketing da Orkut, e também com Bem Self, o marqueteiro online de Barak Obama que participará da
Locaweb Serviços de Internet. A Editora Europa não se
responsabiliza pelo conteúdo dos anúncios de terceiros.
próxima campanha de sucessão presidencial no Brasil. Há ainda reportagens técnicas como a
Distribuidor Exclusivo para o Brasil:
disputa da Adobe contra o HTML 5, novidades como o Google Wave, uma interessante
Fernando Chignalia Distribuidora S. A. - Rua Teodoro da Silva, abordagem sobre o uso da realidade aumentada no design e muito mais. Boa leitura e
907 - CEP 20563-900 - Grajaú - RJ
ótimas festas de fim de ano!
Impressão: Prol Editora Gráfica
Somos Filiados à ANER - Associação
Nacional dos Editores de Revistas
Claudio Gora
editor@locawebemrevista.com.br
4 locaweb
Entrevista:W2008 7/12/2009 13:45 Page 6
Entrevista
A interatividade é
essencial para conduzir
nossas criações
Maurício de Sousa fala sobre o uso da internet em seus trabalhos e
debate questões sobre direitos autorais e interação com os leitores
Por Gabriel Dudziak
6 locaweb
Entrevista:W2008 7/12/2009 13:45 Page 7
Entrevista
locaweb 7
Emails:W2008 7/12/2009 13:46 Page 8
Addon para postagem no Twitter. Para o Download que realizam a tarefa chama-
Twitter navegador Opera, um dos no YouTube se Orbit Downloader
Sou usuário do Twitter e widgets - que é o nome Ultimamente, tenho (www.orbitdownloader.com).
acompanho as como a empresa nomeia acessado muito sites de Gratuito, o soft gerencia
atualizações de meus suas extensões - mais vídeo, como o YouTube. downloads e é voltado
amigos o dia inteiro. populares para trabalhar Entretanto, estou especialmente para usuário
Entretanto, cansei de ter com a página de precisando baixar alguns com conexão rápida à
que entrar na página microblogging é o Twitter filmes que encontrei na internet. Além do YouTube,
eletrônica e deixá-la aberta Opera Widget, que página, mas não sei como ele é compatível com os
o tempo todo. Sou usuário pode ser encontrado no proceder. Há algum modo mais populares sites de
do browser Opera e, às endereço http://widgets. de realizar download dos música e de vídeo da rede,
vezes, também utilizo o opera.com/widget/7206. vídeos armazenados no conseguindo baixar os
Firefox. Vocês saberiam Para o Firefox, o YouTube? arquivos com rapidez.
me dizer se há algum complemento mais utilizado Aldo Santos - Por e-mail Leve e livre de spywares, o
addon para esses para trabalhar com o Twitter funcionamento do Orbit é
navegadores que me é o TwitterBar, uma barra Não é possível realizar simples. Basta abrir a
permitisse atualizar e que coloca o usuário a o download dos vídeos interface principal e, em
acompanhar o Twitter sem poucos cliques da rede do YouTube sem o uso de Arquivo, colocar o endereço
ter de acessar o site o social. O programinha pode programas específicos. do arquivo para download
tempo todo? ser encontrado no endereço Entretanto, há na internet no campo adequado, dentro
Ana Esther - Por e-mail https://addons.mozilla.org/ uma infinidade de softwares de "Digite a nova URL para
en-US/firefox/addon/4664. que com poucos cliques baixar". Depois, basta
Há diversas extensões Há ainda um outro addon permitem que o usuário pressionar OK.
que podem chamado PowerTwitter em guarde filmes do site em seu
automatizar, ou mesmo https://addons.mozilla.org próprio computador. Um dos E-mail
facilitar, o acesso à en-US/firefox/addon/9591. mais competentes programas Marketing
Preciso profissionalizar
meu envio de mala direta
por e-mail e gostaria de
saber se a Locaweb tem
alguma ferramenta que
possa me ajudar.
Ilson Antero - Por e-mail
A Locaweb tem o
produto “E-mail
Marketing” que proporciona,
por exemplo, campanhas
personalizadas, envio de
e-mails caracterizados com
detalhes, como data e hora
marcadas, e monitoramento
das mensagens para
comparação de resultados,
entre outros itens. Para saber
mais, acesse a página
Opera Twitter Widget \\ Ferramenta do browser Opera permite que usuário crie seus twitts e acompanhe o de locaweb.com.br/produtos/
seus amigos por meio de uma interface independente da página do site, que tem o serviço de microblogging email-marketing.html.
8 locaweb
Noticias_Parte1:W2008 7/12/2009 13:50 Page 10
notícias
blog.locaweb.com.br
Confira as novidades da maior empresa de serviços de internet do Brasil
10 locaweb
Noticias_Parte1:W2008 7/12/2009 13:50 Page 11
e mais...
WEBCAST FALA SOBRE COMO Locaweb internacionaliza
DIMENSIONAR INFRAESTRUTURA
PARA O SEU SITE operações e abre subsidiárias
• Eduardo Martinez, consultor técnico de vendas da
em Miami e Montevidéu
Locaweb iniciou um
Locaweb, criou uma apresentação que fala sobre
“Como dimensionar a infraestrutura correta para obter A projeto de
internacionalização com
uma boa performance em seu site ou aplicação web”.
o estabelecimento de
Vale a pena conferir em blog.locaweb.com.br.
um centro técnico em
Miami, nos Estados
Unidos, e um de
serviços de suporte e
atendimento em
Montevidéu, no Uruguai.
O objetivo dos
complexos é atender a
clientes de língua
espanhola em todo o
continente americano. A
ação demandou
investimentos iniciais de
US$ 1 milhão, e a
expectativa é que
represente 5% do
faturamento total do
grupo em até três anos.
locaweb 11
Noticias_Parte2e3_WishList:W2008 13/11/2009 17:39 Page 12
Wishlist
O melhor da
cultura digital
Nesta seção, você confere o que há de melhor nas
prateleiras ao redor do mundo quando o assunto é alta
tecnologia, conectividade com a web e diversão eletrônica
Upgrade para o
home-theater
A conceituada Harman Kardon lançou uma nova linha de
receivers para quem necessita dar um “up” no home-
theater. Dos três novos modelos apresentados, o que
mais se destaca é o AVR-3600. Apesar de o design não
ter sofrido mudanças, o receiver de 7.1 canais traz
caprichos como os decodificadores DTS HD e Dolby
TrueHD, recurso Dolby Volume e entrada para iPod com
possibilidade de reproduzir os vídeos em alta definição do dispositivo (recurso upscaling para
vídeos em resolução standard). O preço é um pouco elevado: US$ 1.200, nos EUA.
Mais informações: www.harman.com
Filmadora compacta
A linha Sony Handycam entra no mercado de filmadoras com memória
flash com a DCR-SX40, uma câmera leve e compacta que pode ser
carregada no bolso, pois pesa apenas 330 g. Ideal para esportes,
turismo e aventura, a filmadora tem memória interna de 4 GB e
permite que os vídeos sejam transferidos diretamente para sites
de relacionamento na internet, graças ao software Picture Motion
Browser, que acompanha a câmera. Possui superzoom óptico de
60x; função Quick Start; microfone zoom, Easy Handycam
(ajustes automáticos); LCD de 2,7" sensível ao toque e
também é compatível com o gravador externo de DVD -
DVDirect Express. A DCR-SX40 está disponível nas cores
prata e vermelho, ao preço sugerido de R$ 1.499.
Mais informações: www.sony.com.br
12 locaweb
Noticias_Parte2e3_WishList:W2008 7/12/2009 13:53 Page 13
Wishlist
Blackberry sem
terno e gravata
O Curve 8520 é o primeiro smartphone da Blackberry a oferecer
funcionalidades multimídias criadas para o público jovem. Entre as novas
ferramentas, destacam-se compatibilidade com MP3, AAC, WMA, MP4 e
WMV, sincronização com o iTunes, processador de 512 MHz – velocidade
mais que suficiente para um bom desempenho na reprodução de filmes,
músicas e games em 3D, conexões sem fio Bluetooth, Wi-Fi e saída
padrão (P2) para fones de ouvido. Os preços variam de R$ 490 (plano Vivo
escolha 50 minutos) a R$ 49 (plano Vivo escolha 900 minutos). Em breve,
o aparelho poderá ser adquirido em outras operadoras.
Mais informações: http://br.blackberry.com
locaweb 13
Noticias_Parte2e3_WishList:W2008 13/11/2009 17:39 Page 14
Wishlist
Multifuncional
completa
A Photosmart Premium TouchSmart Web,
multifuncional da HP, é uma jato de tinta que usa cinco
cartuchos individuais de cores e dispensa os fios de
comunicação com o PC, pois traz as tecnologias semfio
Bluetooth e Wi-Fi integradas. Além disso, tem um painel
LCD de 4,3” touch screen que acessa conteúdo para
impressão (como mapas, fotos do Flickr e outros atrativos)
direto da internet, dispensando o uso de um computador.
Nos EUA, o modelo sai por US$ 400.
Mais informações: www.hp.com
Guitarra estilosa
Se você é um dos milhões de fãs do game musical Guitar Hero, com
certeza esta belezinha aí em cima irá chamar, e muito, sua atenção. A
guitarra especial semfio da Logitech é uma réplica em miniatura da
clássica guitarra Stratocaster, com direito a braço em madeira maple e
trastes de metal. Além disso, a barra de palheta e os botões de notas
possuem um sistema antirruído, para que o único som que você escute
seja a música do game e não os botões. A Logitech Wireless Guitar custa
US$ 200 nos EUA e é compatível com o Nintendo Wii.
Mais informações: www.logitech.com
14 locaweb
JIMENEZ ASSOCIADOS
Proteção completa, que você paga só
pelo que usar. Só podia ser F-Secure.
A F-Secure está sempre inovando para proporcionar a melhor proteção pessoal e corporativa. Agora, a
F-Secure inova também na forma de fazer negócios. É o SaaS - Software as a Service. Esqueça as caixas, CDs,
licenças e tudo que só toma tempo e espaço da sua empresa. Proteja seu sistema com a segurança das soluções
completas e pague como um serviço.
Por dentro do SaaS F-Secure: • Sob medida para sua empresa • Você usa por quanto tempo precisar • Pode
interromper a utilização a qualquer momento • Sem fidelidade obrigatória • Você utiliza porque está satisfeito.
//EVENTOS
E CURSOS
Jornalismo 2.0 -
Hipermídia e
Notícias/Circuito Redes Sociais
Este curso aborda não apenas as
Sua leitura
melhores práticas de texto na
internet, mas também conceitos
relacionados às novas mídias,
sobretudo a relação entre
jornalistas e leitores. As
sobre internet
atividades mesclam aulas
expositivas, debates e atividades
em sala de aula. Dia 12 de
dezembro, em São Paulo. Mais
informações em www.escolade
comunicacao.com.br.
Confira dicas interessantes de livros a respeito de
temas ligados ao mundo da tecnologia da informação Curso grátis de Linux
A Insigne e a Dr. Micro criaram
um curso online e gratuito para a
Google: A História do
distribuição Linux. O treinamento
Negócio de Mídia e pode ser feito a partir de qualquer
Tecnologia navegador e ensina como usar o
Livro narra a história de sistema operacional Insigne
Sergey Brin e Larry Page, os Momentum 5.0. Mais
sóciosfundadores da Google. informações no site
Há informações desde a www.drmicro.com.br/insigne.
época em que eles se
conheceram, na Universidade Curso de gerenciamento
de Stanford, até hoje. de informação
Preço: R$ 12,50 Entre 7 e 11 de dezembro, 8 e 12
Editora: Rocco de fevereiro de 2010, e 22 e 26
Inf.: www.rocco.com.br de fevereiro de 2010, a Kaizen e
a EMC promoverão uma série de
cursos sobre tecnologia e
A Cabeça de práticas de armazenamento e
Steve Jobs gerenciamento da informação.
O que há, realmente, dentro As aulas, ministradas por
do cérebro de Steve Jobs? professores que, em sua maioria,
jQuery: A Biblioteca do Segundo Leander Kahney, falam português, são voltadas
Programador JavaScript autor do livro, a mente do para qualquer profissional que
Maurício Samy Silva relata scripts jQuery fundador da Apple é um tenha interesse em ingressar
de emprego real, todos comentados e fascinante feixe de nesse mercado por meio do
disponíveis para download. Fora isso, contradições. Esta obra traz treinamento introdutório
mostra um estudo de sintaxe e o emprego histórias surpreendentes. Information Storage and
dos seletores e comandos da ferramenta. Preço: R$ 36,90 Management. Em São Paulo, na
Preço: R$ 75 Editora: Agir R. Verbo Divino, 1.488. Inscrições:
Editora: Novatec Informações: treinamento@kaizen.com.br.
Informações: www.novatec.com.br www.ediouro.com.br
16 locaweb
Noticias_Parte 4_Circuito_Twittosfera:W2008 7/12/2009 13:58 Page 17
Notícias/Twitter
TWITTOSFERA
Confira as novidades do microblogging Twitter
locaweb 17
Portfólio:W2008 7/12/2009 14:26 Page 18
portfólio
Confira a agência do mês destacada pela Locaweb
por produzir trabalhos online diferenciados
Agência WLD 1
Em seus dez anos de atuação,
a WDL tem consolidado
sua capacidade em
desenvolvimento de soluções
Web, Multimídia e TI. A
agência atende clientes em
diversos ramos de atuação,
como arquitetura, automação
industrial, advocacia,
capacitação, educação, clínicas,
bares, restaurantes, moda,
eventos, comunicação,
turismo, lazer, relações
publicas e diplomacia,
gastronomia, imobiliária,
editoras, entre outras.
1
Lustres Yamamura
(www.yamamura.com.br)
2 2
Latin Next
(www.latin-next.com)
3
Reserva Floral
(www.reservafloral.com.br)
18 locaweb
205 X 275:Layout 1 12/11/2009 17:53 Página 1
Preview GWave:W2008 7/12/2009 14:10 Page 20
Google Wave, o
tudo em um da web
Ambicioso projeto online da empresa que detém o buscador mais popular da
web reúne rede social, instant messenger, jogos online e outras funções
Por Sérgio Vinícius
20 locaweb
Preview GWave:W2008 7/12/2009 14:10 Page 21
Preview
A interface
1
4
2 6
1 WAVE mensagens, textos escritos por ele eletrônicos, mostrar imagens, participantes, de acordo com o que
Como quase todos os produtos do mesmo, spams - se for o caso - e compartilhar conteúdo diverso. o usuário queira realizar. Quando
Google, o Wave é um serviço histórico. É nesse local que ele um amigo é adicionado,
online, baseado na web. Ele está acerta as configurações pessoais e 4 INBOX imediatamente surge nome, foto e o
localizado no endereço eletrônico ativa ou desativa a possibilidade de Em bom português, é a caixa de estado em que ele se encontra:
wave.google.com. Ainda em testes, interagir com outros usuários, entrada do usuário. Nela ficam online, offline.
trata-se de uma tentativa de pelas bolinhas coloridas. A verde mensagens que podem ser
centralizar diversos serviços em indica que o usuário está organizadas como a preferência de 6 FOTOS
uma mesma interface. Os testes disponível para quaisquer eventos. quem a usa. É possível arquivar O compartilhamento de conteúdo é
com o produto foram realizados itens e procurá-los. O Google um dos itens mais interessantes do
com diversos navegadores, mas o 3 CONTATOS permite que as “Waves”, como Wave. No exemplo acima, estão
que se portou melhor foi mesmo - Eis o principal motivo de existir chama as ocorrências, sejam dispostas fotos. Mas é possível
para a surpresa de ninguém - o do Wave. Se não é o único, trata- divididas por semana ou por mês. É dividir textos, jogar em conjunto,
Crhome. Não tente com o Opera. se de um dos principais: interagir. possível ainda realizar alterações na entre outras ações.
Nessa caixa ficam exibidos os disposição da Inbox ou mesmo
2 NAVEGAÇÃO contatos dos amigos do usuário. É arquivar ou deletar Waves.
Do lado esquerdo superior da tela ali que, ao clicar em um nome
principal, e uma das únicas, fica a com foto, a pessoa pode realizar 5 ADIÇÃO
aba de navegação do Wave. Por ações como bater papo, enviar Com base em uma caixa de buscas,
meio dela, o usuário pode acessar mensagens, iniciar jogos é possível criar Waves e adicionar
locaweb 21
Tendências:W2008 7/12/2009 15:13 Page 22
O QUE
PODEMOS
ESPERAR
DE Especialistas em tecnologia
20
da informação apontam as
principais tendências de
mercado, mobile, infraestrutura
e redes sociais para os
próximos meses
Por Gabriel Dudziak
V
iradas de ano sempre trazem na bagagem
10
aquele clássico período de análise, projetos e
projeções. Todo mundo olha o que fez de bom
e de ruim no ano passado, imagina o que podia ter
feito diferente, começa a pensar em como tornar
realidade aquele sonho distante e, é claro, imagina o
que pode acontecer nos próximos meses. Quando o
contexto é tecnologia, a história não é diferente. O ano
de 2009 foi do Twitter, da briga acirrada do Orkut com
o Facebook, do crescimento dos aplicativos para
aparelhos de celular, de um maior debate e aplicação
do conceito de cloud computing e de muitos outros
acontecimentos. Mas e a respeito de 2010, o que
podemos esperar?
A Locaweb em Revista saiu a campo para ver o que
alguns dos principais especialistas do País analisam
como tendências do mercado de internet e TI para os
próximos meses. Começará a ser dado o adeus
definitivo aos programas guardados em nossas CPUs?
Computadores ainda menores que os netbooks serão
22 locaweb
Tendências:W2008 7/12/2009 15:13 Page 23
Tendências 2010
NETBOOKS E
PARA INTERNET
SMARTPHONES
SERVIÇOS
REDES
SOCIAIS
* CONTINUAREMOS COM O
DESENVOLVIMENTO EM SERVIÇOS PARA
WEB, EVOLUÇÃO DE DISPOSITVOS MÓVEIS
E APLICATIVOS PARA SOCIAL MEDIA
Michel Lent Schwartzman, especialista em mídias interativas e gerente da
agência OgilvyInteractive Brasil
Mercado
Nos próximos anos e
especialmente em 2010, o mercado de
informática e internet deve seguir a
mesma toada observada nos últimos
meses. Mesmo assim, os investimentos
Plataformas \\ Será importante
nos netbooks e smartphones e a capitalização de recursos de serviços baseados em observar os meios que apostarão
com as mídias sociais têm potencial para ganhar mais web, evolução de em iniciativas multiplataforma,
espaço na pauta das companhias. Outro segmento que deve dispositvos móveis e como a criação de versões
específicas para iPhone e outros
crescer é o das transmissões de televisão via web, tanto em aplicativos para social aparelhos portáteis
número quanto em qualidade no envio de dados. Também media. Além disso, acredito
será importante observar os meios que apostarão em que haverá um grande foco no potencial de iniciativas
iniciativas multiplataforma, que devem ir desde o transporte relacionadas à computação em nuvem, em especial, o
de conteúdo impresso para online até a criação de versões desenvolvimento para telas menores e dispositivos
específicas para plataformas como iPhone e outros móveis”, afirma.
aparelhos portáteis. Dentro do cenário de negócios que envolvem internet,
De acordo com Michel Lent Schwartzman, especialista também é comum o pensamento de que a grande rede
em mídias interativas e gerente da agência pode substituir todas as demais formas de mídia, como
OgilvyInteractive Brasil, em 2010 os serviços e aplicativos rádios, livros, revistas e televisão. No entanto, para o
devem continuar como o core business das companhias. diretor executivo do site Videolog, Edson Mackeenzy, essa
“Acho que será mantido um desenvolvimento forte na área previsão apocalíptica não se concretizará em 2010 nem
locaweb 23
Tendências:W2008 7/12/2009 15:13 Page 24
Tendências 2010
MOBILE E
CELULARES
* EM 2004, FUI CHAMADO DE
LOUCO POR APOSTAR NO
VÍDEO COMO O FUTURO.
HOJE, CONHEÇO MUITAS
Cloud computing \\ O ano de 2010
PESSOAS LOUCAS PARA deve representar o início do fim dos
processadores como o conhecemos
COLOCAR PELO MENOS graças à tecnologia das nuvens
24 locaweb
Tendências:W2008 7/12/2009 15:13 Page 25
Tendências 2010
* O MERCADO DE 2010
TEM QUE ACORDAR E
FAZER HOTSITES E
CLOUD
COMPUTING
APLICATIVOS
CONSISTENTES INTERAÇÃO DE
Renato Gosling, especialista em tecnologia de
telefones móveis e sócio da companhia Finger TECNOLOGIAS
Tips, que desenvolve aplicativos para Iphone
que acordar e fazer hotsites e aplicativos consistentes”, lembra o exemplo do aplicativo do Campeonato Brasileiro
afirma Renato Gosling, especialista em tecnologia de de Futebol para iPhone, patrocinado pela marca Nova
telefones móveis e sócio da companhia Finger Tips, que Schin e projetado pela própria Finger Tips. De acordo com
desenvolve aplicativos para iPhone. dados colhidos pela companhia, o programa já foi baixado
Segundo ele, hoje, a experiência do usuário com os mais de 40 mil vezes em três meses, e a média de
aplicativos de smartphones é outra. Não se trata apenas de tempo que seus usuários gastam com o aplicativo é de
uma prática da comunicação via mobile, mas sim da 15 minutos por dia. “Que outro meio de comunicação
comunicação em geral. Para ilustrar sua opinião, Renato pode hoje oferecer a seu anunciante uma visibilidade tão
grande?”. Segundo Gosling, essa tendência também deve
Comunicação \\ se repetir no Android, sistema operacional para
Software do Brasileirão
opera iPhone é um exemplo smartphones com participação do Google e que, na
do que o mercado deverá opinião do especialista, deve receber uma aprovação
criar para uma melhor rápida e já bombar em 2010.
comunicação via mobile
Outro ramo que deve ganhar mais atenção nos
próximos meses é a incorporação das redes sociais às
plataformas móveis, algo que Gosling já vê consolidado,
até pelo fato de muitas pessoas twitarem e acessarem
mídias sociais só pelo telefone, além de um maior espaço
aos pagamentos de bens e serviços
pelo celular. De acordo com o
especialista, existem grandes
possibilidades desse tipo de transação
financeira se intensificar já no fim de
2010. “Tecnicamente, o mercado já
está pronto para esse tipo de
interação, mas ainda é necessário ter
calma”, afirma, ressaltando que o fato
de ter a tecnologia à disposição não
significa pronta adesão do público.
Mídias sociais
Principal porta de entrada de
novos usuários da internet e foco da
atenção de quem já utiliza a grande
rede há algum tempo, as redes
sociais são hoje objeto de estudos e
fascínio por parte de corporações e
Facebook \\ Segundo o diretor executivo do site Videolog, Edson Mackeenzy, vamos presenciar a especialistas no assunto. Com o
luta do Orkut para se modernizar contra o Facebook, que traz conceitos mais modernos Twitter como a grande febre de 2009
locaweb 25
Tendências:W2008 7/12/2009 15:13 Page 26
COMUNICAÇÃO
EM TEMPO REAL
Tendências 2010
26 locaweb
artigo_ester_design:W2008 13/11/2009 19:15 Page 27
opinião/articulista
design
Éster Razzo
Analista de Desenvolvimento
de Software da Locaweb
ester.razzo@locaweb.com.br
SEO Wireframing e
SEO Mind Mapping
Confira algumas dicas para webdesigners planejarem o layout
na hora de construir um site com visão global de SEO
A sigla SEO significa Search Engine Optimization e Se você também utiliza algum serviço de análise web,
engloba um conjunto de ações que tem por objetivo como o Google Analytics, pode ser útil incluir tracking
melhorar o posicionamento de um site nos resultados da codes (códigos de rastreamento) no wireframe para analisar
busca orgânica (natural) de sistemas de pesquisa, como o se o fluxo de funilamento que deseja fazer está correto ou se
Google. Se você está em fase de reconstrução de um site, faz sentido. Também pode visualizar os pontos importantes
está projetando um site novo ou pretende fazer uma dessas de uma página, seu fluxo de navegação e checar se existe
duas coisas, pode incluir no wireframe seu projeto de SEO uma conversão interessante de ser rastreada.
na etapa de concepção e modelagem do site. Isso serve Uma ferramenta ótima para fazer wireframes é o Axure,
como guia para webdesigners projetarem o layout e muito utilizado por arquitetos da informação. O único
construírem o site. Também facilita ter uma visão global de inconveniente é ser paga. No site oficial, existe uma versão
seu projeto SEO. trial disponível para download.
Seguem alguns passos para estabelecer um bom Outras ferramentas para wireframes:
projeto de SEO: • Gliffy (online) • Smartdraw (Win)
• Justinmind (Win / Mac) • OmniGraffle (Mac)
• Identifique a função principal de cada página, se é
de vendas, serviços, informações. Outra dica legal para organizar suas ideias e projetos SEO
• Pesquise e identifique as palavras-chave que têm é usar mind maps (mapas mentais). É um recurso muito
alta relevância para o conteúdo da página. Essas prático, no qual as ideias são agrupadas em torno de um
palavras-chaves serão implementadas no caminho de assunto central e, a partir dele, é possível desenvolver os
pão (breadcrumb), título, meta-tags de descrição da conceitos que quiser.
página (description meta-tag) e palavras-chaves O legal de usar mind maps é que eles proporcionam uma
(keywords meta-tag). visão geral de seu projeto e facilita a tomada de decisões.
• Crie o wireframe de navegação usando essas Uma ferramenta free e online é a mindmeister. Confira no
palavras-chaves para compor a URL amigável site www.mindmeister.com.
mantendo as informações mais relevantes no Outras ferramentas para mind maps:
primeiro e no segundo níveis de diretórios. Ex: • Smartdraw (Win) • Visual Mind (Win)
www.meusite.com.br/informatica/notebook • Conceptdraw (Win / Mac) • Xmind (Win / Mac / Linux).
locaweb 27
Matéria de Capa:W2008 7/12/2009 15:02 Page 28
como o valor das métricas aderem à internet aumenta a cada mês. De acordo
com dados recentes do Ibope Nielsen Online
oferecidas por agências de (www.ibope.com.br), por exemplo, divulgados em outubro,
houve um crescimento de 5% na quantidade de pessoas
publicidade e plataformas da com acesso à web de julho para agosto de 2009, atingindo a
web. Tudo isso num universo marca de 47 milhões de cidadãos que já podem navegar
pelo universo online de casa, do trabalho ou de qualquer
construído a partir de novos outro local. O número de usuários ativos da internet
modelos de relacionamento também não fica atrás; no mesmo período analisado, o
aumento foi de 2,3%, o que totalizou, em apenas um mês,
entre empresa e consumidor. 37,7 milhões de brasileiros que aproveitaram o espaço virtual
de variadas maneiras e com os mais diversos propósitos.
Especialistas em internet A força que o território online vem adquirindo no País
discutem as técnicas também pode ser conferida no relatório Wave 4 – Power to
the People (www.universalmccann.bitecp.com/
mais adequadas para wave4/Wave4.pdf), produzido anualmente pela empresa
investimento nessas norte-americana Universal McCann (www.universal.
mccann.com) e que já está em sua quarta edição
comunidades online (a primeira saiu em 2006).
28 locaweb
Matéria de Capa:W2008 7/12/2009 15:03 Page 29
*O
ESPE ORKU
C TP
FUN ÍFICAS EDE M
QU
Raq C
uel ION E N ÉTRICA
pós- ecue AR
N ÃO VÃ S
R
grad r
uaçã o, profe O T
o em ssora WIT O
Fede etras da progra TER
L do
ral U
da P niver ma
de
araí s
ba ( idade
UFP
B)
locaweb 29
Matéria de Capa:W2008 7/12/2009 15:03 Page 30
Mídias Sociais
30 locaweb
Matéria de Capa:W2008 7/12/2009 15:03 Page 31
Mídias Sociais
locaweb 31
Matéria de Capa:W2008 7/12/2009 15:03 Page 32
Mídias Sociais
32 locaweb
Matéria de Capa:W2008 7/12/2009 15:03 Page 33
Mídias Sociais
locaweb 33
Matéria de Capa:W2008 7/12/2009 15:03 Page 34
Mídias Sociais
34 locaweb
Matéria de Capa:W2008 7/12/2009 15:03 Page 35
Mídias Sociais
locaweb 35
Matéria de Capa:W2008 7/12/2009 15:03 Page 36
Mídias Sociais
Todo esse caminho a ser percorrido com o usuário da Fontes como Ibope Nielsen Online, Google Ad
internet está diretamente ligado ao fato de que, atualmente, Planner (www.google.com/adplanner) e comScore
como destaca Sergio, dentro do ambiente de colaboração (http://tinyurl.com/y9kghba) chamam atenção para o fato
existem ferramentas que permitem que os próprios usuários de que, no Brasil, sites de compartilhamento de vídeos e
classifiquem determinados produtos e serviços. Em outras conteúdos são as plataformas que apresentam as mais
palavras, os internautas viram formadores de opinião. Além altas taxas de crescimento. Segundo uma dessas fontes –
disso, devem ser levadas em conta as métricas já bem o Ibope –, a audiência desse tipo de endereço já
aceitas no mercado, entre elas, medição de visualização, ultrapassou a de sites de e-mail, por exemplo. Soma-se a
taxa de conversão e cliques, todas em tempo real. “Nesse isso a posição de liderança ocupada pelo Brasil no que se
sentido, podemos mensurar tanto a qualidade dos refere ao tempo de navegação, também de acordo com
comentários em relação a uma marca, a um produto ou dados do Ibope. No mês de julho, por exemplo, o tempo
serviço quanto o número de interações realizadas”. médio gasto na web atingiu as marcas de 71 horas e
Vale lembrar que o território online, como qualquer 30 minutos na contagem geral, incluindo aplicativos, e
outro segmento da sociedade, é povoado por formadores 48 horas e 26 minutos levando em conta apenas
de opinião, os quais se convertem em verdadeiras métricas navegação em páginas.
para a análise de resultados. Nesse contexto, deve ser levada Ao se deparar com estatísticas tão favoráveis para o
em conta a expressão “whuffie”, descrita como toda troca universo online, logo vem à tona a discussão sobre
que não envolve dinheiro – pelo menos não envolvia possíveis impactos causados por tais mudanças nas ações
quando surgiu –, mas sim reputação e capital social. Essa tradicionais de comunicação corporativa, uma vez que a
espécie de “moeda” traduz o retorno de uma reputação web atrai um número cada vez maior de usuários.
criada na internet e que ultrapassou as barreiras do universo Segundo o professor da FGV, é muito difícil prever
virtual e foi parar no mundo real. De acordo com Sergio, a qualquer tipo de transformação porque o investimento
construção dessa “importância” se baseia em ações publicitário na internet corresponde, de acordo com
positivas e negativas e em contribuições para a dados do Nielsen Online, a apenas 4% do orçamento
comunidade online. “O whuffie mostra muito o que as total reservado à publicidade.
pessoas pensam de você. Dessa forma, o peso de seus
whuffies é dado por suas interações com comunidades Wikipedia \\
e indivíduos. Dentro desse conceito, vejo o whuffie Pesquisa revela que os
jovens que vivem nos
como uma métrica importante para consulta de retorno Estados Unidos apontam a
sobre investimentos”, esclarece o analista. enciclopédia como a
Marcelo garante que o mercado oferece diversas segunda fonte de maior
credibilidade para
ferramentas pagas para realizar ações de monitoramento, informações gerais
bem como inúmeros softwares gratuitos de métrica. Basta
uma boa pesquisa na web. Porém, o consultor de mercado
alerta para o fato de que o mais importante é reconhecer e
discutir os objetivos de uma empresa para que possam ser
supridos pelas métricas. “Sem uma boa análise, os
resultados produzidos por esses tipos de serviço são pífios,
descrições numéricas de fenômenos qualitativos resultantes
das interações sociais”.
36 locaweb
Matéria de Capa:W2008 7/12/2009 15:03 Page 37
Mídias Sociais
locaweb 37
Eleições:W2008 13/11/2009 17:42 Page 38
Eleições:W2008 7/12/2009 15:24 Page 39
SiteXBlog
leições
E nos
tempos
Com as novas alterações da lei
eleitoral, as campanhas de 2010
serão amplamente discutidas na
web. Até o marqueteiro de Barak
O
Brasil reúne atualmente mais de 64,8 milhões de
pessoas conectadas à internet, segundo pesquisa
do IBOPE/Nielsen online. Apesar de significativo,
o número aponta que apenas 30% dos brasileiros estão
online, pois há 192 milhões de habitantes no País. Ou
seja, há fortes indicadores de que, embora ainda não
sejam maioria, há um enorme contingente de pessoas a
serem alcançadas via web.
De olho nesse potencial, os governantes recém
aprovaram as alterações na lei eleitoral que permitem
a atuação de sites jornalísticos, blogs, rede sociais,
locaweb 39
Eleições:W2008 7/12/2009 15:23 Page 40
Eleições
beneficia diretamente muito mais os próprios políticos e //POLÍTICOS WEB 2.0: campanhas de 2010. Quem
candidatos que o processo eleitoral em si. A partir dela, 184 deputados federais acompanhou a experiência da
além de ficar definitivamente assegurada a livre 65 vereadores campanha presidencial norte-
manifestação do pensamento também em ambiente online, 32 senadores -americana em 2008, porém,
30 deputados estaduais
as campanhas eleitorais no Brasil terão a seu dispor as pode observar que a internet já
10 prefeitos
ferramentas do século 21. A grande questão é: os grupos 03 governadores figura entre as principais
políticos brasileiros estão preparados ou sabem usar os estratégias dos políticos.
novos dispositivos? % Partidos Exemplo disso é o PT
Ao analisar o nível dos debates prévios à aprovação da 20% PT (Partido dos Trabalhadores), que
16% PSDB
nova emenda pelo Senado, a conclusão é clara: os políticos investiu nos contatos com
14% Democratas
brasileiros têm pouca ou nenhuma familiaridade com as 13% PMDB Benjamin Self para desenvolver
novas ferramentas e isso certamente se refletirá nas 6% PSB as estratégias digitais de suas
5% PP futuras campanhas. Ben Self,
4% PDT como é mais conhecido, é o
3,7% PC do B
grande nome da Blue State
Dicas de Ben Self, o 17% Outros
Digital (BSD), agência
marqueteiro de Obama, Fonte: Politweets
responsável por desenhar a
para uma campanha campanha online de Barak Obama. A ideia é combinar a
bem-sucedida experiência bem-sucedida do profissional norte-americano
aos conhecimentos dos especialistas brasileiros.
Emocionar as pessoas
Esqueça clichês como “meu voto é do Esse alinhamento local é fundamental pois, embora o
fulano”. Na campanha de Obama, Brasil seja um verdadeiro recordista no tempo conectado
apareceram personagens como Charles, à internet - o usuário brasileiro navegou por 46 horas e
um idoso que ingressou na campanha 14 minutos, em média, durante o mês de agosto de 2009,
democrata. O depoimento dele e de
passando à frente de países mais desenvolvidos como
companheiros de trabalho no comitê, sem frases feitas ou condução
artificial, tem mais de meio milhão de visualizações no YouTube. Japão e EUA – e seja conhecido como um dos povos que
mais usam as redes de relacionamento no mundo, o
Buscar engajamento engajamento político com as ferramentas de internet,
A internet não é só persuadir pessoas, mas fazer com que se fundamental para o primeiro ano de uma campanha
engajem e trabalhem para o candidato. Cuidado para não tornar uma
online, é praticamente nulo.
competição de quantos amigos o candidato tem em uma rede social.
Para se ter uma ideia do cenário, segundo a
Construa relacionamentos Politweets (www.politweets.com.br), ferramenta que
Vídeos editados de forma simples, postados no YouTube, passavam contabiliza a participação de políticos no Twitter, até o
uma mensagem intimista da campanha. Um dos exemplos foi um momento, 324 políticos usam o microblog no País, dos
jantar entre Obama e alguns eleitores, cujo slogan é “conheça o
quais 66 são filiados ao PT, 52 ao PSDB e 46 ao DEM. Entre
verdadeiro Obama”. Na tela, aparecia um candidato descontraído
dando risadas, conversando com pessoas como você sobre os três mais seguidos estão o governador José Serra
assuntos que conversaria com seus amigos. (PSDB), seguido pelo senador Aloisio Mercadante (PT),
que têm capitaneado as discussões sobre o tema, e o
Transparência vereador paulista Gabriel Chalita (PSDB).
No melhor estilo “gente como a gente”, um organizador da campanha
Só de vereadores, porém, há mais de 7 mil no Brasil.
aparecia no escritório do comitê agradecendo os e-mails.
Assim, é fácil perceber que, embora a web 2.0 e suas
Ser autêntico ferramentas estejam ao alcance das eleições no País, ainda
Uma estratégia é tornar o e-mail de campanha pessoal, ou seja, uma há um longo caminho a ser trilhado por aqueles que
pessoa “fala” com o eleitor na mensagem. desejam usar a internet a seu favor nas eleições.
Conversar regularmente
É preciso manter contato. A primeira coisa é saber de onde a pessoa
vem e que assuntos ou interesses vocês têm em comum. * Se 5% dos eleitores mudarem seus
votos baseados em informações colhidas
Testar ferramentas e medir resultados
A campanha online permite testar tudo, passando pelo layout de na internet, (este grupo) poderá indicar
homepages até vídeos, ver o que dá certo e adaptar ferramentas quem irá para o segundo turno
e estratégias.
Marcelo Coutinho, professor da Fundação Getúlio Vargas
40 locaweb
Eleições:W2008 13/11/2009 17:44 Page 41
Eleições
locaweb 41
artigo_marcelo_mercado:W2008 13/11/2009 19:17 Page 42
opinião/articulista
e-business
Marcelo Trípoli
Presidente da agência de
marketing digital iThink e autor
do blog ifound.com.br
@marcelotripoli
marcelo.tripoli@ithink.com.br
Comprar na rede
nunca foi tão social
Mais que ferramentas de pesquisa e segurança, consumidores
buscam uma boa experiência em usabilidade na hora da compra
Foi-se o tempo em que os consumidores acessavam O engaging in commerce e o chatting with like-minded folks
sites estáticos para adquirir produtos. A experiência era contribuem para que, ao contrário dos sites simples, os usuários
sem graça e exigia esforço, tornando a usabilidade, muitas tenham acesso a hot products, good finds, weird finds, quality
vezes, desagradável. Agora, com a onda da interatividade, as products e products to avoid, podendo selecionar, com mais
empresas investem no conceito de social shopping. A dinâmica critérios, as mercadorias que lhe interessar. O social shopping,
é simples: você acessa o e-commerce e encontra, além de aos poucos, conquista as grandes marcas que realizam ações
mercadorias à venda, uma espécie de rede social, com espaços baseadas no conceito. Nos EUA e na Europa, essas iniciativas são
específicos para comentários, tags e listas de discussão. comuns. Um bom exemplo é o Kaboodle.com.
Nesse contexto, a opinião do usuário é muito valorizada. Essa grande rede de relacionamento tem uma interface
Ele tem total liberdade para criticar, elogiar e dar sugestões, agradável e permite aos usuários manterem perfis para
contribuindo para que outros usuários adquiram ou não o pesquisar roupas, sapatos e outros produtos. Quem quiser
mesmo produto. E mais: é uma boa oportunidade para as pode criar e participar de grupos específicos sobre alguns
empresas aprimorarem seus produtos e atenderem, cada vez temas. Um deles, com 111 participantes, é o Golf for Beginners,
mais, os desejos dos consumidores. no qual os membros discutem regras do jogo e recomendam
Há a possibilidade também de o consumidor acessar equipamentos que podem ser encontrados no Kaboodle.com.
promoções, criar listas de compra personalizadas para Outra ação que merece destaque é o Stylehive.com. A rede
compartilhar com seus amigos, participar de chat online e tem blogs colaborativos, nos quais se pode comentar sobre
acessar, via links, informações que o ajudem a usar bolsas, sapatos, blusas. No Brasil, o Wal-Mart lançou seu
determinado produto no dia a dia. Tudo isso é atraente e-commerce inspirado no conceito de social shopping. No site,
porque combina dois fatores essenciais: engaging in commerce o consumidor pode avaliar produtos, conhecer itens similares,
(engajamento no comércio, ou seja, a participação dos ler comentários de especialistas e participar de comunidades.
usuários e a contribuição deles para o aprimoramento dos Iniciativas como esta comprovam que os consumidores já se
produtos) e chatting with like-minded folks (pessoas com o sentem seguros para adquirir produtos pela web. O que
mesmo pensamento e sinergia para compartilhar exigem – e com razão – é uma boa experiência de compra.
conhecimentos e experiência). As empresas começam, no Brasil, a entender esse recado!
42 locaweb
205 X 275:Layout 1 19/3/2009 17:19 Page 1
Design:W2008 13/11/2009 18:09 Page 44
designweb
Realidade aumentada.
Ela vai invadir sua vida
Conceitos de holografia, realidade virtual e efeitos tridimensionais
saem das telas do cinema e se integram ao dia a dia das pessoas
Por Guilherme Tsubota
e Sérgio Vinícius
E
m uma sala, dois homens
jogam xadrez. No ambiente,
há uma mesa e duas cadeiras.
O tabuleiro e as peças do jogo não
estão fisicamente sobre a mesa. Esses
elementos são gerados por um
projetor. Mas a cada movimento
realizado com a mão pelos jogadores,
peões, bispos, cavalos, rei e rainha
virtuais - como se fossem reais, de
madeira ou ferro - se movimentam,
obedecendo ao comando dos homens.
O cenário acima, semelhante ao
visto em filmes de ficção científica, é
um exemplo do que é a realidade Exemplo \\ Em http://tinyurl.com/yggbx53, você confere um vídeo sobre realidade aumentada para
compreender melhor os conceitos desta tecnologia cada vez mais aplicada a ambientes web
aumentada. Em teoria, esse conceito,
em voga atualmente no mundo da desenhos 3D na tela do computador. para educação, treinamento, lazer e
tecnologia, refere-se à sobreposição de Ao manusear o holograma, que pode divulgações interativas e imersivas.
imagens 3D e virtuais gerados por um estar em uma folha de papel ou folder, Aplicações para aumentar a percepção
computador a objetos reais, do mundo você exerga, no display, suas mãos do dia-a-dia e soluções médicas
“de carne e osso”. mexendo uma imagem 3D. também se enquadram no sistema.
Usada em computação gráfica há As possibilidades do uso dessa
muitos anos, a realidade aumentada técnica em ambientes web são Games
ganhou popularidade com o advento incríveis, sobretudo em peças de Para desenvolvedores,
das webcams. Em sites interativos e marketing. Fora isso, é possível usar a programadores e público em geral, as
games, por exemplo, as técnicas de tecnologia em aplicações da RA para possibilidades de realidade aumentada
sobreposição dos objetos virtuais são engenharia, nas quais a equipe pode são mais palpáveis quando o assunto é
realizadas por meio de softwares que avaliar virtualmente a construção de jogos digitais. Isso porque há mais
conseguem analisar e “enxergar” casas, aviões, carros e por a[i vai. Há pessoas interessadas ou com
hologramas e transformá-los em ainda a possibilidade de usar o recurso possibilidade de jogar o que quer que
44 locaweb
Design:W2008 7/12/2009 15:25 Page 45
Design
* A técnica, em
é uma prova disso. Em
Star Trek, por sua vez, há
voga atualmente no o holodeck. Tron - Uma
mundo da tecnologia, Odisseia Eletrônica, por
refere-se à sobreposição si só, é um filme inteiro
em realidade virtual. E
de imagens 3D e Minority Report é um
virtuais geradas por um show de computação
computador a objetos gráfica manuseada.
Especificamente nos
reais, do mundo “de games, o potencial é
carne e osso” imenso. Ainda não há a
tecnologia do jogo de
seja que de projetar o próximo xadrez futurístico que
automóvel da GM ou realizar uma fez a festa do R2D2 e Estação no seu celular \\ Com um aplicativo para iPhone, é
operação de vesícula à distância. Chewbacca em Star possível interagir com um vídeo do Metro Paris Subway
Entretanto, nem a realidade Wars – episódio IV, mas
aumentada nem sua aplicação ao os estudos de holografia tecnologias apareceram, como a febre
mundo dos games surgiu até agora. evoluíram muito. Há cerca de atual de RA aplicada pelos designers.
Aliás, a história vem de longe. O 20 anos, foi construída uma máquina É óbvio que existe muito a evoluir,
assunto faz parte dos estudos há de fliperama um tanto atrapalhada, pois o maior “defeito” é que na
muitos anos. Um dos primeiros relatos porém, divertida, que seguia os realidade aumentada se está preso a
conhecidos é o de Morton Heilig, que princípios da realidade aumentada. um computador com webcam.
criou uma máquina chamada Era o primórdio da holografia com um Isso restringe muito as possibilidades
Sensorama, em 1948. A traquitana jogo de cowboy e índios. O nome era práticas. Uma das saídas mais
simulava a pilotagem de uma Hologram Time Traveler, que foi inteligentes que há hoje em dia é a
motocicleta e foi uma iniciativa de desenvolvido pela Sega em 1991. O interação com câmeras de celular.
realidade virtual, na qual um braço do game em si era simples: o jogador Os aparelhos mais modernos têm
piloto é projetado. assumia o papel do cowboy e viajava processamento gráfico excelente.
O primeiro protótipo da ideia de pelo tempo, enfrentando índios e Com isso novos jogos e interações
Helig efetivamente nasceu em 1962. homens das cavernas. Tirando a começam a aparecer.
Em um intervalo de 40 anos, diversas jogabilidade de lado, era
iniciativas vieram à tona, mas o termo impressionante ver aquele RA no metrô
“realidade virtual” surgiu apenas com homenzinho de pé no fliperama, Em www.metroparisiphone.com,
Jaron Lanier, em 1989. Pouco depois, como “mágica”. há um vídeo do Metro Paris Subway.
em 1992, o professor Thomas Caudell O tempo passou e novas Basicamente, você pode, com um
citou o “realidade aumentada” em um aplicativo para iPhone, direcionar a
projeto com engenheiros da Boing. sua câmera para qualquer direção e,
Nesse meio-tempo, itens como Realidade aumentada assim, ver as estações de metrô, a
realidade virtual e holografias
se popularizaram na ficção.
em funcionamento distância que está dela e para onde
o trem segue. Além disso, dá para
Confira abaixo alguns vídeos de como
Posteriormente, os consoles de jogos funciona a realidade aumentada em ver pontos comerciais espalhados
passaram a dividir a ribalta das iniciativas de marketing pelas redondezas.
diversas realidades projetadas com o http://tinyurl.com/yggbx53 A inovação usa o conceito de
http://tinyurl.com/ptgxtw
cinema. O universo de Star Wars, realidade aumentada sob um novo
http://tinyurl.com/ykeopu2
criado por George Lucas, recheado de http://tinyurl.com/yhhccxp prisma que pode atrair muito os
hologramas e da forma que os http://tinyurl.com/yz2csnx webdesigners: a adaptação para
personagens se comunicam entre si, um novo conceito/mercado.
locaweb 45
Design:W2008 7/12/2009 15:25 Page 46
Design
46 locaweb
205 X 275:Layout 1 19/3/2009 17:16 Page 1
artigo_rene_design:W2008 13/11/2009 19:21 Page 48
opinião/articulista
design
René de Paula Jr.
User Experience Evangelist
Microsoft Brasil
@renedepaula
rene.de.paula@microsoft.com
Blog: O UAU Nosso De Cada Dia
http://blogs.msdn.com/
renedepaula
48 locaweb
kwarup.com
I S A . B .
D E P AW E
E O N L O C
S A B T E R
EN E C E N
E N D D A TA
A G R A O
O U S
R I SS
PO
“A Grendene sempre buscou e tem tido sucesso em suas parcerias. Muitas empresas estão
colaborando conosco há muito tempo. A Locaweb está nos apoiando desde 2003, época em que
nem era a maior empresa de locação e serviços de seu segmento. Atualmente, 100% de nossos
sites na Internet estão hospedados em servidores dedicados da Locaweb. Como destaque,
salientamos o excelente pós-venda, o rápido e sempre eficiente retorno da equipe de suporte
e a qualidade e abrangência dos serviços que a Locaweb disponibiliza.”
A Locaweb oferece soluções corporativas com flexibilidade, segurança e toda a excelência em atendimento
que sua empresa precisa, por isso foi escolhida como o Melhor Data Center do Brasil pelo Prêmio Info. Além disso,
é pioneira na utilização dos processadores low-voltage da nova linha Intel® Xeon® Série 5500, que oferecem
ganhos de performance superiores a 120% e reduzem o consumo de energia em até 40% nos servidores.
Conheça hoje mesmo nossas soluções corporativas de Cloud Computing, servidores dedicados, serviços
profissionais e de outsourcing desenhadas para promover a hospedagem de seus sites e aplicações empresariais
com capacidades robustas, alta performance e recursos exclusivos, inclusive em projetos de missão crítica.
www.locaweb.com.br/corporativo
caseslocaweb
Delícia de website
Com layout moderno e fácil de navegar, novo site da Sadia esbanja
interatividade e incentiva internautas a levar uma vida mais saudável
são atualizadas slogan “Qualidade de Vida
semanalmente. começa com Qualy, da
Por meio da página Sadia”, que acompanha a
eletrônica, é possível enviar linha desde 1991.
recados para amigos, “Com ferramentas
colegas e familiares. O interativas e linguagem
“Mensagem na Torrada” é a simples, procuramos fazer
seção responsável por isso: com que o nosso internauta
a ferramenta que permite a se sinta em casa ao entrar
interatividade em tempo na nova página da Qualy”,
real. Com uma animação afirma Eduardo Bernstein,
em Flash, o visitante pode diretor de marketing da
escrever e enviar frases para Sadia. A empresa, inclusive,
outros usuários de forma acaba de lançar uma versão
A empresa Sadia vídeos animados e divertida e inusitada. mobile remoçada de sua
(www.sadia.com.br) interativos. A nova Graças a “Mensagem na página princial. Para acessar
lançou um novo site homepage de Qualy tem Torrada”, o internauta o site via celular, entre em
para a Marca Qualy destaques como TV Qualy, convida outras pessoas a m.sadia.com.br e confira o
(www.qualysadia.com.br). Blog da Ana e Mensagem visitar o site ou até mesmo mesmo conteúdo exibido
Com design moderno, a na Torrada. para tomar um café da em www.sadia.com.br.
nova página da parceira da No TV Qualy, é possível manhã ou almoço. Ao lado, você confere
Locaweb permite ao encontrar um canal com Todo o projeto da nova mais detalhes da nova
internauta acessar vídeos receitas em vídeo, que homepage foi inspirado no página da Qualy.
com diferentes receitas que mostra em detalhes a
têm a margarina Qualy preparação de pratos
como ingrediente, além de que levam a Qualy
obter dicas para uma vida como ingrediente.
mais saudável. No canal “Reaproveite”,
A nova página o internauta encontra dicas
eletrônica, que teve de artistas para personalizar
produção assinada pela e reaproveitar os potes da
renomada Agência Click margarina Qualy.
(www.agenciaclick.com.br) O Blog da Ana é uma
reúne, sob a mesma área que traz dicas, notícias
interface, as principais e informações relacionadas
ferramentas utilizadas nos aos temas “Atualidade”,
sites de maior sucesso da “Qualidade de Vida”, AgênciaClick \\ Empresa desenvolveu a página eletrônica que foi
internet, como blogs e “Família” e “Culinária”, que inspirada no slogan “Qualidade de Vida começa com Qualy, da Sadia”
50 locaweb
Case:W2008 13/11/2009 18:18 Page 51
O site
3 4
locaweb 51
Facebook:W2008 13/11/2009 18:01 Page 52
O
Facebook Connect é um conjunto de APIs que
permite aos desenvolvedores levarem conexões
e identidades dos usuários da rede social a
sites, blogs e aplicações, oferecendo-lhes uma melhor
experiência. Possibilita também o crescimento
exponencial de visitas aos sites que o utilizam, pois a
cada conteúdo compartilhado no perfil de um usuário, A seguir, o usuário entra com seu login e senha:
todos os seus amigos ficam sabendo e podem clicar de
volta ao site.
A iniciativa é uma forma de dar créditos para um
determinado comentário e também de reduzir
comentários maldosos ou falsos, já que parte do perfil
no Facebook da pessoa que comentou ficará exposto
para todos. Programar utilizando as APIs do Facebook
Connect é bem simples, o exemplo abaixo mostra uma
aplicação que utiliza a ferramenta e, em seguida, como
foi implementada.
A aplicação pode ser vista em: <http://app.esporte.
ig.com.br/placar/ forum/index.php?jogo=14343>
52 locaweb
Facebook:W2008 13/11/2009 18:01 Page 53
Codificação
Uma vez configurado, você pode começar a codificar
Agora que mostramos uma aplicação que usa o seu aplicativo. O primeiro passo é incluir na sua tag
Facebook Connect, mostraremos como é simples sua HTML, o código xmlns:fb=<http://www.face
implementação. Primeiramente, é preciso criar uma conta book.com/2008/fbml>. Esse código é preceito básico
no Facebook. Depois, deve-se adicionar ao menos um para usar a API Facebook Connect. Depois, sua TAG HTML
amigo para validar a conta (parece mentira, mas ficará mais ou menos assim, <html xmlns="http://
apanhamos muito até descobrir isso). Em seguida, acesse www.w3.org/1999/xhtml" xmlns:fb="http://www.
www.facebook.com/developers. Permita o acesso ao facebook.com/2008/fbml">. O “mais ou menos” é válido,
developers e clique em set up a new application (do lado já que depende do que estiver fazendo. Você pode ter de
direito superior). Aparecerá a seguinte tela, onde dará um incluir algo a mais ou tirar o atributo do W3C.
nome para o seu aplicativo: O segundo passo é incluir a tag <scripttype="text/
javascript" src="http://static.ak.connect.facebook.com/js/
api_lib/v0.4/FeatureLoader.js.php/pt_BR"></script> na sua
página. É aconselhável que a inclua no final do seu código,
para otimizar o carregamento da aplicação.
É possível notar - no final do endereço, onde é
incluída a API - uma sintaxe “pt_BR”. Ela, como você
deve presumir, deixa a aplicação no idioma Português do
Depois, preencha os dados do aplicativo: Brasil. Ao retirar essa sintaxe, por default, a aplicação fica
em inglês. Na página http://wiki.developers.facebook.com/
index.php/Facebook_Locales, você encontra todas as
opções de idiomas que a API disponibiliza.
Logo abaixo da inclusão da API na página, informe
qual é o APP que vai ser usado. Logo acima, ao
configurar a aplicação no Facebook, observe sua “API
Key”. É por meio dela que vai dizer a API que deve seguir
as configurações que setou anteriormente.
No exemplo a seguir, você vê a função “FB.init”. Nela, é
O código API Key será usado posteriormente no possível passar os parâmetros para o funcionamento da
código para confirguração. aplicação. O primeiro é sua “API Key”. O segundo, a página
Nos links da esqurda, clique em Conectar. Na tela que recebe o callback da função desta página. Você verá
que abrirá, preencha o campo “Conectar URL” com a URL uma sintaxe de condicional. Apesar de ela não ser
locaweb 53
Facebook:W2008 13/11/2009 18:01 Page 54
necessária, vale usá-la, uma vez que, na maioria dos Código comentado
casos, é imperioso que seja mostrada uma mensagem, Linha 1, a chamada da função.
seu avatar, se o usuário estiver conectado. Caso o Linha 2, criada variável, recebo o número de controle
usuário esteja conectado, seria algo como chama a do usuário dentro do Facebook.
função update_user_box. Linha 3, há requisição via FQL dos campos que preciso
para a aplicação. Em resumo, é o avatar do usuário com o
<script type="text/javascript"> logo do Facebook, para indicar que a pessoa é
FB.init("44762f7f5390e60314c0272a54edfc7e", proveniente do Facebook, e a URL do perfil dele onde o
"xd_receiver.htm", {"ifUserConnected" : uid (numero de controle) é igual ao conectado.
update_user_box}); Linha 4, na qual faço com que a API execute meu FQL
</script> e receba os itens em variáveis.
Linha 8, criada variável que recebe o HTML que quero
Agora, vamos à página que recebe o callback do que seja exibido na minha aplicação. Contém o link para o
Facebook, a “xd_receiver.htm”. Basta você manter uma perfil do usuário, foto e nome, além do link que
página HTML com o nome citado no mesmo diretório da desconecta o usuário do facebook “<a
sua aplicação com o código abaixo. href=\"javascript:FB.Connect.logout();logoutfacebook();\"
title=\"logout\" class=\"logout\">(x) sair</a>”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Linha 11, informo à API que ela deve renderizar a página.
Strict//EN""http://www.w3.org/TR/xhtml1/DTD/ Ao ler o trecho acima, você deve ter se perguntado se
xhtml1-strict.dtd"> eu não escrevi errado. Em vez de SQL, redigi FQL. Mas não
<html xmlns="http://www.w3.org/1999/xhtml" > está errado. FQL é similar ao SQL, entretanto, faz
<body> requisições dos dados do usuário do Facebook. Veja em
<script http://wiki.developers.facebook. com/index.php/FQL.
src="http://static.ak.connect.facebook.com/ No código acima, há link para logout do Facebook.
js/api_lib/v0.4/XdCommReceiver.js" Esta, talvez, seja a função mais fácil que será feita. É
type="text/javascript"></script> apenas “<a href=\"javascript:FB.Connect.logout();\"
</body> title=\"logout\" class=\"logout\">logout</a>”. Só isso.
</html> Ao clicar, o usuário se desloga do Facebook. A função
seguinte, chamada concomitantemente a de logout, a
A seguir, confira a função update_user_box. logoutfacebook(), serve apenas para limpar o HTML e
retornar ao estado que estava antes da conexão.
function update_user_box(){ E por falar em conexão, para efetuá-la com o
var uid=FB.Facebook.apiClient.get_session().uid; Facebook, basta incluir o código abaixo no local onde
var fql='SELECT name, pic_square_with_logo, quer que apareça o botão Fconnect. O atributo onlogin,
profile_url FROM user WHERE uid='+uid; como você deve imaginar, serve para executar uma
FB.Facebook.apiClient. determinada função, no caso, “update_user_box()”,
fql_query(fql,function(result){ quando o usuário se logar no Facebook.
prof_url=result[0].profile_url;
prof_name=result[0].name; <fb:login-button
pic_square=result[0].pic_square_with_logo; onlogin="update_user_box();"></fb:login-button>
user_box.innerHTML = “<a href=\""+prof_url+"\"
class=\"foto\" target=\"_blank\"><img Agora, você já sabe criar um App no Facebook, logar,
src=\""+pic_square+"\" /></a>" permanecer logado e deslogar sua aplicação. Apenas falta
+"<p><a href=\""+prof_url+"\" class=\"user\" publicar um comentário. O primeiro passo é criar um
target=\"_blank\"><strong>" template feed. Vá até o link http://developers.facebook.com
+prof_name+"</strong></a> <br /> <a tools.php?feed>. Procure o nome do seu aplicativo e
href=\"javascript:FB.Connect. clique em Próxima. Nesse ponto, você começa a
logout();logoutfacebook();\" title=\"logout\" desenvolver ou criar o seu “template feed data”.
class=\"logout\">(x) sair</a></p>" O template nada mais é do que uma forma com que o
}); Facebook recebe informações em JSON e o exibe no perfil
FB.XFBML.Host.parseDomTree(); do usuário com sua prévia autorização. O primeiro é de
} uma linha. Algumas variáveis são exclusivas, como actor
54 locaweb
Facebook:W2008 13/11/2009 18:01 Page 55
e images. As variáveis são exibidas na forma de Pronto. Em todo post do mural vai haver um link
{*variável*}. Por exemplo: {*actor*} escreveu um post. para http://esporte.ig.com.br. Você pode alterar da
Sairia: Leandro escreveu um post. maneira que preferir, inclusive usar o JSON, como o
Há o campo onde se desenvolve o template e, abaixo, número do jogo, por exemplo. Vai da sua necessidade.
um onde você desenvolve o JSON. Por padrão, teremos: Clique em Próxima e depois em Registrar coleção de
modelo. Será aberto um pop com o identificador do
{”images”:[{"src":"http://pad.thedigital template. Copie-o e reserve para mais tarde. Agora, você
movement.com/_blaise/2007-06-15-dgen- tem um template elaborado. É hora de criar o código
breakfast.jpg","href":"http://www.facebook.com"}, propriamente dito. Vamos à função em JS para publicar.
{"src":"http://pad.thedigitalmovement.com/
_blaise/2007-06-13-roger-waters.jpg", function publish(comentario){
"href":"http://www.facebook.com"}]} template_data = {"time1":"Atlético-
GO","time2":"ABC","gols1":"2","gols2":"0",
São apenas imagens, mas vale acrescentar itens de "images":[{"src":"http://pad.the
acordo com sua necessidade. Vamos criar um exemplo digitalmovement.com/_blaise/2007-06-15-dgen-
que envie o resultado de um jogo, o nome dos times, o breakfast.jpg", "href":"http://www.facebook.com"},
escudo de cada time e o texto que você escreveu. {"src":
"http://pad.thedigitalmovement.com/_blaise/2007-
{”time1″:”Atlético-GO”, 06-13-roger-waters.jpg",
”time2″:”ABC”,”gols1″:”2″,”gols2″:”0″, "href":"http://www.facebook.com"}]
{”images”:[{"src":" ,"comentario":comentario}
http://pad.thedigitalmovement.com/_blaise/2007- facebook_publish_feed_story(141837730762,
06-15-dgen-breakfast.jpg ", "href":" template_data);
http://www.facebook.com"}, {"src": " }
http://pad.thedigitalmovement.com/_blaise/2007-
06-15-dgen-breakfast.jpg ", "href Publish tem a função de formatar o JSON com os
http://www.facebook.com "}]},”comentario”:”Hello campos criados no template. Ela, em seguida, chama a
World”} função que faz a publicação. Envia por parâmetro o id
do template e o JSON com os dados. Depois, deve-se
Com este JSON, você pode desenvolver seu template. criar a função que faz a publicação propriamente dita,
vamos chamá-la de facebook_publish_feed_story.
{*actor*} Comentou sobre {*time1*} {*gols1*} x
{*gols2*} {*time1*} -> Leandro Garcia comentou function
sobre Atlético-GO 2 x 0 ABC facebook_publish_feed_story(form_bundle_id,
template_data) {
Ao clicar em próxima, você desenvolve o template FB.ensureInit(function() {
maior, o que é mais comumente usado. Colocaremos o FB.Connect.showFeedDialog(form_bundle_id,
título da mesma maneira, embora não necessite ser igual. template_data);
});
{*actor*} Comentou sobre {*time1*} {*gols1*} x }
{*gols2*} {*time1*} -> Leandro Garcia comentou
sobre Atlético-GO 2 x 0 ABC Com isso, é possível publicar uma mensagem no
Facebook. Vamos criar um link que chame a função Publish.
Abaixo, no histórico curto, colocaremos apenas o
comentário digitado: <input onclick="publish(‘Hello World. Minha
Primeira Publicação’)"
{*comentario*} -> Hello World. Minha Primeira type="button" value="Submit Comment" />
publicação’
----------------------------------------------------------------------------------------
Dê Próxima. No próximo item, você cria um link de Guilherme Tsubota é especialista em tecnologia mobile;
retorno. No texto do link da ação, por exemplo: Veja mais Leandro Garcia é especialista em desenvolvimento para
sobre o Jogo no Link da ação, ex. http://esporte.ig.com.br redes sociais; e Vinicius Macedo é desenvolvedor web no iG
locaweb 55
GoogleMaps:W2008 13/11/2009 18:02 Page 56
O
s serviços de localização
baseados em mapas
geográficos na web, como
Google Maps, MapLink e
Apontador, são tão usados hoje em
dia que deram origem a um novo
termo: geoweb. Essa expressão
define exatamente o mashup no
qual os internautas disponibilizam
informações como fotos, notícias
ou dados em um determinado
ponto do mapa. Inicialmente, eram
informações de todos os tipos,
notícias ocorridas naquele local, Parceiro de respeito \\ O Google Maps é o sistema de mapas online mais conhecido e acessado do
mundo, o que já faz dele um grande parceiro para a sua empresa. Acesse www.google.com/local/add
fotos e até pontos onde um grupo
de pichadores tinha deixado suas marcas, mas com o
passar do tempo foi possível enxergar na ferramenta * Geoweb é a expressão que define
um uso de grande valia para o mercado empresarial: exatamente o mashup no qual os
mostrar aos clientes e internautas onde está sua internautas disponibilizam informações
empresa, facilitando assim a chegada deles até
determinada localização física.
como fotos, notícias ou dados em
um determinado ponto do mapa
Mostre sua empresa no
Google Local Business Center observar no mapa, à direita da tela, se o
O Google Maps é o sistema de mapas online mais posicionamento está sendo feito de maneira correta. As
conhecido e acessado do mundo, o que já faz dele um informações adicionais como “Empresa/Organização”,
grande parceiro para a sua empresa. Para aplicar sua ”Telefone”, “Endereço de e-mail” e “Site” são exibidas
página no sistema, acesse o Google Local Business no balão do mapa. Confira a digitação antes de avançar
Center (www.google.com/local/add). É importante frisar para a próxima etapa.
que você precisa ter uma conta do Google para utilizar Faça uma breve descrição sobre sua empresa e, no
o recurso. Caso a página apareça em inglês, no canto campo Categoria, informe seus ramos de atuação (é
superior direito é possível alterar o idioma antes de possível incluir até cinco categorias). Enquanto escreve,
entrar no sistema. Depois do login, a mesma opção o sistema irá sugerir categorias de acordo com o que
aparece ao acessar o link Settings. foi digitado. Caso queira remover alguma delas, basta
Para inserir seu endereço físico na página, clique em clicar no X que aparece à direita das categorias
Adicionar nova empresa. Na tela seguinte, você deverá adicionadas. Depois de preencher o formulário e revisar
preencher o formulário com os campos solicitados e o mapa, clique em Próxima.
56 locaweb
GoogleMaps:W2008 13/11/2009 18:02 Page 57
locaweb 57
GoogleMaps:W2008 13/11/2009 18:02 Page 58
Acima \\ Os dados
* Após passar por cinco etapas de solicitados pelo
Apontador são
cadastramento no Apontador, você básicos, tais como
pode optar por até quatro tamanhos de nome, email, data de
nascimento e senha
mapa, copiar o HTML para inseri-lo na
página e ver um preview da imagem devem estar separadas por espaço. A última opção é
a área Tornar local privado, usado apenas caso não
As informações solicitadas são básicas, tais como deseje que sua empresa apareça nos resultados da
nome, e-mail, data de nascimento e senha. Assim que o busca do Apontador.
formulário é preenchido, você é direcionado para o Siga clicando em Prosseguir. Caso as informações
painel do Apontador, onde está o menu MEUS LOCAIS. estejam corretas, em Mapas aparecerá um mapa
Para iniciar o apontamento de sua empresa no solicitando sua verificação quanto à localização
mapa, clique em Cadastrar novo local. A partir daí, cinco apontada. Se estiver incorreto, basta voltar à etapa
etapas deverão ser cumpridas: Informações, Mapa, anterior e informar o local certo. Se estiver correto,
Logo & Fotos, Vídeo e Visualizar. pressione Prosseguir.
Na área de Informações, digite o nome de sua Na etapa Logo & Fotos, você pode selecionar uma
empresa em Nome do local e o setor em que trabalha imagem local ou hospedada em qualquer endereço
no campo Categoria. Em seguida, informe os dados tanto para o logotipo quando para a foto da empresa.
sobre a localização física de seu empreendimento. Na Essas informações enriquecem seu mapa. Depois,
área de Cidade e Estado, de acordo com o que for clique em Prosseguir para ir para a penúltima etapa,
digitado, surgirá uma lista de municípios. O mesmo Vídeos, na qual pode adicionar um vídeo da sua
acontecerá no campo Endereço e Número. Enquanto empresa via URL. Esse vídeo pode estar hospedado no
você digita os dados, é exibida uma lista com as YouTube, Vimeo, MySpace, entre outros. O item final,
possíveis ruas, acompanhada do bairro. Nesse campo, Visualizar, fornece o link da página com a sua
caso o nome de sua rua seja um número, digite-o localização e também gera o widget do mapa para
por extenso. você colocar nos endereços que quiser.
As outras partes do formulário são de Em primeiro lugar, é possível selecionar até quatro
preenchimento simples. Vale a pena ressaltar a tamanhos de mapa. No item 2, dá para copiar o código do
importância do campo “palavras-chave (Tags), pois será widget para inseri-lo no HTML da página desejada. Já no
por meio dele que o internauta poderá chegar até você, item 3, é exibido um preview de como ficará seu mapa.
usando a busca do site. As palavras-chave informadas Pronto! Mas lembre-se que o serviço ainda é beta.
58 locaweb
Projeto3:anuncio 18/9/2009 18:55 Página 1
HTML x Flash:W2008 13/11/2009 17:59 Page 60
Por Yan Borowski Machado entrende como funcionam as mais recentes versões do
programa e da linguagem e confere prós e contras de
D
urante os últimos meses, muita discussão tem cada um deles.
girado em torno do tema"HTML 5 versus Flash.
Muitos apostam que a nova versão da A discussão
linguagem mais popular de construção de páginas pode O cerne da questão é se o Flash morrerá. E, em caso
enterrar o bom software da Adobe, que permite criar positivo, se o HTML 5 será o responsável por selar o
interfaces animadas, leve e interativas, sobretudo no caixão. Mais de uma vez, Shantanu Narayen, CEO da
ambiente web. Adobe, já afirmou que quanto mais o padrão HTML
Para engrossar o coro daqueles que apostam que a avançar, melhores serão os conteúdos web. Logo, a
linguagem HTML irá derrotar o Flash, navegadores empresa se mostra favorável à evolução da linguagem.
populares como Opera, Safari, Firefox e Google Chrome O depoimento reflete cada vez mais que a criação
já começaram a implementar alguns padrões do de aplicações ricas para a internet sejam feitas com a
HTML 5. Do outro lado da questão, webdesigners e plataforma que for, serão cada vez mais populares. De
desenvolvedores fãs do Flash defendem que levará acordo com o CEO da Adobe, entretanto, o principal
muito tempo para que todos os recursos da ferramenta desafio para o HTLM 5 será funcionar corretamente em
da Adobe estejam presentes no HTML. E mais: há quem diferentes navegadores. Até hoje, exceção feita ao Internet
acredite que não é possível substituir todas aquelas Explorer, a maior parte dos browsers apresenta conflitos
animações complexas em Flash por tags HTML. Nesta de funcionamento e exibição de páginas quando os
reportagem, você verifica os dois lados da questão, códigos não estão bem escritos e estruturados.
60 locaweb
HTML x Flash:W2008 13/11/2009 17:59 Page 61
FLASH
* Navegadores populares como programa, não há muito o que fazer”. Na
Opera, Firefox e Chrome já PRÓS visão do coautor do HTML 5, com uma
•Está no mercado desde plataforma aberta, um linguagem open
começaram a implementar 1996. Muitos problemas source ou um padrão, qualquer pessoa com
alguns padrões do HTML 5. já foram resolvidos e conhecimento técnico pode atuar.
alguns ainda terão de ser
Por outro lado, os fãs do Flash Os opositores do Flash deixam claro que
solucionados pelos
o problema é a ferramenta se tornar, para a
apontam que a linguagem navegadores que forem
programar seus recursos. web, o que o Windows se tornou para os
incorpore os recursos da Adobe PCs: o sistema predominante. Vladimir
•É utilizado por grandes Vukicevic, líder técnico do Firefox, afirma
empresas, como o
Google, com sucesso
que a Mozilla quer que a web continue
em muitos de seus aberta para garantir que funcionalidades,
serviços, hotsites. como vídeos, não sejam manipuladas e
dependentes de entidades empresariais.
•Já existem muitos
Entretanto, sobre o HTML 5 substituir o
frameworks de JavaScript,
exemplo do JQuery, que Flash, até mesmo os mais otimistas são
possuem inúmeros precavidos. “Para que o HTML5 e o canvas
plugins para players de substituam o Flash, é preciso que os
vídeo, áudio e animações. desenvolvedores realmente queiram usá-los
•Segundo a Adobe, o
em suas aplicações”, diz Vukicevic.
FlashPlayer está
presente em 99% dos Internet Explorer e
W3C \\ Órgão responsável por criar padrões de linguagem
de desenvolvimento de páginas, como o HTML 5
computadores dos o fiel da balança
usuários de internet. Especialistas consultados pela Locaweb em
Por fim, Narayen pontua que a ideia da CONTRAS Revista acreditam que a questão envolvendo
Adobe é, apesar de ser favorável ao HTML 5, •O usuário tem de HTML 5 e Flash será decidida pela MIcrosoft.
continuar a desenvolver o Flash em sua instalar o plugin (hoje A falta de suporte de alguns recursos do
busca para criar aplicações cada vez mais com 1,83 MB). HTML 5 no popular Internet Explorer é um
ricas. Com a vasta opção de navegadores •É uma tecnologia
problema para desenvolvedores.
atualmente, diz o executivo, o Flash se proprietária. Se a Adobe O fato de vários recursos não serem
torna cada vez mais importante, justamente resolver acabar com o suportados pelo navegador mais popular
por ser - se é que é possível - mais suporte ou transformá-lo do planeta faz com que diversas aplicações
multiplataforma que a linguagem. em uma tecnologia paga, web deixem de evoluir. Afinal, os
todos ficarão sem opção
Do lado do HTML 5 está Ian Hickson, (ou usar o Silverlight).
desenvolvedores têm de fazer adaptações no
coeditor da nova linguagem e também código, como hacks, adicionar conteúdo
funcionário do Google. De acordo com o •São necessárias dentro de Flashes e usar recursos específicos
desenvolvedor, um dos principais problemas modificações no arquivo do Internet Explorer (como controles de
flash para utilizar
do mundo da tecnololgia ocorre quando um ActiveX para transparência em PNG).
técnicas de SEO, pois os
nicho é dominado por apenas uma mecanismos de busca
ferramenta, uma empresa ou uma não conseguem ler o
tecnologia. O ideal é existirem vários players, conteúdo das animações
que lutem constantemente para se superar. perfeitamente
(geralmente meta-tags
Para Hickson, o Flash é uma solução
são inseridas na página
privada que não se enquadra no quesito para as engines
“plataforma web”. Trata-se, afinal, de um indexarem o site).
software de desenvolvimento, criado e
mantido por uma corporação privada. •Para criar uma animação
é necessário ter o
“Quando se está preso a uma única empresa, ambiente de criação do
você está em sua mão. Se, por acaso, ela Flash (Mx, CS1, ..., CS4),
decidir descontinuar um produto, o que o que são pagos, para
consumidor fará?”, questiona. “Ou mesmo se criá-la ou acoplar o
W3Schools \\ Site conta com tutoriais e informações
começam a cobrar ou aumentam o preço do vídeo/controle. sobre linguagens de internet, como o HTML 5
locaweb 61
HTML x Flash:W2008 13/11/2009 17:59 Page 62
62 locaweb
HTML x Flash:W2008 13/11/2009 17:59 Page 63
bateria para chips Tegra (nVidia - Zune HD) e um contexto de navegação indicado por um
Snapdragon (netBooks). Agora, também estão atributo de manifesto. Trata-se da fonte da URL
disponíveis formatos para visualização de vídeos em HD. indicada na entrada mestre do HTML.
Umas das grandes barreiras que a Adobe tem
enfrentado com o Flash, hoje, é o iPhone. A Apple, de Banco de dados - O W3C fez uma proposta de API
Steve Jobs, já afirmou que o telefone não terá suporte para acesso a dados com o HTML5. Nele, os
nativo para o Flash. De acordo com o mandachuva da navegadores passariam a utilizar base de dados
empresa da maçã, “o Flash é demasiado lento para estar para armazenamento das aplicações. Isso ainda
em smartphones acessando a web”. vai dar muito pano para manga, já que não é
Recentemente, a Adobe conseguiu contornar - em unanimidade entre desenvolvedores.
partes - o problema com relação ao iPhone. Os
desenvolvedores permitiram que o Adobe Flash Professional Na prática
CS5 exportasse arquivos para formatos de aplicativos do Agora, é importante observar alguns exemplos de
telefone da Apple. Mas não foi dessa vez que a Adobe codificação. Deixando de lado a teoria e a briga de
conseguiu colocar o suporte ao Flash no Safari. quem vai acabar com quem, confira como funcionam
Com essas melhorias de desempenho, o Adobe Air alguns códigos.
também será beneficiado. Aparentemente, as aplicações Adicionar um vídeo à pagina:
usadas com Air ficarão bem menos custosas para a tão
precisa memória RAM (o que é uma maravilha, porque o Com o HTML 5:
meu Twhirl come bastante). <video width="640" height="360"
src="http://www.youtube.com/watch?v=VW7dh3fdYlA"
HTML 5 controls autobuffer> <p>Você pode colocar um
A linguagem HTML 5 ainda não está pronta para encarar texto aqui dentro.</p> </video>
de igual para igual um lugar no coração de
desenvolvedores. Entretanto, as novidades do padrão Ainda existe um atributo para iniciar os vídeos
incluem itens como suporte a elementos gráficos automaticamente.
sofisticados e inserção de vídeos. Confira, abaixo, os
principais recursos e inovações da linguagem de marcação. <video src="festa_15_anos.mov" autoplay>
</video>
Canvas - Servirá para implementação de
elementos gráficos sofisticados. Essas tags Com Flash no HTML 4:
poderão ser utilizadas para edição de imagens (quem já teve de inserir um flash no conteúdo de
através de APIs ou JavaScript. Elas também são uma página HTML conhece o código)
compatíveis com CSS.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-
Vídeo - Novo recurso que permite inserir um 444553540000" width="425" height="344"
vídeo na página com um simples codebase="http://download.macromedia.com/
"<video></video>". Adeus vídeos “embeded”! pub/shockwave/cabs/flash/swflash.
cab#version=6,0,40,0">
Geolocalização - Tags que permitem um site <param name="allowFullScreen" value="true" />
acessar a localização do usuário (em um <param name="allowscriptaccess" value="always"
smartphone) para ampliar a experiência dele. />
O Safari já programou esse recurso para o iPhone <param name="src" value="http://www.youtube.com/
OS 3.0. O Google Latitude já está utilizando o watch?v=VW7dh3fdYlA" />
recurso também. <param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash"
Caching de aplicações - Com este recurso, width="425" height="344"
as aplicações estarão disponíveis para uso src="http://www.youtube.com/watch?v=VW7dh3fdYlA"
offline. Na publicação provisória da W3C, o allowscriptaccess="always"
arquivamento das URLs será feito por meio de allowfullscreen="true">
categorias. Existem as entradas mestre, que são </embed>
documentos que foram adicionados ao cache por </object>
locaweb 63
HTML x Flash:W2008 13/11/2009 17:59 Page 64
Na captura exibida na
parte inferior desta página,
você vê um exemplo que
indica onde o usuário está.
Observe que o navegador
pergunta se você deseja
compartilhar a localização
com o domínio que está
sendo acessado. Foi utilizado
o Firefox 3.5.5 para o teste.
Conclusão
A briga é importantíssima
para que todos os browsers
sigam o padrão HTML 5 com
perfeição e que o Flash
esteja presente no meio de
sites que utilizem esse
Suporte em álbuns virtuais \\ Alguns álbuns online, como o Picasa, possuem suporte para este tipo de
tag. Com ele, o usuário pode tirar fotos do restaurante, onde almoçou e traçar um mapa virtual com os lugares padrão de codificação. Afinal,
o que seria do Firefox se não
Geolocalização existisse o Chrome? O que seria do Windows se não
Este é um recurso extremamente interessante. Alguns fosse o Unix e suas milhões de distribuições?
álbuns online, como Picasa e Flickr, possuem suporte para O Flash, com certeza, não se sente ameaçado pelo
esse tipo de tag. São inúmeras as possibilidades de HTML 5, afinal, a exibição de vídeos é algo recente
utilização. Com ele, o usuário pode tirar fotos do para o próprio programa da Adobe. Todos devem
restaurante que almoçou e traçar um mapa virtual com os lembrar-se de que a principal utilização do Flash, até
lugares. Por meio do recurso, é possível saber regiões onde metade da década, era para animação.
existem mais restaurantes que agradam ao usuário. O HTML, por sua vez, propõe uma série de
No sistema Symbian, que equipa vários celulares da recursos novos, como acoplar um vídeo direto no
Nokia, como o smartphone N95, há um recurso chamado HTML ou um arquivo de áudio. Porém, obviamente,
“location tagger”. Este recurso marca a localização está longe de fazer tudo que o Flash faz há
(baseada no sistema de GPS do N95) no cabeçalho da foto. anos. Mesmo porque todos os navegadores
Esses álbuns conseguem utilizar a informação para implementariam - atente-se a este ponto - de forma
renderizar as fotos com a geolocalização. diferente essas funções, sendo que existe um
Eis um exemplo de como ficaria o HTML de um excelente produto, que é o Flash, que as faz
objeto mapeado com uma localização. perfeitamente de maneira padronizada.
Em resumo, o Flash deve continuar presente no
<span style="display:none" xmlns:geo="http:// cotidiano da web, para demandas mais complexas. Já
www.w3.org/2003/01/geo/wgs84_pos#"> o HTML 5 chega, para descomplicar muitas limitações
<geo:lat>123</geo:lat> do HTML 4, permitindo ao desenvolvedor se preocupar
<geo:long>23.1</geo:long> com assuntos mais importantes da implantação do
</span> aplicativo e do website.
Geolocalização no HTML 5 \\ Observe que o navegador pergunta sobre compartilhar a localização com o domínio que está sendo acessado
64 locaweb
Projeto1:Anuncio 13/11/2009 19:00 Página 1
Locavip19:W2008 7/12/2009 15:30 Page 66
parceiros/locaweb
locavip
Conheça aqui alguns dos principais clientes vips da Locaweb
* “O Data Center
da Locaweb sempre
atendeu com a
escalabilidade necessária
para suportar nossa
demanda de serviços em
e-learning no segmento de varejo e
corporativo, mantendo com alta
disponibilidade os sistemas e bancos de
• Portal Educação
dados críticos ao negócio.”
• www.portaleducacao.com.br André Akagi, diretor de TI do Portal Educação
* “O Grêmio tem se
destacado no cenário dos
grandes clubes do Brasil
pelo incremento crescente
da sua relação com
torcedores/clientes.
Nosso site é o grande canal desse
relacionamento. Por isso, buscamos a
parceria com a Locaweb, que tem nos
permitido a disponibilidade do serviço.” • Grêmio
• www.gremio.net
Andrade Osório Prates - gerente de TI do Grêmio
66 locaweb
525558_205x275_327_DL.pdf May 5, 2009 18:26:34 1 de 1