Locaweb37 - Você Faz o Design, Nós Executamos!

Transcrição

:: ANO 6 :: R$ 9,90 :: Edição 37
:: ANO 6 :: EDIÇÃO 37
:: www.locaweb.com.br ::
Apps
para
todos
APPS PARA TODOS
A Internet em Revista
::Erros
comuns
no design
::10 temas de
WordPress
::jQuerry
::TypeScript
Entenda por que
você deve entrar no
mercado de aplicativos
e conheça os princípios
para desenvolver em
ambientes iOS, Android
e Windows Phone
Veja também:
LOCAWEB
E-mail MKT
Especialistas indicam
como criar modelos que
provoquem impacto
positivo no público
CapaLocaweb37.indd 1
Cloud Server
Seu site não pode mais viver
sem um servidor nas nuvens.
Conheça as vantagens
oferecidas por essa plataforma
Apple x
Samsung
Saiba quem ganha com a
batalha judicial travada entre
as gigantes da tecnologia
12/6/12 10:45 AM
205 X 275:Layout 1 24/09/2012 17:39 Página 1
205 X 275:Layout 1 24/09/2012 17:39 Página 2
lwao_leitor
Nesta edição...
email
emailmarketing
designerros
Portas
abertas
D
esenvolver websites de qualidade é algo fundamental
para quem deseja marcar presença, gerar mídia,
relacionar-se com o público e faturar na web,
independentemente do ramo de negócios em que atua. Hoje
em dia, porém, esse é apenas o primeiro passo para conquistar
o ambiente digital, já que o surgimento de novas tecnologias e
plataformas de trabalho tem aberto portas importantes, tanto
para desenvolvedores web como para investidores, no cada
vez mais disseminado segmento dos dispositivos móveis.
Diante desse cenário, criar e trabalhar com apps
transformou-se em uma oportunidade de negócios
interessante para programadores e designers, entre outros
profissionais web. Afinal, mais do que ser bonito e contar com
bom conteúdo, um aplicativo eficiente deve complementar o
website e rodar com qualidade em smartphones e tablets com
sistemas diferentes, como iOS, Android e Windows Phone.
O caminho é simples: para fortalecer uma marca, aumentar
a venda de produtos e atrair público, entre outros objetivos,
é preciso aparecer bem para todos e em todos os lugares.
Executar isso, entretanto, é algo que exige estudo e dedicação,
pois envolve uma série de habilidades, entre elas domínio de
HTML5 e outras linguagens, noções de responsive web design
e um profundo conhecimento do mercado.
Tudo isso você confere na reportagem de capa desta
edição, que ainda traz dicas para quem deseja criar
campanhas de e-mail marketing de impacto, evitar erros
comuns de design, aplicar temas arrasadores em blogs do
WordPress e usar a biblioteca jQuerry. Veja também como
não dá mais para viver sem servidores de cloud computing e
conheça detalhes de bastidores sobre a briga do momento no
mundo da tecnologia, travada entre Apple e Samsung.
Boa leitura!
:: ANO 6 :: R$ 9,90 :: Edição 37
:: ANO 6 :: EDIÇÃO 37
Claudio Gora
[email protected]
:: www.locaweb.com.br ::
Apps
para
todos
APPS PARA TODOS
A Internet em Revista
::Erros
comuns
no design
::10 temas de
WordPress
::jQuerry
::TypeScript
Entenda por que
você deve entrar no
mercado de aplicativos
e conheça os princípios
para desenvolver em
ambientes iOS, Android
e Windows Phone
Veja também:
LOCAWEB
E-mail MKT
Especialistas indicam
como criar modelos que
provoquem impacto
positivo no público
Cloud Server
Seu site não pode mais viver
sem um servidor nas nuvens.
Conheça as vantagens
oferecidas por essa plataforma
Apple x
Samsung
Saiba quem ganha com a
batalha judicial travada entre
as gigantes da tecnologia
CapaLocaweb37.indd 1
12/3/12 11:42 AM
Aydano Roriz
Luiz Siqueira
Tânia Roriz
Vivi Carrara
EditorialeSumario.indd 4
Locaweb em Revista Edição 37
VP Comercial e Marketing:
Claudio Gora
Coordenação de Comunicação:
Luis Carlos dos Anjos
Coordenação Editorial:
Fernanda Brianezi Valim
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 [email protected]
E-mail
marketing...
Erros
que
podem
detonar
o seu
Conheça os principais
equívocos que costumam
ser cometidos na hora
de criar o design de uma
página na web e aprenda
a solucioná-los Por Isabella Sánchez
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,
Aline Mariano, Bianca Bellucci,
Felipe Magalhães, Isabella Sánchez,
João Felipe e Max Reinhold
Publicidade São Paulo:
[email protected]
Diretor de Publicidade:
Mauricio Dias (11) 3038-5093
Executivos de Negócios:
Alessandro Donadio (coordenador),
Angela Taddeo, Adriana Gomes,
Especialistas
apontam os
melhores
caminhos para
criar peças de
qualidade e atrair
o público-alvo
Bianca Bellucci
O
e-mail marketing
é uma ferramenta
poderosa para a
empresa que o
utiliza e para o profissional que
presta o serviço. Afinal, uma boa
campanha do gênero vai além
de criação e envio da peça e gera
diversos outros serviços – e,
consequentemente, retorno para o
investidor. Entre eles, destacam-se:
a verificação do número de pessoas
::Erros no design 38
receber informações da empresa. Mais
do que isso, o prestador do serviço e
o anunciante devem tomar cuidado
com a publicidade que será feita, pois o
receptor que aceita receber campanhas
espera que peças relevantes cheguem
à sua caixa de entrada, e não um monte
de mensagens de pouco interesse.
Souza, diretor de marketing da
Giuliana Flores. “O e-mail marketing é
responsável por 13% de nossas vendas
e é o meio de interação mais importante
que nós temos. Por meio deles, falamos
de maneiras diferentes com clientes
que estão em situações diversas. Assim,
o relacionamento fica cada vez mais
estreito”, diz Juliano.
Além de respeitar algumas normas
para que a ferramenta seja bem-aceita
pelo público, é importante abordar o
usuário de forma correta. Segundo
Marco Salvi, gerente de marketing da
Virtual Target, agência especializada
na criação e envio de e-mail marketing,
a melhor forma de fazer isso é
conhecer bem o que o público quer.
“É preciso prezar pela segmentação e
personalização das campanhas, fazendo
com que o leitor fique ansioso para
receber as campanhas.”
Respeito às normas
Para o gerente de marketing do
Mercado Livre no Brasil, Daniel Aguiar,
a empresa deve respeitar ainda outras
normas para atingir corretamente o
seu receptor. “É preciso fazer uso de
boas práticas de envio, usar listas
confiáveis e com opt-in (autorização
de cadastramento em mailing), deixar
acessível ao cliente o link para optout (descadastramento do mailing),
respeitar as preferências de frequência
do cliente e mandar sempre mensagens
relevantes.” Assim, é possível colher
grandes frutos, como atesta Juliano
Peças
Depois de
conhecer bem o públicoalvo, é hora de criar a
peça. Conteúdo, imagens,
fontes, adequação a redes
sociais... Tudo isso deve ser levado em
consideração. O problema, porém, é
que não existe uma fórmula pronta que
garanta o sucesso da campanha, já que
a estratégia deve levar em consideração
o perfil de cada empresa.
Por isso, uma boa dica é ficar
de olho em e-mails marketing de
sucesso, adotar os elementos que
mais combinem com os objetivos
do anunciante e, a partir daí, criar
uma campanha de impacto. Vire a
página e confira quatro peças que
tiveram bom desempenho no
mercado, e extraia delas o que há de
melhor para os seus jobs.
...de impacto
42locaweb
38locaweb
Design37.indd 38
que abriram a mensagem, a
contagem dos cliques recebidos, a
análise de encaminhamento para
terceiros e até a visualização do
local onde a peça foi aberta.
Nenhum outro meio de comunicação,
como jornal, TV, rádio ou mala-direta,
oferece tantas vantagens. “O fato é
que, com todas essas informações
em mãos, o anunciante que opta
pela continuidade da ação via e-mail
marketing com disparos frequentes
tem a oportunidade de aprimorar cada
vez mais a campanha e conseguir
melhorar sistematicamente os
resultados. É por isso que, quando bem
usada, a ferramenta é incomparável”,
diz Ivan Bastos, diretor da agência
digital WebJump.
Vale salientar, porém, que, para
funcionar corretamente, o e-mail
marketing não pode ser enviado para
qualquer pessoa, e sim encaminhado
apenas para aquelas que aceitaram
email
emailmarketing
Apps
para
todos
Desenvolva para
dispositivos com iOS,
Android e Windows
Phone e faça parte
de um dos mercados
que mais crescem
no mundo
12/3/12 11:52 AM
EmailMKT.indd 43
12/3/12
capa
capaapp
N
a App Store, loja de
aplicativos para os
produtos da Apple, estão
disponíveis mais de 700 mil apps
para download. Na Google Play,
repositório de softwares para
Android, há mais 700 mil apps. A
Microsoft pretende incluir em sua
Windows Phone Store, até o final
de 2012, 100 mil apps. Os dados
são das próprias companhias e se
referem a outubro de 2012. Isso
significa que, enquanto você lê
esta reportagem, esses números
já devem ter aumentado, já que o
mercado de apps está em ebulição.
É por conta dessas evidências
que o segmento de aplicativos para
Àdele Helena Ribeiro,
Max R. Jahnke e Sérgio Vinícius
locaweb4
locaweb39
::E-mail marketing 42
EmailMKT.indd 42
12/3/12 12:03 PM
dispositivos móveis – smartphones e
tablets, entre outros – está rendendo
muito, muito dinheiro. Com mais de
30 bilhões de apps baixados, a App
Store movimentou US$ 5 bilhões até a
metade de 2012.
Para pegar um exemplo isolado,
talvez o mais representativo desse
mercado, o Instagram – app de
fotografias – foi recentemente
adquirido pela rede social Facebook
por US$ 1 bilhão. Após a transação, o
uso do aplicativo cresceu 1.179%.
Isso tudo prova que o segmento de
apps está mais aquecido do que nunca,
especialmente no Brasil. De acordo
com o Google, o mercado brasileiro é
o que mais cresce no mundo quando
o assunto é aplicativos. Sem entrar em
números absolutos, a companhia que
detém o buscador mais famoso da web
informa que a receita com venda de
apps no País cresceu 88% de 2011 até
meados de 2012.
Diante desse cenário, não há
dúvidas de que os smartphones
e tablets vieram para ficar.
Extremamente populares, esses
dispositivos compactos geram – e
entregam, como meio e fim em
uma única plataforma – grande
necessidade de acesso a informações
em tempo real.
Investidores precisam de
informações sobre a bolsa de valores.
Desenvolvedores querem saber como
30locaweb
MateriaCapa37.indd 30
:: A força dos apps 30
locaweb31
12/3/12 1:05 PM
12/3/12 1:06 PM
::Entrevista: Rodrigo Rodrigues ............. 6
::Caixa de entrada ................................... 8
::Notícias Locaweb ................................ 10
::Case e WebStore.................................. 16
::Espaço ABRADI ................................... 22
::Opinião: Fabio Akita............................ 24
::Opinião: Marcelo Negrini .................... 26
::Opinião: Marcello Barbusci................. 28
::Cloud Server ........................................ 46
::Dez temas de WordPress .................... 50
::Apple x Samsung................................. 54
::jQuerry para designers ....................... 58
::TypeScript ............................................ 62
::Parceiros em destaque........................ 66
Elisangela Xavier, Ligia Caetano,
Renato Peron e Rodrigo Sacomani
Criação Publicitária: Paulo Toledo
Tráfego: Renan Pereira
(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:
Prol Editora Gráfica
Somos Filiados à ANER
Associação Nacional dos
Editores de Revistas
12/3/12 1:08 PM
205 X 275:Layout 1 05/12/2012 10:59 Página 1
Arquivo pessoal
lwentrevista
I
Rodrigo Rodrigues,
diretor de TI da
Dafiti, revela os
segredos do site que,
atualmente, recebe
cerca de 1 milhão de
visitantes por dia
Internet
na moda
nvestir na internet é
algo tão vantajoso que
as últimas fronteiras em
relação ao e-commerce estão
ruindo. De acordo com o
IPEA (Instituto de Pesquisa
Econômica Aplicada), só no
ano passado R$ 18,7 bilhões
foram movimentados
por meio da compra
de produtos na rede.
Eletrodomésticos, livros
e DVDs ocupam grande
parte dessa fatia, já que
roupas, calçados e outros
produtos que precisam
ser experimentados
costumavam ter pouca
procura no universo online.
Costumavam...
Na contramão desse
conceito, a Dafiti (www.
dafiti.com.br), um dos
primeiros portais no Brasil
a apostar na venda de
roupas e calçados via
internet, entrou no ar em
2010, inovou e se deu bem.
Com ferramentas criativas
e a possibilidade de troca
de mercadorias, o site
conquistou consumidores
que não têm tempo ou
paciência de ir a lojas
experimentar diversas
peças. Hoje, a loja virtual
faz tanto sucesso que
recebe cerca de 1 milhão
de visitantes diariamente,
como revela o diretor de
TI da empresa, Rodrigo
Rodrigues. Acompanhe:
Rodrigo Rodrigues, diretor de TI da Dafiti, um dos primeiros
portais de venda de roupas e calçados do Brasil, conta quais
ferramentas a empresa adota para o desenvolvimento do site
e como é possível atrair e manter clientes online Aline Mariano
6locaweb
Entrevista.indd 6
12/3/12 11:53 AM
lwentrevista
Locaweb em Revista Como surgiu a ideia
de criar um site de moda e calçados no
mercado brasileiro?
Rodrigo Rodrigues Percebemos que o mercado
de roupas no Brasil estava em grande expansão,
e achamos que seria uma boa aposta investir no
universo online. Sapatos ou produtos esportivos, por
exemplo, já eram comercializados por diversos sites,
mas camisetas, calças ou mesmo roupas íntimas
ainda não eram facilmente encontrados. Então
passamos a oferecer isso.
LW Inicialmente, o que foi feito para que a Dafiti
se tornasse um site conhecido?
RR Apostamos em muita publicidade. O maior
foco foi o marketing digital, como e-mail marketing,
divulgação em portais de notícia e em blogs do
mercado de moda. Também adotamos alguns
outros métodos, como comerciais em rede aberta
na televisão e revistas trimestrais impressas,
que também têm versão online para baixar no
site da Dafiti.
LW Quantos visitantes o site costuma receber
por dia atualmente?
RR Com dois anos no ar, já que o site foi inaugurado
em novembro de 2010, conquistamos cerca de 1 milhão
de pessoas que acessam o site diariamente.
LW Ao longo desses anos, o que foi realizado para
que as pessoas passassem a confiar no site?
RR Acredito que o investimento em publicidade
é fundamental para despertar a confiança nos
consumidores. Além disso, qualidade e praticidade
no atendimento e vender marcas conhecidas,
especialmente do público jovem, são fatores
importantes. Com isso, os consumidores
se sentem mais ambientados e confiam mais na
hora de fazer as compras.
“O investimento em publicidade
é fundamental para despertar
a confiança nos consumidores.
Além disso, ser prático no
atendimento é algo essencial”
RR Acredito que o atendimento ao cliente. Damos
a opção de contato por telefone ou internet. Além
disso, adotamos uma boa política de troca de
mercadorias, que pode ser feita dessas duas formas
também. Assim, mesmo que o consumidor tenha
problemas com seu produto, como defeito ou
numeração errada, e não consiga ou não queira entrar
em contato no horário comercial, ele pode resolver
tudo pela internet, na hora que desejar. Na verdade,
fomos o primeiro site do Brasil a aceitar devolução de
mercadorias, quebrando um paradigma.
LW Internamente, como vocês trabalham para
que o atendimento ao cliente mantenha um bom
padrão de qualidade?
RR Temos enormes investimentos em logística,
já que para ter boa qualidade, é preciso capacitar
os profissionais. Com cursos de aperfeiçoamento,
conseguimos proporcionar aos nossos clientes
um ótimo padrão de atendimento, já que esse é o
fator principal de nosso trabalho. Afinal, ao ficarem
satisfeitos, os consumidores sempre voltarão ao nosso
site para comprar.
LW Há planos para que o site se desenvolva e
cresça ainda mais?
RR Atualmente, estamos investindo em um novo
armazém, que é seis vezes maior do que o antigo.
Isso nos permitirá trabalhar com mais produtos e nos
auxiliará em todo o processo logístico.
LW No campo do marketing, como costumam
resolver problemas de spam?
RR Não é fácil, mas tentamos sempre verificar
se não estão sendo enviados em campanhas, por
exemplo. Para isso, fazemos monitoramentos no
IP do servidor. Procuro estar sempre atuante para
resolver tais problemas.
LW Qual é o principal diferencial da Dafiti em
relação a outros sites do gênero?
O site foi o primeiro do Brasil no ramo da moda a aceitar devolução
de mercadorias. Com isso, conquistou a confiança dos internautas
locaweb7
Entrevista.indd 7
12/3/12 11:53 AM
lwcaixa_de_entrada
//O canal direto entre você e a equipe de redação da Locaweb em Revista
ENVIE SEU
E-MAIL
Formatação
Gostaria de saber
se formatar meu HD
várias vezes pode
estragá-lo.
Rodrigo Cruz //
Por e-mail
Não, formatar seu HD
diversas vezes não irá
danificá-lo. A formatação
apenas apaga os dados que
estão guardados no disco
rígido que, em seguida,
continuará a funcionar
normalmente. É importante
ressaltar também que o
número de formatações
não diminui a vida útil de
seu HD. O equipamento só
será danificado caso ocorra
um impacto violento entre
as agulhas de escrita e
leitura e a superfície dos
pratos. Quando formatado,
entretanto, o HD não
Não há risco físico em
formatar o HD, já que o
processo apenas apaga
os dados salvos no disco
encosta as agulhas nos
pratos, fazendo com que
esses dois componentes
não interfiram na vida
do disco rígido. Dentro
desse cenário, é possível
comparar o ato de formatar
um HD ao procedimento
de acessar um arquivo
no computador. Assim, o
usuário pode fazer essa
operação diversas vezes
sem que o seu conteúdo
seja alterado.
As baterias de íon de lítio usadas
atualmente nos notebooks não
precisam estar descarregadas para
serem conectadas à tomada
Carregamento
de bateria
Muitas pessoas dizem
que eu devo esperar o
notebook descarregar
por completo para
depois conectá-lo à
tomada. Falaram-me
que, se eu não fizer isto,
a bateria do notebook
pode ficar danificada
ou, no mínimo, ter seu
tempo de vida útil
bastante reduzido. Isso é
Se você tem
alguma dúvida,
sugestão ou
crítica, entre em
contato com nossa
redação pelo
e-mail locaweb@
europanet.com.br.
verdade ou é apenas um
mito da informática?
Maria de Paiva //
Por e-mail
Hoje, trata-se de um mito.
Ocorre que, antigamente,
quando as baterias eram de
níquel cádmio, valia a pena
esperar o descarregamento
para prolongar a vida útil
do material e impedir
que ele fosse danificado.
Atualmente, porém, as
baterias são feitas de íon de
lítio e não precisam estar
descarregadas para serem
conectadas à tomada.
O usuário pode ligar o
equipamento na tomada
antes de acabar a carga ou
retirar antes que a bateria
esteja completa, sem que
isso danifique a bateria.
Lembre-se de que, quando
o notebook está ligado na
tomada, não é a bateria
que fornece energia para
ele, e sim a própria tomada.
Dessa forma, caso você
retire a bateria do notebook,
o aparelho conseguirá
funcionar normalmente.
Portanto, as histórias
que envolvem recargas
de baterias são mitos e
não devem ser levadas a
sério atualmente.
8locaweb
Email.indd 8
12/3/12 12:07 PM
205 X 275:Layout 1 27/11/2012 10:41 Página 1
lwnotícias
//As novidades da Locaweb, a maior empresa de serviços de internet do Brasil
Cloud Server Pro
e parceiros internacionais
Monitis e
Boundary trazem
mais ferramentas
para monitoração
de Cloud
O
Cloud Server Pro da
Locaweb, que já oferecia
New Relic para
monitoração da aplicação em
tempo real e monitoração pró-ativa
do servidor, além de ferramentas
para monitorar site e rede,
conquista dois grandes parceiros
internacionais: Monitis e
Boundary. Com a novidade, o Cloud
Server Pro passa a oferecer uma
das mais completas soluções de
monitoração do mercado nacional
para o cliente gerenciar sua
solução de Cloud.
Monitis
monitoração do site
Permite acompanhar de perto a
disponibilidade e o tempo de resposta
de sites, simular transações online,
melhorar a experiência do ususário e
monitorar os processos, como carrinho
de compras, formulários, busca,
web services, entre outros. Licença
Monitis Plus Grátis.
APIs: Você sabe
como funcionam?
Para obter mais informações, acesse
www.locaweb.com.br/CloudServerPro
O Cloud Server Pro da Locaweb traz APIs para
otimizar as principais atividades. As APIs
são padrões estabelecidos para criar, deletar,
desligar, ligar e reiniciar a máquina. Veja como
funciona em lwgo.to/apicloudpro.
Boundary
monitoração de rede
Faz monitoração do tráfego, de
dependências e de latência da rede entre
os componentes de aplicação ou de
serviços externos e do tempo de resposta
das APIs de compartilhameto com as redes
sociais. Licença Boundary 2 GB grátis.
10locaweb
Noticias.indd 10
12/3/12 11:54 AM
lwnotícias
Conheça as vantagens de usar
a Revenda Plesk Linux e os
planos disponíveis em www.
locaweb.com.br/RevendaPlesk.
Cartilha de
Segurança para se
proteger na web
O Centro de Estudos, Respostas
e Tratamento de Incidentes de
Segurança no Brasil (CERT.br),
elaborou a Cartilha de Segurança
para Internet, com recomendações
e dicas para aumentar a segurança
de computadores. Acesse www.
cartilha.cert.br para conhecer e se
prevenir contra golpes, ataques e
outros riscos na internet.
InterCon 2012:
palestras
disponíveis online
Locaweb oferece
nova Revenda
Plesk Linux
A
Locaweb anunciou a nova
Revenda Plesk Linux.
O serviço, que já fez parte
do portfólio da empresa, foi
relançado com benefícios para
desenvolvedores, clientes de
revenda de hospedagem e
profissionais da internet.
A Revenda Plesk possui
funcionalidades que permitem ao
revendedor oferecer um serviço
ainda mais profissional, já que os
seus clientes terão acesso a um
painel de controle, webmail e URL
de destino personalizados com o
nome e a logomarca da sua empresa.
Além disso, o revendedor poderá se
preocupar apenas com as aplicações
de seus clientes, aproveitando
a expertise da Locaweb para
gerenciar todas as outras rotinas
como manutenção da infraestrutura,
atualizações de segurança e sistema
operacional, backup etc.
O novo serviço conta com espaço
para armazenamento de sites, bancos
de dados e e-mail totalmente isolados
e independentes, chegando até 1.950
GB – o maior disponível no mercado, o
que resulta em mais flexibilidade para
crescer. E mais: oferece sites, domínios
e transferência ilimitados, o que propicia
ao revendedor gerenciar os seus
recursos e criar planos de acordo com a
necessidade dos seus clientes.
À medida que os negócios
evoluírem, o revendedor poderá migrar
entre os planos. “A Revenda Plesk
Linux foi lançada atendendo a pedidos
de clientes e à demanda do mercado.
Com esse novo serviço, a Locaweb
passa a ter uma oferta ainda mais
completa para o profissional de web
que deseja empreender, montar a sua
O InterCon, maior congresso técnico
para profissionais web da América
Latina, que aconteceu em 26 de
outubro, em São Paulo, ofereceu por
meio da Eventials a transmissão de
toda a programação da Arena Criação
& Apps. Durante o evento, 346 pessoas
acompanharam as palestras ao vivo e,
depois, os vídeos foram visualizados
mais de 2.500 vezes. Para assistir, acesse
www.eventials.com/intercon2012.
própria empresa de hospedagem de
sites ou oferecer este serviço como
parte de seu portfólio”, ressalta Camila
Kamimura, gerente de Marketing de
Produtos IaaS e PaaS da Locaweb.
Para outras informações,
acesse www.locaweb.com.br/
RevendaPlesk ou ligue para
(11) 3544-0500 (SP e região) ou
0800-555-932 (demais localidades).
Características da
Revenda Plesk Linux:
• Espaço Total (armazenamento +
banco de dados + caixas postais):
de 310 GB a 1950 GB
• Preços: de R$ 49,90 a R$ 149,90
• Recursos ilimitados: Domínios e
subdomínios; sites e transferências.
locaweb11
Noticias.indd 11
12/3/12 11:54 AM
lwwishlist
O melhor da
vitrine digital
O que há
de mais
interessante nas
prateleiras ao
redor do mundo
CÂMERA LIGADA A
REDES SOCIAIS
Equipada com sistema operacional
Android 4.1, a Galaxy Camera, da
Samsung, oferece a possibilidade
de comprar aplicativos e interagir
diretamente com redes sociais. Com uma
lente objetiva de 23 mm e zoom óptico de
21x, o equipamento faz imagens com até
16 MP, o dobro dos melhores smartphones
do mercado. Há três versões, uma com
wi-fi e suporte a 3G, outra com 4G LTE
e wi-fi, e uma apenas com wi-fi. Preço
sugerido a partir de US$ 350 nos EUA.
Mais informações: www.samsung.com
SMARTPHONE
DE PULSO
O i’m Watch é um relógio que se conecta
por Bluetooth ao seu smartphone e o
possibilita atender chamadas, checar
mensagens e e-mails, ler notificações,
ouvir músicas, consultar a agenda, checar
a previsão do tempo, analisar fotografias
e acessar uma série de apps. Tem alguma
utilidade para quem executa exercícios
físicos e acha mais cômodo olhar para
o pulso na hora de fazer essas funções
do que ter de tirar o equipamento do
bolso. Equipado com o i’m Droid, versão
do Android feita especialmente para o
aparelho, o relógio tem diversas opções de
personalização. O preço é de R$ 799.
Mais informações:
www.imwatch.it/br-pt
12locaweb
WishList.indd 12
12/3/12 11:58 AM
lwwishlist
NOVO GALAXY NOTE
A versão mais recente do Galaxy Note
é indicada para quem precisa de um
smartphone maior – ou um tablet menor.
O aparelho adota a função multi-window,
desenvolvida com a intenção de facilitar a
interação com o usuário. O Galaxy tem tela
de 5,5 polegadas, câmera traseira de 8 MP
e grava filmes em HD (1.080p). Além disso,
inclui processador Exynos de 1.6 GHz em
quatro núcleos, 2 GB de memória RAM e
três opções de armazenamento interno,
de 16 GB, 32 GB ou 64 GB. Disponível nas
cores branco e preto, pode ser encontrado
nos EUA pelo valor de US$ 300.
Mais informações:
www.samsung.com.br
SOM DE ARREPIAR
O novo fone Beats Solo HD permite que
você escute cada pequeno ruído de
sua música preferida. De amantes de
músicas a profissionais, o equipamento é
uma boa opção para quem não vive sem
ouvir seus sons preferidos. É fabricado
com um metal flexível quase impossível
de se quebrar. Com 16 g, o aparelho é
encontrado nas cores preto, rosa, roxo,
azul-escuro, azul-claro, verde-limão,
branco e vermelho. O preço sugerido do
headphone nos EUA é de US$ 199,95.
Mais informações:
www.beatsbydre.com
PEN-DRIVES DE
ÍCONES POPS
Para os apaixonados por filmes
e desenhos em quadrinhos, há
mais uma inovação no mundo da
tecnologia: pen-drives no formato
de ícones como mestre Ioda (da
saga Guerra nas Estrelas), Batman,
Superman, Mulher Gato e Coringa.
Com opções de armazenamento de
4 GB a 8 GB, os produtos podem ser
encontrados na loja Imaginarium
com preços entre R$ 110 e R$ 140,
de acordo com o modelo escolhido.
Mais informações:
imaginarium.com.br
locaweb13
WishList.indd 13
12/3/12 11:58 AM
lwwishlist
NOVO IPHONE
A quinta geração do smartphone da Apple já foi apresentada ao
mundo. Com um display meia polegada maior do que na versão
4S, o aparelho vem com medidas e peso reduzidos – espessura
18% menor e 28 g mais leve. A nova versão também é equipada
com um chip A6, com processador dual core e velocidade
de aproximadamente 1,2 GHz. Memória de 1 GB de RAM e
armazenamento interno de 16 GB, 32 GB ou 64 GB. O preço
sugerido do aparelho nos EUA é de US$ 199 para a versão de
16 GB, US$ 299 para a de 32 GB e US$ 399 para a de 64 GB.
Mais informações: www.apple.com.br
TABLET DO GOOGLE
Em parceria com a Asus, o tablet Nexus 7, do
Google, vem com o sistema Jelly Bean (4.1) e
embarca uma série de softwares populares da
empresa, como Gtalk, YouTube, Gmail, Chrome e
Google+. Feito especialmente para a compra de
apps e games, o aparelho é vendido em modelos
com até 32 GB de capacidade para armazenar
eBooks, sons e filmes. Quanto aos jogos, o Nexus
7 traz em seu interior um chip de processamento
NVIDIA Tegra 3 T30L. Este componente combina
quatro núcleos Cortex A9 que trabalham na
frequência de 1,3 GHz com um chip gráfico
GeForce ULP. Ainda sem previsão de chegada ao
Brasil, tem preço sugerido nos EUA de US$ 249.
Mais informações: www.google.com/nexus
SMARTPHONE INTEL
Da família Razr, da Motorola, o Razr i é o
primeiro smartphone que chega ao Brasil
com processador Intel, o que proporciona
a ele uma velocidade de até 2 GHz.
Sem botões físicos na parte frontal, o
equipamento conta com uma grande
tela de 4.3 polegadas, resistente a riscos.
Tem sistema operacional Android 4.0,
câmera de 8 MP e grava em HD. O
produto pode ser encontrado no site
da Motorola por R$ 1.299.
Mais informações:
www.motorola.com.br
14locaweb
WishList.indd 14
12/3/12 11:58 AM
LCW-0037_An_PLESK_F.pdf
1
12/5/12
4:21 PM
Locaweb.com.br/RevendaPlesk
s
s
u
o
se s cr
o u
a
t
a
r
l
e
r
o j s is a
g
A ro eu ma o p .
p s m C er
e ê pa ´c
t s es
e r
c
C
M
Y
CM
MY
CY
CMY
K
Nova Revenda Plesk 11 Linux.
Planos com até 1.950 GB, com espaços isolados
e independentes para armazenamento,
banco de dados e e-mail. Revenda nossa hospedagem
personalizada com sua marca e ofereça a alta
performance da Locaweb para seus clientes.
Planos a partir de R$ 49,90/mês.
lwcase
//Ações criadas pelos clientes da Locaweb para melhorar o dia a dia online
Produção
digital
Responsável por diversas produções em ambiente
digital, Iceland 2nd Nation aperfeiçoou seus serviços
a partir de soluções oferecidas pela Locaweb Aline Mariano
A
Iceland 2nd Nation
(www.iceland2.com)
é uma produtora que
desenvolve aplicativos, games
online, websites e qualquer outro
tipo de trabalho de comunicação
voltado para o ambiente digital.
Em 2012, a empresa firmou
uma parceria de sucesso com a
Locaweb e já vem colhendo bons
frutos. Entre outras soluções
contratadas, João Ghinato, CEO
da Iceland 2nd Nation, destaca
a resolução rápida de problemas
de gerenciamento e o suporte
eficaz oferecido pela Locaweb,
itens que, após solucionados,
aumentaram o número de acesso
às produções da companhia.
“No início deste ano, quando
assumi a direção da Iceland 2nd
Nation, o cenário de hosting era
bastante caótico e sem padronização
para nós e para os clientes. Tínhamos
pouca garantia de uptime e uma
enorme dificuldade para gerenciar
os custos dos clientes. Por isso,
resolvemos criar uma estrutura
comercial e técnica que nos atendesse
com qualidade, e assim chegamos à
Locaweb”, conta Ghinato.
Segundo o CEO da Iceland
2nd Nation, com a contratação
dos serviços da Locaweb, a
empresa apresentou grande melhora
de desempenho em relação aos
problemas anteriormente enfrentados
e também para novos projetos. “Em
termos de hospedagem, por exemplo,
tudo se estabilizou completamente”,
afirma Ghinato.
Solução de cloud
computing
Empresa: Iceland 2nd Nation
Área: Produção digital
Para reduzir custos e gerar
melhorias nos sites dos clientes, como
no caso dos problemas de host que
costumavam enfrentar, a Iceland 2nd
Nation optou por contratar o Cloud
16locaweb
Case.indd 16
12/3/12 11:45 AM
lwcaseIceland2ndNation
Empresa do grupo IPG
(abaixo) desenvolveu o
vídeo de lançamento do
smartphone Galaxy S3
(à esq.) e websites como o
da Cheetos (pág. ao lado)
Server Pro da Locaweb, ferramenta
usada de forma extensiva para
fins institucionais, comerciais e
operacionais. Hoje, todos os sites da
produtora adotam a solução.
“Dessa forma, gerenciamos as
contas de cada cliente e o projeto
sem ter dor de cabeça. Além disso, o
painel de controle da Locaweb e as
facilidades que o formato de cloud
oferece facilitam muito a nossa gestão
técnica. Tudo é padronizado, simples e
fácil de usar. Isso sem contar que temos
um atendimento especial da equipe
técnica, composta de um SLA que está
sempre disponível”, afirma Ghinato.
De acordo com o CEO da Iceland
2nd Nation, o Cloud Server Pro
também é usado comercialmente
em serviços prestados aos clientes.
“Usamos a solução configurada para
suportar desde campanhas simples até
as mais complexas, tanto em termos
de tecnologia como em volume de
acesso”, explica o profissional.
História
Hoje, a Iceland 2nd Nation é a
face produtiva da agência CuboCC e
leva em seu portfólio muitos clientes
de renome. A empresa surgiu em
2005, um ano após a fundação do
GRUPO IPG
A Iceland 2nd Nation é uma das
empresas da holding Flag, da qual a
agência CuboCC é a “empresa-mãe”.
Juntas, as companhias formam o grupo
IPG de publicidade (www.interpublic.
com), um conglomerado norte-
grupo CuboCC, que viu na produtora
a possibilidade de repaginar suas
funções e atuar com uma parceira
que pudesse se ater apenas à
produção digital, oferecendo
diferenciais aos clientes.
De acordo com Ghinato, a
confiança depositada na Iceland
2nd Nation se deve aos diversos
serviços prestados para grandes
marcas que obtiveram repercussão.
Entre elas, destaca-se o vídeo de
lançamento do Galaxy S3 (apps.
facebook.com/galaxysiiibrasil),
smartphone da Samsung.
“Além disso, desenvolvemos
games, abas e aplicativos de
Facebook, websites interativos e
com propostas diferenciadas, como o
da Cheetos (www.cheetos.com.br) e
até a nossa própria intranet. Muitos
desses projetos recebem volumes
de acesso realmente grandes por
americano especializado em soluções de
marketing, que tem escritórios em mais
de cem países e conta com cerca de
45 mil funcionários. Em 2012, a IPG
adquiriu a CuboCC e, por consequência,
a Iceland 2nd Nation.
“O painel de
controle da
Locaweb e as
facilidades que o
formato de cloud
oferece facilitam
muito a nossa
gestão técnica.
Tudo é simples e
fácil de usar”
::João Ghinato
CEO da Iceland 2nd Nation
causa das campanhas de mídia que
realizamos em importantes canais
web. E aí, mais do que nunca,
a parceria com a Locaweb nos
favorece”, finaliza Ghinato.
locaweb17
Case.indd 17
12/3/12 11:46 AM
lwcasewebstore
Sua
loja AQUI!
Se você também tem uma WebStore
Locaweb e deseja aparecer nesta seção,
entre em contato conosco por meio
do e-mail [email protected].
Aguardamos seu contato!
www.toyshopbrasil.com.br
Estátua
de 1,60 m
do Hulk
O SITE
A WebStore Toyshop trabalha com
pré-venda, lançamentos e raridades. Por
contar com a estrutura da loja física, foi
possível ampliar o catálogo online de
colecionáveis, que contém peças com
temas como: The Muppets, Toy Story,
Mickey Mouse, Piratas do Caribe, O
Estranho Mundo de Jack, South Park,
Super Mario Bros, Os Simpsons, Lost,
Dexter, Thundercats, Star Wars, Spawn,
Resident Evil e Street Fighter, só para
citar alguns, além de super-heróis da
Marvel, do DC Direct e ícones musicais
de todos os tempos.
18locaweb
Webstore.indd 18
12/3/12 11:57 AM
lwcasewebstore
Toyshop
Com a ferramenta WebStore da Locaweb, empresa
amplia negócio e se torna referência no mercado
brasileiro de peças colecionáveis
L
údico, raro, pop, viciante
e com custo de até
R$ 20 mil. Para uns, parece
brincadeira, mas para outros “faz
parte da coleção” e vale tudo para
completá-la. Há 10 anos, Eduardo
Vinha Diaz tomou a iniciativa
de importar miniaturas de
personagens de quadrinhos, filmes,
desenhos, séries de TV e música.
Mais tarde, em 2008, ele abriu a
Toyshop, na Rua Domingos de
Morais, 348, loja 05. Localizada no
bairro Vila Mariana, em São Paulo,
a empresa ficava restrita ao público
da região até que, em 2009, Diaz
sentiu a necessidade de fortalecer
a marca. Para isso, ele repensou
a estratégia do empreendimento,
passando a atender todo o
território nacional pelo site
www.toyshopbrasil.com.br.
O fato de já ter um negócio
bem estruturado “habilitou” a
Toyshop a dar um passo além.
Diaz também precisava de uma
ferramenta fácil de usar e a custo
acessível, porque a loja física já
tomava muito tempo e ele tinha
apenas experiência de usuário na
internet. “Montar uma WebStore
com a Locaweb ficou muito mais
econômico e prático, pois basta
customizar o layout e cadastrar
os produtos. É simples fazer
as alterações, já que tudo está
basicamente pronto”, conta.
A loja online expandiu a linha de
produtos da empresa. Hoje, além das
figuras de ação, o leque de fabricantes
abrange bustos, réplicas e animês,
que variam de R$ 70 a R$ 20 mil.
As peças mais vendidas são da saga
Os Cavaleiros do Zodíaco. A mais
difícil de encontrar, por sua vez, foi
uma estátua de 1,60 m de altura do
Hulk, pois em todo o mundo só foram
produzidas 30 unidades.
E como este mercado lida com o
imaginário das pessoas, é comum
encontrar pedidos inusitados. O que
nem Diaz poderia prever era que a
Toyshop receberia um pedido de
uma aldeia indígena. E foi para lá
que enviaram um boneco de Kratos,
personagem do jogo God of War,
que reconstrói o cenário de guerras
mitológicas. Essa é a prova de que
o alcance de mercado da Toyshop
A loja online
da Toyshop
já responde,
sozinha, por 30%
do faturamento
da empresa. Isso
só foi possível
com a WebStore
da Locaweb, que
conferiu mais
credibilidade
à empresa
ganhou dimensões surpreendentes,
tornando-se uma referência nacional
neste ramo.
Com tantas histórias de sucesso,
gradualmente a loja online aumentou
o faturamento da empresa e, sozinha,
já responde por 30% desse total. Esse
resultado só foi possível porque a
WebStore trouxe mais credibilidade
à empresa e os clientes passaram a
consultar os produtos de qualquer
lugar por meio da conexão web. Hoje,
os compradores se sentem muito mais
seguros ao fechar um pedido. “Isso
abriu muitas portas para a Toyshop e
fez com que ficássemos conhecidos
nacionalmente. O investimento teve
um retorno rápido e muito acima do
esperado”, garante Diaz.
locaweb19
Webstore.indd 19
12/3/12 11:57 AM
lwvitrinewebstore
+WebStore
Está procurando um lugar
fácil, prático e rápido para
comprar? Confira aqui
11 lojas virtuais, parceiras da
Locaweb, e faça suas compras
com todo o conforto que
você sempre desejou.
CONSUMO VIP STORE
www.consumovip.com.br
QLAPARY
BRINDES E PROMOÇÕES
NUVOLLETA
TRÈS CHIC DÉCOR
qlapary.webstorelw.com.br
helizabeth.webstorelw.com.br
www.frbrindesepromocoes.com.br
treschicdecor.webstorelw.com.br
20locaweb
VitrineWebstore.indd 20
12/3/12 12:01 PM
lwvitrinewebstore
LOJATUAL ACESSÓRIOS
RAKOS
DONNA GUERRIERA
DEISE IMPORTADOS
BEMFIXA
PENÉLOPE ACESSÓRIOS
www.lojatual.com.br
www.donnaguerriera.com
www.lojabemfixa.com.br
rakos.webstorelw.com.br
www.deiseimportados.com.br
www.penelopeacessorios.com.br
locaweb21
VitrineWebstore.indd 21
12/3/12 12:01 PM
lwopinião
espaçoabradi
A moda dos apps
T
Jonatas Abbott
Sócio-diretor executivo
da Dinamize e presidente
da ABRADi
E-mail:
[email protected]
Discute-se
primeiro a
presença da
empresa nas
redes sociais e
qual app será
usado. A moda
está na moda.
O hype, o da
hora. O site
foi colocado
de lado
he web is dead, publicou Chris
Anderson na capa da revista
norte-americana Wired, em
2010, iniciando uma discussão meio
sem sentido sobre o futuro dos sites. A
reportagem defendia que os apps seriam
o futuro e o site estaria condenado a
morte. Curiosamente, dois anos depois
o artigo segue publicado no vivíssimo
site da Wired (http://www.wired.com/
magazine/2010/08/ff_webrip/).
O argumento de Anderson não estava errado,
ainda mais em países como o Brasil, no qual a
classe C pulou o telefone fixo e, especialmente,
o desktop, direto para o celular e o smartphone.
Anderson defendia que, graças ao melhor
desempenho do aplicativo e ao esquema de
usabilidade sob medida X mobilidade, os sites
estavam fadados ao ostracismo.
Recentemente outros especialistas
defenderam que os aplicativos estão fadados
ao fracasso, graças ao barateamento e difusão
da banda larga X HTML5 e de sites mobile. Isso
tudo sem falar nos tablets, nos quais, muitas
vezes, é melhor abrir o site do que o app.
O fato é que nada neste mundo é 8 ou 80.
As coisas costumam ser tamanho 44 mesmo. A
complexidade desse sistema chamado internet
aumenta a cada dia. E, a exemplo do e-mail,
assassinado tantas vezes, nada tende a morrer,
mas sim encontrar seu lugar definitivo ao sol.
Apps têm aplicações específicas. Muitos
são melhores que o próprio site web. Isso
ocorre até mesmo no desktop (ou notebook),
em que os apps também se multiplicam e
encantam. O site, no entanto, continuará sendo
o alvo, o vertedouro para onde convergem
todas as ações de comunicação da empresa. A
sua presença web continuará a ser seu maior
desafio e seu maior benefício – com ou sem o
apoio dos apps correlatos.
Bancos, por exemplo, são ótimos para usar
via app (mas não para tudo), Twitter nem se
fala. Facebook é melhor no full site, assim como
o G1 e outros sites de notícias.
O grande problema que enxergo é que
as empresas seguem colocando a carroça na
frente dos bois. Discute-se primeiro a presença
da empresa nas redes sociais e qual app será
usado. A moda está na moda. O hype, o da
hora. O site foi colocado de lado.
Hype para as empresas é resultado – algo
que nunca sai de moda. O HTML5 veio para
contribuir com o dilema. Eu começaria dando
enorme atenção ao site da empresa. Com isso
resolvido, tudo fica mais fácil. É preciso dar
menos enfoque ao futuro ou ao passado. O que
importa para o resultado é o agora.
22locaweb
ColunaABRADI_Jonatas.indd 22
12/3/12 12:41 PM
lwopinião
mercado
Fabio Akita
Cofundador da
Codeminer 42
E-mail: akitaonrails@
codeminer42.com
É preciso
compreender
cada elemento
da estrutura
de um CSS,
incluindo
os “media
queries”, que
permitem
ajustar o
aspecto visual
para cada tipo
de tamanho
de tela
A evolução
dos front-end
P
or muito tempo, o reduto das
novas tecnologias foi para o lado
do “back-end”, que é a face do
servidor. Nos últimos anos, porém, o
mundo do “front-end” passou a dominar
as páginas das notícias mais quentes.
Antes disso, recortar um design em
Photoshop, HTML e CSS era apenas
uma questão mecânica de abri-lo em um
Dreamweaver ou Fireworks e montar os
elementos de “qualquer maneira”. Hoje,
considera-se isso uma péssima prática.
Dentro desse cenário, é importante aos
profissionais de “front-end” compreenderem
que é fundamental dominar estruturas mais
sofisticadas de dados. Aplicar um estilo em uma
entidade aleatoriamente não é mais tolerado. A
web precisa ser semântica, desenvolvida com
dados claramente separados dos seus estilos.
Diversas tecnologias surgiram para suportar
essa nova categoria. Há frameworks Javascript
sofisticados que começam com jQuery e
avançam para Backbone.js e Ember, além de
muitos outros que permitem criar aplicações
rápidas e interativas. Entretanto, isso exige que
o antigo “montador” de front-end se torne um
“programador” de verdade. Não se trata apenas
de copiar e colar pedaços de código.
O mundo dos estilos sofreu uma grande
mudança graças à complexidade encontrada ao
lidar com múltiplos navegadores e dispositivos,
como smartphones e tablets. É preciso
compreender cada elemento da estrutura de
um CSS, incluindo os “media queries”, que
permitem ajustar o aspecto visual para cada
tipo de tamanho de tela, sem precisar duplicar e
recodificar estilos para cada dispositivo.
Com essa nova web “responsiva” ao tipo
de dispositivo, surgiram novas tecnologias
para que um “montador” de CSS evolua até se
transformar em um “programador”. Afinal, será
preciso entender como unir CSS 3 e Javascript
em estruturas semânticas de HTML5, por
meio de ferramentas que facilitam lidar com
essa amálgama de navegadores e dispositivos.
Hoje, um bom programador front-end sabe lidar
também com frameworks CSS como Twitter
Bootstrap, Bourbon Neat e outros.
Trata-se de um novo capítulo na evolução da
web, no qual profissionais de front-end precisam
evoluir para se tornar verdadeiros programadores.
Assim, será cumprida a promessa de criar uma
web semântica e responsiva. Para isso, serão
utilizadas tecnologias para criar interfaces
inovadoras e experiências fluidas e satisfatórias
aos usuários.
24locaweb
ColunaMercado1_Akita.indd 24
12/3/12 12:44 PM
kwarup.com
gerenciamento.
MAIS UMA RAZÃO PARA VOCÊ CONTRATAR O CLOUD LOCAWEB.
Com o gerenciamento da
Locaweb você garante um
ambiente constantemente
atualizado e de alta
segurança para suas aplicações,
pois todas as rotinas de
backup de armazenamento,
restore e atualização dos
sistemas operacionais,
além da pré-configuração
de Firewall, são de nossa
responsabilidade. Deixe todas
as preocupações de gestão
do ambiente com a Locaweb.
Cloud É loCaweb.
Locaweb.com.br/Cloud
An_Gerenciamento_205x275.indd 1
9/12/12 10:04 AM
lwopinião
mercado
Native Apps
e os Web Apps
H
Marcelo Negrini
Diretor de Evangelismo da
Buscapé Company
E-mail: marcelo.negrini@
buscapecompany.com
Dúvidas: www.formspring.
com/mnegrini
Criar, testar,
submeter e
manter apps
para todas as
plataformas
é caro e
complexo.
HTML5
ajuda, mas
não resolve
tudo que é
incompatível
oje, para aplicativos móveis,
o “certo” é desenvolver apps
nativos para as diversas
plataformas. Assim, a web móvel se
transforma em uma alternativa secundária.
É o contrário do desktop, no qual o
browser cada vez mais se torna o centro
das aplicações e quase nada é instalado.
Alguma coisa está fora de lugar, não?
O grande problema com o modelo de apps
é a fragmentação de plataformas. Desenvolver
para iPhone, iPad e telefones Android é
obrigatório. Mas e os outros smartphones e
tablets, especialmente as novas plataformas
Windows? Criar, testar, submeter e manter apps
para todas as plataformas é caro e complexo.
HTML5 ajuda, mas não resolve totalmente as
incompatibilidades.
Desenvolver para a web móvel é mais fácil e
barato, pois não há dependência da “bênção” das
app stores para distribuição. Então, por que todos
nós sofremos? A resposta está, paradoxalmente,
no modelo de app stores. Usuários, plataformas
e produtores de aplicativos têm interesses que
fazem o modelo ser um sucesso.
Vamos começar pelos usuários. Digitar em
telefones é terrível. Por consequência, navegar
na web móvel é frustrante, pois nem toda vez é
fácil aplicar simples endereços. É mais rápido
e conveniente instalar os melhores apps para
cada função na tela inicial do telefone e os
acessar com um toque.
Isso leva a um comportamento diferente do
que ocorre na web, em que tendemos a usar
múltiplos serviços para uma mesma tarefa. Com
a mobilidade, escolhemos nossas tarefas top e
ficamos fiéis a elas. Esse comportamento levou
à criação de sistemas fechados de apps que
favorecem as plataformas líderes.
A variedade de apps disponíveis é o
principal fidelizador dos usuários de iOS.
Outras plataformas já superam a Apple em
termos de usabilidade, poder e até mesmo
beleza. A briga hoje está na distribuição por
operadoras e, principalmente, na variedade de
ofertas nas app stores.
No longo prazo, para qualquer publicador
de aplicativos, mesmo para os líderes, ir para a
web móvel será uma solução muito mais prática
e barata do que desenvolver apps nativos.
Para isso se tornar realidade, as plataformas
precisam colaborar e dar mais poder de acesso
ao dispositivo pelo browser, adaptando o modelo
de app store para ser mais amigável a web
apps e removendo deficiências artificiais dos
browsers móveis.
26locaweb
ColunaMercado2_MarceloNegrini.indd 26
12/3/12 12:46 PM
lwopinião
mercado
Marcello Barbusci
Autor do blog
barbusci.com.br
E-mail: marcello@barbusci.
com.br
Twitter: @mbarbusci
O site é apenas
uma peça do
Lego, que
precisa se unir
a outras peças
para formar
uma estrutura
sólida. Sem
a união dos
diferentes
canais digitais,
você navega
à deriva
Um deus digital
V
ocê chegou ao consultório do
seu médico cardiologista para
uma consulta. Porém, como
sempre, a agenda está atrasada por
conta de uma emergência. Para passar o
tempo, você saca o smartphone e dispara
os dedos no teclado.
Vai para o aplicativo do Foursquare e faz
um check-in no consultório. Na sequência,
acessa o Facebook e posta “no que você está
pensando” naquele momento de impaciência
(melhor não escrever aqui). O que você
postou foi parar no seu Twitter, pois um
aplicativo está configurado para conversar
com o outro automaticamente.
Agora, você vai para o seu blog e escreve
em poucas linhas um artigo com sua tese a
respeito do fato de todos os médicos atrasarem
suas consultas, com o título: “Quero parecer
mais importante do que realmente sou”. E o
blog também está pronto para conversar com o
Facebook e o Twitter automaticamente.
Muito bem, após todos esses feitos, você
não se deu por satisfeito, até porque ainda
tem duas pessoas na sua frente à espera do
médico. E, para aproveitar o momento de
impaciência de todos que estão na sala de
espera, você discretamente usa a câmera
do smartphone para fazer algumas fotos. As
imagens vão parar no seu Instagram, que
também está ligado às suas redes sociais.
E assim você revela o que está ocorrendo
contigo para todos os seus seguidores.
Após passar por todas essas interfaces,
a pergunta é: onde você está mesmo? E a
resposta nos dias de hoje é mais simples
ainda: você está na sala de espera de um
consultório e em todos os lugares ao mesmo
tempo. Isso mesmo, você é onipresente,
um deus digital.
Moral da história: seja empresário,
funcionário ou freelancer, todos somos clientes
de algo. E, dessa forma, hoje, podemos estar
em todos os lugares ao mesmo tempo. Então
por que ainda acham que o site é a principal
vitrine para os negócios?
O site é apenas uma peça do Lego, que
precisa se unir a outras peças para formar
uma estrutura cada vez mais sólida. Sem
a união dos diferentes canais digitais,
você navega à deriva. Pense nisso, mas
com cuidado, pois até Momo, o deus da
irreverência, foi expulso do Olimpo por não
usar bem suas ferramentas.
28locaweb
ColunaMercado3_MarceloBarbusci.indd 28
12/3/12 12:49 PM
Serviços em Nuvem prontos
para crescer
Esteja você desenvolvendo ou contratando um serviço de nuvem, pode ter
certeza que a infraestrutura do seu centro de dados terá a performance
e a segurança perfeitos para o TI de uma empresa em constante evolução.
PERFORMANCE ATÉ
ATÉ
ATÉ
MAIOR
MAIS EFICIENTE
NO CONSUMO DE ENERGIA
MENOS
LATÊNCIA DE REDE
PERFORMANCE
EFICIÊNCIA
L ATÊNCIA
80% 70% 30%
306.74
466
166.75
Média de resultado geométrica
271
Resultados de Benchmark
divididos pelo processador TDP
230 nanossegundos
340 nanossegundos
Tempo médio para um equipamento
I/O ler a memória do sistema local
em condição inativa
APRESENTAMOS A NOVA
FAMÍLIA DE PROCESSADORES INTEL® XEON® E5
Saiba mais em intel.com.br/cloud
©
Copyright 2012, Intel Corporation. Todos os direitos reservados. Intel, o logotipo da Intel, Intel Inside,
o logotipo do Intel Inside, Intel Apaixonados pelo Futuro, o logotipo do Intel Apaixonados pelo Futuro,
Xeon e Xeon Inside, são marcas registradas da Intel Corporation nos Estados Unidos e em outros países.
Apps
para
todos
Desenvolva para
dispositivos com iOS,
Android e Windows
Phone e faça parte
de um dos mercados
que mais crescem
no mundo
Àdele Helena Ribeiro,
Max R. Jahnke e Sérgio Vinícius
30locaweb
12/3/12 1:05 PM
s
capa
capaapp
N
a App Store, loja de
aplicativos para os
produtos da Apple, estão
disponíveis mais de 700 mil apps
para download. Na Google Play,
repositório de softwares para
Android, há mais 700 mil apps. A
Microsoft pretende incluir em sua
Windows Phone Store, até o final
de 2012, 100 mil apps. Os dados
são das próprias companhias e se
referem a outubro de 2012. Isso
significa que, enquanto você lê
esta reportagem, esses números
já devem ter aumentado, já que o
mercado de apps está em ebulição.
É por conta dessas evidências
que o segmento de aplicativos para
dispositivos móveis – smartphones e
tablets, entre outros – está rendendo
muito, muito dinheiro. Com mais de
30 bilhões de apps baixados, a App
Store movimentou US$ 5 bilhões até a
metade de 2012.
Para pegar um exemplo isolado,
talvez o mais representativo desse
mercado, o Instagram – app de
fotografias – foi recentemente
adquirido pela rede social Facebook
por US$ 1 bilhão. Após a transação, o
uso do aplicativo cresceu 1.179%.
Isso tudo prova que o segmento de
apps está mais aquecido do que nunca,
especialmente no Brasil. De acordo
com o Google, o mercado brasileiro é
o que mais cresce no mundo quando
o assunto é aplicativos. Sem entrar em
números absolutos, a companhia que
detém o buscador mais famoso da web
informa que a receita com venda de
apps no País cresceu 88% de 2011 até
meados de 2012.
Diante desse cenário, não há
dúvidas de que os smartphones
e tablets vieram para ficar.
Extremamente populares, esses
dispositivos compactos geram – e
entregam, como meio e fim em
uma única plataforma – grande
necessidade de acesso a informações
em tempo real.
Investidores precisam de
informações sobre a bolsa de valores.
Desenvolvedores querem saber como
locaweb31
12/3/12 1:06 PM
capa
capaapp
iOS Developer
Program: os
três passos para
criar apps são
desenvolver, testar
e distribuir
está o trabalho da equipe. Gerentes
precisam entender o andamento
de projetos. Há ainda a enorme
quantidade de pessoas que
acessa as redes sociais em
momentos de lazer, de estudo ou
mesmo profissional.
Hoje, já há uma grande fatia
do acesso à web via dispositivos
móveis – 69% dos usuários do Brasil,
segundo uma pesquisa da Accenture.
Desses, 61% usam smartphones e
22%, tablets. Ainda segundo o estudo
divulgado em outubro de 2012, 78%
dos brasileiros pretendem comprar um
“telefone inteligente” nos próximos
meses (a média mundial de pessoas
que desejam o mesmo é de 40%). Mais
do que nunca, empresas precisam se
adaptar às novidades da web para se
manterem no mercado.
A boa notícia é que, para entrar
de vez no mundo dos aplicativos,
a tecnologia está do lado dos
desenvolvedores. Hoje se pode
contar com o HTML5, que permite
construir aplicativos multiplataforma
com mais facilidade. É possível, por
exemplo, implementar facilmente
um app que funciona tanto nos
navegadores dos desktops como nos
dos portáteis.
Nesta reportagem, você verá o
caminho das pedras para começar a
desenvolver aplicativos para portáteis.
Confira dicas preciosas para quem
deseja entrar de vez no valioso mundo
desses pequenos softwares.
MKT digital
» Para quem vislumbra
aproveitar a onda do marketing
digital, vale a pena seguir
algumas dicas na hora de
criar uma boa campanha
de publicidade. A mais
importante é ser original.
Ser o primeiro a lançar uma
ferramenta ou um produto é
Desenvolvimento de aplicativos para WP: empresa espera chegar a 100 mil apps em 2012
HTML5
Ao navegar pela internet, é
possível encontrar muitos websites
com HTML5. Há poucos anos, o
Flash dominava a interatividade e a
animação na web, mas aos poucos sua
presença diminuiu. Ele deu lugar ao
já citado HTML5, além do CSS3 e do
Javascript, que permitem desenvolver
sites dinâmicos e interativos.
louvável, mas muitas vezes é
difícil conseguir se antecipar.
Por isso, a dica é aproveitar o
que já existe de uma maneira
inovadora, de modo a tornar
o seu produto um verdadeiro
sonho de consumo. O maior
exemplo é a Apple, que
não inventou o tablet, mas
inventou o iPad, primeiro
Exemplos de sites que já desfrutam
desses novos recursos são o Gmail e o
Google Maps, além do YouTube e da
versão mobile do Facebook. Vale a pena
conferir também a página da Apple
(www.apple.com/webapps/index_top.
html), que mantém uma grande lista
de aplicativos que demonstram como
o HTML5 pode dar uma experiência
muito rica para o usuário.
aparelho do gênero que todo
mundo gostaria de ter. Outra
dica é pensar com cuidado
nas palavras-chave que
serão oferecidas junto ao seu
aplicativo. O sistema de busca
de apps nas lojas é baseado
nas tags. Pense, então, em
palavras que reconheçam o
seu produto e que o usuário
provavelmente usará na hora
de fazer a pesquisa.
Ferramentas de palavraschave estão disponíveis na
web, facilitando a busca de
vocábulos mais frequentes.
Uma delas é App Store
Optimization da MobileDevHQ,
que pode ser encontrada em:
www.mobiledevhq.com.
32locaweb
12/3/12 1:06 PM
Pesquisa de uso
» Boa parte dos usuários prefere usar os navegadores dos dispositivos a aplicativos nativos,
segundo pesquisa realizada pela Adobe. E isso vale para praticamente todos os tipos de
conteúdo, principalmente quando se trata de compra em lojas. Há, porém, exceções. Uma
delas é o uso de jogos, já que é preciso de um acesso rápido ao hardware. Com músicas e
redes sociais, a preferência também se dá por aplicativos nativos. Então, lembre-se: um
bom app não substitui uma versão mobile benfeita de seu site.
iOS Dev Center: aplicativos voltados ao
sistema já ultrapassam a marca de 700 mil
capaSEO
capaapp
App Store: lojinha da Apple já movimentou
mais de US$ 5 bilhões com seus diversos apps
Beauty of the
Web: website da
Microsoft mostra as
vantagens de usar
o HTML5 para
criação online
A Microsoft também conta com
um site elaborado para demonstrar
toda a riqueza do HTML5. Confira em
www.beautyoftheweb.com/developers.
Offline
Também é possível criar aplicativos
offline com HTML5. Alguns dos
recursos que a linguagem fornece
são: armazenamento local, suporte
a vídeo e a áudio de forma nativa,
geolocalização e canvas. Essas
características permitem a execução
de forma interativa de jogos, gráficos,
imagens e desenhos.
Tudo isso pode ser facilmente
implementado para ser executado
como um aplicativo local e, inclusive,
ser distribuído nas lojas.
Algumas ferramentas podem ajudar
bastante na construção de seu app
para dispositivos móveis em HTML5.
Um dos exemplos é o Sencha Touch.
Trata-se do primeiro framework
dedicado ao desenvolvimento de
aplicativos usando CCS3, HTML5
e Javascript. A solução garante ao
desenvolvedor um grande poder de
otimização e flexibilidade. Com o
Sencha, é possível criar aplicativos
rápidos e bonitos que funcionam em
iOS, Android, BlackBerry e Kindle Fire.
Outras ferramentas interessantes
são o jQuery Mobile e o DHTMLX
Touch. Eles permitem projetar
aplicativos de entretenimento ou de
negócios para web que, com uma
única base de código, funcionarão
Referência
» Um caso que serve de inspiração para
aqueles que estão começando a explorar
os recursos do HTML5 é a migração do
Cut the Rope. Trata-se de um jogo de
iOS que passou a funcionar na web. Uma
descrição de como foi feita a transição dos
recursos implementados em Objetive-C
para Javascript, HTML5 e CSS3 pode ser
encontrada em: www.cuttherope.ie/dev.
O que chama a atenção é que o canvas
do HTML5 tem mais funcionalidades
que o OpenGL usado para versão móvel
do game. Por exemplo, os recursos de
anti-aliasing. O relato dos desenvolvedores
possui diversas informações técnicas
que contribuem para o aprendizado. A
versão web é uma bela demonstração
dos recursos do HTML5. Para conferir
o resultado, basta acessar o endereço
eletrônico www.cuttherope.ie.
locaweb33
12/3/12 1:06 PM
capa
capaapp
Da esq. para dir.: Roberto Bodo, Fernando
Novaes, Thiago Toledo e Bruno Mazotti, da Opus
Reunião de desenvolvimento: geolocalização é pedida em boa parte dos aplicativos
Há poucos anos, o
Flash dominava a
animação na web,
mas aos poucos
sua presença
diminuiu. Deu
lugar ao HTML5,
além do CSS3 e
do Javascript,
que permitem
desenvolver
sites dinâmicos
e interativos
Página da
Opus: companhia
especializada em
apps diz que design
deve ser bem
pensado
perfeitamente nos dispositivos móveis
mais populares, como iPad, iPhone,
Blackberry e smartphones com
Android ou Windows Phone.
Prática
Na prática, o que se vê ao
desenvolver aplicativos para
dispositivos móveis é que quase todas
as funcionalidades nativas dos apps
Inscrições
» A inscrição na loja da Apple é anual.
O plano padrão custa US$ 99, e o de
empresas, US$ 299. No Google, uma conta
de desenvolvedor pode ser feita pela web e
sai por US$ 25. No Marketplace, o cadastro
é gratuito no App Hub. Para submeter
aplicações para avaliação, paga-se US$ 99.
podem ser acessadas por recursos
do HTML5. Há ainda a vantagem de
usar o mesmo código para diversas
plataformas. Além disso, a diferença de
desempenho é desprezível.
Infelizmente, as diferentes
plataformas – iOS, Android e
Windows Phone – ainda têm algumas
peculiaridades que só são acessíveis
por código nativo. Isso dificulta o
Google play.google.com/
apps/publish/signup
Apple developer.apple.com
/programs
Microsoft dev.windowsphone.com/
en-US/publish
desenvolvimento. Nesses casos, é
necessário, ao menos por enquanto,
criar o código específico para cada uma.
Particularidades
Apesar de toda a facilidade trazida
pelo HTML5, o interessado em
desenvolver para dispositivos móveis
ainda precisa de um conhecimento
específico de cada plataforma. Ao
desenvolver para a App Store, por
exemplo, é necessário estudar a
plataforma iOS e aprender Objetive-C.
Tutoriais, vídeos, documentação das
APIs e diversas outras informações
técnicas podem ser encontradas no
iOS Dev Center, oferecido pela Apple
em developer.apple.com/devcenter/
ios/index.action.
34locaweb
12/3/12 1:06 PM
Ferramentas
» Confira nos links abaixo algumas das
ferramentas principais para desenvolvimento
multiplataforma de dispositivos móveis:
•Sencha Touch: www.sencha.com/products/touch
•jQuery Mobile: jquerymobile.com
•DHTMLX Touch: www.dhtmlx.com/touch
capaSEO
capaapp
Sencha Touch é
um dos primeiros
frameworks
dedicados ao
desenvolvimento
de apps
DHX: ferramenta é essencial para
os desenvolvedores de aplicativos
Uma das dificuldades de se
trabalhar com a Apple sempre
foi a necessidade de aprender a
linguagem Objective-C. Ela é pouco
difundida e tem fama de ser de difícil
aprendizado. A boa notícia é que, com
a possibilidade de integrar o código
com HTML5, tem sido mais fácil
aproveitar os recursos dos dispositivos
sem ter um profundo conhecimento
da linguagem. Certamente, isso abre
portas para muitos desenvolvedores.
Para o sistema do Google, o
desenvolvedor terá de aprender
Java, uma linguagem muito bem
documentada e que tem grande
comunidade de entusiastas. O kit de
programação para Android conta com
poucos recursos se comparado ao da
Apple. Ao contrário do que acontece
com o SDK da empresa da maçã, o do
Google está disponível para Windows,
Mac OS e Linux. Informações são
encontradas no Android Developer
Center no endereço developer.android.
com/index.html.
Para quem deseja atingir os
usuários do Windows Phone,
por sua vez, a Microsoft oferece
diversos tutoriais no Windows Phone
Developer Center (http://create.
msdn.com/en-us/home/getting_
started). Nesse caso, é necessário ter
conhecimento de C#, que também é
bastante difundida e documentada.
Cases
A empresa Opus Software (www.
opus-software.com.br), especializada
em apps para diferentes plataformas,
vinha enfrentando grandes desafios
para criar para todos os dispositivos.
A situação mais comum com que
a companhia vinha se deparando
há algum tempo é a de aplicações
que possuem duas bases de código:
Java para Android e Objective-C
para iOS. Para conseguir tornar
acessível um mesmo app para
diferentes sistemas, criaram uma
solução inovadora: apostaram no
desenvolvimento de uma aplicação
com a linguagem C#, do ambiente
.NET. Assim, a Opus conseguiu
atingir a compatibilidade nas três
principais plataformas.
A parte mais distinta do código
é a interface do usuário, na qual foi
preciso fazer adaptações para cada
ambiente específico. A tendência é de
que, com o tempo, o HTML5 ajude a
vencer essa e outras dificuldades.
Geolocalização
» O programador Paulo de Souza
Geyer, especialista em Ruby on Rails,
foi o responsável por criar a versão
para celular do Arte Fora do Museu
(arteforadomuseu.com.br). Ele conta,
abaixo, detalhes do desenvolvimento
de seu app e dá dicas para iniciantes.
“Um dos recursos mais interessantes
do aplicativo foi o uso da geolocalização
para listar as obras de arte por ordem de
proximidade do usuário, facilitando a
criação de um passeio artístico.
A experiência foi simples, já que pude
usar toda a base desenvolvida do site e
o único trabalho foi adaptar a interface.
Isso foi feito usando jQuery Mobile, um
framework para JavaScript com suporte
para as plataformas iOS, Android e
BlackBerry. Para quem está começando,
indico cursos no Code School, em que
se aprende sobre responsive web design
e outras técnicas de desenvolvimento.
Recomendo também o Udacity, que
tem cursos online – em especial o de
desenvolvimento de jogos com HTML5.”
locaweb35
12/3/12 1:06 PM
capa
capaapp
Guidelines
» A Google Play é uma festa do caqui quando o assunto é incluir apps. Já as
duas outras concorrentes têm normas rígidas. Para saber quais são elas, acesse:
•App Store: developer.apple.com/appstore/guidelines.html
•Microsoft: msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx
“Ao participar da concepção
e do desenvolvimento da solução
como um todo, envolvendo tanto
o processamento transacional do
servidor como o software que roda no
dispositivo, temos a oportunidade de
elaborar soluções melhores, além de
tornar o trabalho mais interessante
e produtivo”, aponta Bruno Mazotti,
desenvolvedor da empresa Opus
Software. “Com isso, as oportunidades
de aprendizado e crescimento
profissional também são maiores.”
A equipe da Opus tem experiência
em sistemas transacionais de alto
desempenho e disponibilidade.
Atualmente, a companhia tem
trabalhado em projetos web de missão
crítica usando ferramentas como Java,
Objective-C, .NET e HTML5.
Um case de destaque foi a
migração de uma ferramenta de
cardápio eletrônico integrada ao
sistema de pedidos do restaurante
para uma app nativa do iOS. Como
o modelo de negócios do cliente era
explorar a publicidade nos cardápios,
foi desenvolvido um sistema de
distribuição dinâmica de anúncios,
vídeos e imagens que garante que os
dispositivos interajam com serviços
web periodicamente, garantindo a
atualização do conteúdo.
“Um dos aspectos empolgantes
da disseminação de dispositivos
nas mãos dos consumidores finais
é justamente a oportunidade
de desenvolvermos soluções
multiplataforma, que envolvem
tecnologias diferentes que precisam
ser integradas para funcionar
em harmonia”, conta Fernando
Andrade de Novaes, desenvolvedor
da empresa.
Outro exemplo, desenvolvido
para a plataforma Android, envolveu
reconhecimento e extração de
imagens em documentos complexos.
O jQuery
Mobile permite o
desenvolvimento
de interfaces de
aplicativos para
aparelhos portáteis
“O fato de os dispositivos se
comunicarem com a internet de
maneira plena exige que as soluções
contemplem conceitos de computação
distribuída, fornecendo escalabilidade
e desempenho e que, ao mesmo
tempo, sejam atraentes para o usuário
final”, conta Thiago Gomes Toledo,
desenvolvedor da empresa.
São cada vez mais comuns
também os pedidos de modificações
em websites com uma interface
compatível à tela de um dispositivo
móvel. O desenvolvimento de
aplicações híbridas, que combinam
uma interface local instalada no
dispositivo com os recursos de
hardware, como câmera e GPS,
também viraram sonho de consumo.
Nesse caso, o principal desafio não
está na construção do aplicativo, mas
no seu design. É complexo determinar
quais funções de um site ou sistema
devem ser incluídas na versão mobile.
Se houver exagero, a aplicação perde
o foco, o usuário tem dificuldade
de usar e o interesse acaba. Por
outro lado, se poucas funções forem
adicionadas, o resultado pode ficar
pobre demais.
Publicação
Depois que tudo estiver pronto, é
hora de colocar os aplicativos à venda
ou à disposição do público. Para fazer
isso na Google Play, é necessário
acessar a sua conta, preencher
informações e fazer o upload. O
aplicativo já estará disponível para a
distribuição, gratuito ou não.
Com Microsoft e Apple, as coisas
não são tão simples. Embora o
processo seja parecido, além de fazer
o upload do aplicativo compactado
na App Store ou App Hub, é
necessário enviar uma descrição do
produto, junto a ícones, screenshots
e o valor do app.
Após o envio, ainda haverá uma
avaliação. Caso não haja bugs,
conteúdos proibidos ou divergências
na descrição, dentro de uma semana
o aplicativo será aprovado e estará
disponível. No caso de rejeição, é
possível reenviar o aplicativo quantas
vezes forem necessárias, mas a cada
vez todo o processo deverá ser refeito.
Porém, pela quantidade de apps que
estão no ar, isso não tem intimidado
ninguém. Afinal, apps estão na moda,
e você tem tudo para fazer parte dela.
36locaweb
12/3/12 1:06 PM
anuncio-google-adwords-curvas.pdf
C
M
Y
CM
MY
CY
CMY
K
1
9/13/12
1:42 PM
designerros
Erros
que
podem
detonar
o seu
Conheça os principais
equívocos que costumam
ser cometidos na hora
de criar o design de uma
página na web e aprenda
a solucioná-los Por Isabella Sánchez
38locaweb
Design37.indd 38
12/3/12 12:03 PM
designerros
T
rabalhar na criação de
websites exige olhos
atentos. Diante do próprio
conteúdo web ou de um cliente,
há muitos elementos com que
se preocupar, sobretudo na área
de design. É comum que alguns
pontos sejam esquecidos e que
alguns problemas apareçam, o
que pode afastar os preciosos
visitantes do seu espaço na web.
Por isso, a Locaweb em Revista
consultou especialistas da área
para reunir alguns dos erros mais
cometidos por web designers,
que vão de layouts pouco
atraentes a uso de cores confusas
e tipografia ruim. Mais que isso,
a seguir trazemos soluções para
cada um deles. Confira:
Layouts pouco
atraentes
Há muitos sites com layouts
básicos, sem nada de muito criativo
ou chamativo. No entanto, outros
não exageram em texturas, cores,
ilustrações e tudo termina como um
carnaval ao olhos do usuário. Há
Para criar layouts atraentes, vale a pena recorrer aos grids, que ajudam a alinhar
elementos na página e criar fluxos lógicos. Um dos mais usados é o 960 Grid System (960.gs)
diversas formas de abordar a etapa
de criação. Uma boa dica para criar
layouts sedutores, é recorrer a grids.
São perfeitos para alinhar elementos
na página e criar um fluxo lógico e
agradável para o visitante. Um grid
muito popular é o 960 Grid System
(960.gs), que tem 960 pixels de
largura e pode ser dividido em
várias partes. Se a vontade é criar
o próprio grid, o The Grid System
(www.thegridsystem.org) reúne
artigos, ferramentas, tutoriais e
templates prontos. Não esqueça
que o layout precisa se adaptar ao
conteúdo e alinhar design e elementos
funcionais da página. Dê uma chance
para a criação no navegador, que
também pode ser uma ferramenta
de design. O browser simula
PORTFÓLIO
Ter um bom portfólio na web é a
ponte para conseguir jobs e clientes,
mas é comum se equivocar na
hora de montar a página com o seu
conteúdo. “Muitos se preocupam
demais em falar de si e deixam
seus trabalhos em segundo plano.
Na verdade, deve-se fazer o contrário.
É preciso mostrar seus trabalhos e, se o
cliente em potencial gostar, aí sim vai
querer saber mais sobre o designer”,
conta Filipe Fernandes, do Choco
La Design. Procure dar destaque a
ilustrações e cases em que já trabalhou
logo de cara no seu portfólio. “Isso fisga
o cliente/visitante na maioria das vezes”,
completa Fernandes.
locaweb39
Design37.indd 39
12/5/12 6:54 PM
designerros
perfeitamente a tipografia escolhida
e economiza tempo. Você também
pode ver, em tempo real, como ficou o
seu site e consegue testar em vários
navegadores. E não subestime os
cabeçalhos em sites, já que conseguem
dar consistência, personalidade e
branding. Em navegação, ajudam o
usuário a se localizar. Por isso, vale a
pena pensar bem em caixa de busca,
menus e listas.
Cor errada
Há dois erros clássicos: criar uma
interface que abusa de uma só cor ou
de dezenas delas. É preciso estudar
os tons e manter o equilíbrio para não
exagerar na dose. O primeiro passo é
conhecer seu público. O azul é a cor
mais segura porque agrada a homens
e mulheres. Além disso, estimula o
Na hora de escolher as cores, estude
os tons e mantenha o equilíbrio
para não exagerar na dose
córtex pré-frontal e causa sensação
de produtividade e estabilidade,
segundo Flávia Alessandra Ferreira,
gerente de marketing da V2 Design.
Não é à toa que Twitter e Facebook
se deram tão bem no azul. As cores
devem ser usadas para complementar
a mensagem e não como a mensagem
em si. Um vermelho brilhante, por
exemplo, seria péssimo para um site
da área de saúde. O preto sugere
algo mais profissional, mas também
denota morte. Já páginas para
crianças precisam de cores saturadas
e brilhantes, que estimulam a mente e
a atenção. E websites de comida têm
que usar cores que estimulam a fome,
como o vermelho e o amarelo.
Tipografia ruim
A cor azul é usada em muitos sites
populares por agradar a homens e mulheres
Títulos muito grandes ou mistura
de fontes diferentes na mesma
página são grandes gafes cometidas
por alguns websites. Antes de
escolher a tipografia correta para sua
página, alguns fatores devem ser
O Fontdeck (fontdeck.com) é um bom site para encontrar tipografias adequadas para a web
considerados, como a legibilidade
(facilidade de leitura), tamanho, cor
e, principalmente, contraste com o
plano de fundo. Para títulos, um bom
padrão de tamanho está entre 12 e
16 pixels. Evite também fontes com
serifa, como Times New Roman, que
não conseguem ser bem definidas
pelos monitores, inclusive de
smartphones, e prejudicam a leitura.
Três opções populares são Helvetica,
Trajan e Garamond. Há bons lugares
para encontrar tipografias para web,
como Google Web Fonts (google.com/
webfonts), Typekit (typekit.com) e
Fontdeck (fontdeck.com). Lembre-se
de estabelecer um padrão para
textos e títulos.
Tela branca
Segundo Tiago Fernandes, diretor
da Skidun, uma das piores inimigas
das boas ideias é a tela branca.
“Excluídas raríssimas exceções, é
sempre mais indicado pesquisar
referências e investir em alguns
rabiscos no papel antes de salvar o
primeiro PSD no Photoshop. É mais
rápido, menos intimidador e você
poderá até descobrir prazer nisso.”
Falta de criatividade é algo que
acontece de vez em quando, mas
muita gente acaba não inovando e
mantendo o mesmo estilo em todos os
projetos. Por isso, antes de começar a
O Google também tem um portal de fontes
(google.com/webfonts) para você trabalhar
40locaweb
Design37.indd 40
12/3/12 12:03 PM
designerros
criar layouts, botões e ilustrações para
o seu site, busque inspiração na rede
ou fora do computador. Os visitantes
irão agradecer.
Admitir a diferença
entre plataformas
Uma bela fonte pode perder
totalmente a função se oferecer pouca
legibilidade em telas pequenas.
“Para piorar e aniquilar de vez com
qualquer chance de leitura, coloque
o texto em cor branca sobre um
fundo amarelo. É possível que alguns
usuários nem mesmo saibam que
existe um texto”, alerta Fernandes, da
Skidun. Ao desenvolver uma página
mobile ou para tablet, dê prioridade
às dimensões de textos e imagens, já
que o espaço é bem menor.
Navegação confusa
Construir uma navegação eficiente
é vital. Mesmo assim, ainda tem
página na web complicando a vida
do usuário. São anúncios e conteúdos
misturados, falta de padrão e menus
enormes cheios de categorias.
Uma boa navegação tem menus e
links lógicos o bastante para levar
seu usuário da página inicial ao
seu objetivo, fazendo o caminho
mais curto possível. A linguagem
para descrever o que é oferecido
ou alguma seção do site deve ser
simples, direta e envolvente. Um
erro comum é usar termos genéricos
como itens principais de navegação.
Isso atrapalha a busca dos visitantes.
Menus drop-down, por exemplo,
são ótimos para economizar espaço,
É preciso pensar diferente na hora de desenvolver para tablets e mobile, pois a tela é menor
já que acrescentam itens que
eventualmente não caberiam em uma
lista. Vale salientar que a interface
do usuário deve ser prioridade do
começo ao fim do processo.
Esconder
informações
Saber como organizar as
informações e itens mais importantes
nos lugares certos também faz parte
de uma navegação intuitiva. Opte por
colocar os itens mais importantes no
cabeçalho da página. Uma caixa de
buscas é uma ótima forma de ajudar
o usuário a encontrar o que procura
o mais rápido possível. Use filtros de
pesquisa, caso o número de resultados
for muito grande. Ninguém quer se
perder em páginas e mais páginas
para chegar ao que deseja.
é separar a navegação em duas:
uma para os links institucionais,
como Home, Sobre, Anuncie e
Contato, e outra para as categorias
e subcategorias. Assim, o usuário
consegue ir diretamente ao conteúdo
que procura ou saber mais sobre os
itens institucionais. Ícones também
são elementos que facilitam a vida
de quem está navegando. Além de
ilustrar, deixam a navegação mais
atrativa e fazem com que o usuário
identifique com mais facilidade o
que está procurando. Para Filipe
Fernandes, do Choco La Design,
porém, é preciso ficar atendo.
“Usar ícones que não são
compreensíveis ou condizentes
com os respectivos tópicos pode
fazer com que o usuário se frustre
e não volte mais”, sentencia.
Menus ruins
Usar menus drop-down é uma boa para
economizar espaço e facilitar a navegação
Um dos maiores erros em sites,
blogs e portais são menus confusos ou
mal planejados. Quanto mais sucinta
for a navegação, mais tempo o usuário
vai permanecer no site, uma vez que
ele consegue encontrar o conteúdo
que procura. No caso de blogs e
portais, onde há fluxo e variedade de
informações muito grande, o ideal
Blogs com menus sucintos costumam
prender mais a atenção do internauta
locaweb41
Design37.indd 41
12/3/12 12:03 PM
email
emailmarketing
E-mail
marketin
Especialistas
apontam os
melhores
caminhos para
criar peças de
qualidade e atrair
o público-alvo
Bianca Bellucci
O
e-mail marketing
é uma ferramenta
poderosa para a
empresa que o
utiliza e para o profissional que
presta o serviço. Afinal, uma boa
campanha do gênero vai além
de criação e envio da peça e gera
diversos outros serviços – e,
consequentemente, retorno para o
investidor. Entre eles, destacam-se:
a verificação do número de pessoas
que abriram a mensagem, a
contagem dos cliques recebidos, a
análise de encaminhamento para
terceiros e até a visualização do
local onde a peça foi aberta.
Nenhum outro meio de comunicação,
como jornal, TV, rádio ou mala-direta,
oferece tantas vantagens. “O fato é
que, com todas essas informações
em mãos, o anunciante que opta
pela continuidade da ação via e-mail
marketing com disparos frequentes
tem a oportunidade de aprimorar cada
vez mais a campanha e conseguir
melhorar sistematicamente os
resultados. É por isso que, quando bem
usada, a ferramenta é incomparável”,
diz Ivan Bastos, diretor da agência
digital WebJump.
Vale salientar, porém, que, para
funcionar corretamente, o e-mail
marketing não pode ser enviado para
qualquer pessoa, e sim encaminhado
apenas para aquelas que aceitaram
receber informações da empresa. Mais
do que isso, o prestador do serviço e
o anunciante devem tomar cuidado
com a publicidade que será feita, pois o
receptor que aceita receber campanhas
espera que peças relevantes cheguem
à sua caixa de entrada, e não um monte
de mensagens de pouco interesse.
Respeito às normas
Para o gerente de marketing do
Mercado Livre no Brasil, Daniel Aguiar,
a empresa deve respeitar ainda outras
normas para atingir corretamente o
seu receptor. “É preciso fazer uso de
boas práticas de envio, usar listas
confiáveis e com opt-in (autorização
de cadastramento em mailing), deixar
acessível ao cliente o link para optout (descadastramento do mailing),
respeitar as preferências de frequência
do cliente e mandar sempre mensagens
relevantes.” Assim, é possível colher
grandes frutos, como atesta Juliano
...de im
42locaweb
EmailMKT.indd 42
12/3/12 11:52 AM
email
emailmarketing
ting...
Souza, diretor de marketing da
Giuliana Flores. “O e-mail marketing é
responsável por 13% de nossas vendas
e é o meio de interação mais importante
que nós temos. Por meio deles, falamos
de maneiras diferentes com clientes
que estão em situações diversas. Assim,
o relacionamento fica cada vez mais
estreito”, diz Juliano.
Além de respeitar algumas normas
para que a ferramenta seja bem-aceita
pelo público, é importante abordar o
usuário de forma correta. Segundo
Marco Salvi, gerente de marketing da
Virtual Target, agência especializada
na criação e envio de e-mail marketing,
a melhor forma de fazer isso é
conhecer bem o que o público quer.
“É preciso prezar pela segmentação e
personalização das campanhas, fazendo
com que o leitor fique ansioso para
receber as campanhas.”
Peças
Depois de
conhecer bem o públicoalvo, é hora de criar a
peça. Conteúdo, imagens,
fontes, adequação a redes
sociais... Tudo isso deve ser levado em
consideração. O problema, porém, é
que não existe uma fórmula pronta que
garanta o sucesso da campanha, já que
a estratégia deve levar em consideração
o perfil de cada empresa.
Por isso, uma boa dica é ficar
de olho em e-mails marketing de
sucesso, adotar os elementos que
mais combinem com os objetivos
do anunciante e, a partir daí, criar
uma campanha de impacto. Vire a
página e confira quatro peças que
tiveram bom desempenho no
mercado, e extraia delas o que há de
melhor para os seus jobs.
mpacto
locaweb43
EmailMKT.indd 43
12/3/12 11:52 AM
email
emailmarketing
GIULIANA
FLORES,
FLORICULTURA
Seja inovador
Fuja das publicidades
genéricas que a maioria
das empresas faz para
divulgar seus produtos.
Acrescente frases de
impacto e situações
criativas.
Redes sociais
Coloque atalhos para
plataformas online
em que a empresa
trabalha. Isso gera
interação com o
cliente.
Imagens atraentes
O uso de imagens atrativas desperta
o interesse e deixa o conteúdo do
e-mail visualmente mais bonito.
EXPEDIA,
SITE DE
VIAGENS
Mensagem direta
Mostre com destaque o objetivo da
peça e prefira sempre os layouts em
que toda a mensagem apareça, sem
que o usuário seja obrigado a descer
a página para visualizar o conteúdo.
Fonte adequada
De nada vale uma
composição linda
se o texto estiver
ilegível. Por isso, use
fontes claras e com
cores contrastantes,
pois uma má
calibração de monitor
pode comprometer
toda a peça.
Opt-out disponível
Seu cliente é quem
decide receber a
mensagem. Por isso,
é preciso deixar bem
clara a opção de não
receber mais esse tipo
de conteúdo, caso o
leitor assim o queira.
44locaweb
EmailMKT.indd 44
12/3/12 11:52 AM
email
emailmarketing
Estratégia de campanha
Decida qual o objetivo do e-mail: se é para divulgar algo,
vender produtos, estreitar relacionamento ou ofertar serviços.
A partir daí, deixe isso bem claro no começo da mensagem.
Misture elementos
Se o designer colocar textos
extensos, o e-mail ficará chato.
Se colocar apenas fotos, ficará
sem conteúdo. Por isso, misture
elementos para que o produto
final fique mais atraente e
interativo para o público.
MÍNIMO
DETALHE,
ASSESSORIA
DE EVENTOS
Padrão
Caso queria divulgar datas,
horários ou preços, use sempre
um padrão de linguagem.
Diminutivos, números por
extenso ou não, barras de
separação... Tudo deve estar de
acordo em toda a mensagem.
MERCADO LIVRE,
SITE DE LEILÕES
Visualização
Alguns gerenciadores
de e-mail não suportam
HTML, outros podem
bloquear campanhas
de marketing. Por isso,
ofereça outras opções de
visualização ao cliente.
Relacionamento
A palavra-chave para ter um retorno
positivo do e-mail marketing é
relacionamento. Por isso, trate-o de
forma personalizada em vez de empurrar
ofertas goela abaixo. Caso seja uma data
especial para o cliente, como aniversário,
não deixe de ressaltar o fato e até
oferecer descontos, se for o caso.
Conteúdo
Acompanhe as
tendências do
mercado e use
promoções ou
produtos que estão
sendo comentados
e desejados por
todos no momento.
locaweb45
EmailMKT.indd 45
12/3/12 11:52 AM
cloudserver
Não tente
fugir da
nuvem
Ok, você já ouviu falar muito bem de
cloud computing. Agora precisa entender
por que seu site não pode (e não deve)
mais viver sem ele Por Andreza Emília Marino
A
o iniciar um negócio,
garantir a presença
online é sinônimo de
aproveitar as oportunidades
que a internet oferece. E, até
onde se sabe, ninguém está
disposto a perder (consciente ou
inconscientemente) lances capazes
de potencializar o desempenho
de qualquer empreitada. Por isso,
é muito importante escolher um
ambiente de hospedagem do site
que não limite as possibilidades
de crescimento e que “não exija
mais atenção ou investimento”
do que o próprio negócio. Nesse
contexto, o cloud computing, ou
computação na nuvem, caminha a
passos largos.
“Cloud computing é muito mais
do que uma tendência. Notamos que,
de dois anos para cá, a adoção da
modalidade está acelerada em todos
os portes e segmentos de empresas”,
explica Camila Kamimura, gerente de
marketing de produtos IaaS e PaaS da
Locaweb. Segundo ela, a modalidade
permitiu o nascimento de um novo
modelo de computação, que passou a
oferecer Infraestrutura como Serviço
(conhecido como Infrastructure
as a Service, ou IaaS). E vai além,
podendo oferecer também a vertente
de Plataforma como Serviço (PaaS),
Cloud computing da Locaweb: muito mais do que uma tendência, computação em nuvem,
de dois anos para cá, teve sua adoção acelerada em todos os portes e segmentos de empresas
46locaweb
Cloud.indd 46
12/3/12 11:47 AM
cloudserver
locaweb
locaweb47
Cloud.indd 47
12/3/12 11:48 AM
cloudserver
MITOS E VERDADES
SOBRE CLOUD SERVER
Mito 1:
cloud é para
grandes
empresas.
A verdade: cloud
serve para todas as
empresas, sendo
particularmente
interessante para
pequenas e médias,
que precisam de muita
atenção aos custos.
Mito 4: cloud
é inimigo dos
gestores de TI.
A verdade: cloud
oferece autonomia e
flexibilidade para o
gestor de TI, que pode
tomar as melhores
decisões para a área.
Mito 2: cloud é
caro, de gestão
complexa e
com custo
imprevisível.
A verdade: é mais
simples e barato do que
se imagina. É possível
contar com a experiência
de um provedor de
serviços, que gerencia
toda a infraestrutura, com
mensalidade fixa.
Mito 5: cloud
não é seguro.
A verdade: cloud é
seguro e confiável. A
computação em nuvem
nada mais é do que
um servidor virtual
que oferece recursos
computacionais que
operam de maneira
isolada e independente.
Mito 3: cloud
é para web
e tem baixo
desempenho.
A verdade: comporta
diversos tipos de
aplicações, inclusive
sistemas de gestão,
como ERP e CRM,
com desempenho
bastante satisfatório.
Mito 6: cloud
é só IaaS.
A verdade: cloud vai
além de infraestrutura.
Pode ser PaaS, em que
o provedor faz a gestão
da infraestrutura para
facilitar a vida do cliente,
e SaaS, quando dispõe
de aplicativos prontos
para serem usados, como
ferramentas para loja
virtual, e-mail marketing e
sistema de atendimento.
em que uma empresa faz a gestão da
infraestrutura do cliente por meio de
atualizações de sistema operacional,
configurações de rede, ferramentas
de segurança e atualização de
firewall, por exemplo. Ou ainda
Software como Serviço (SaaS),
quando tem aplicativos prontos para
serem usados, que independem da
infraestrutura, como ferramentas
para loja virtual, e-mail marketing e
sistemas de atendimento ao cliente.
Dentre os benefícios que devem ser
olhados com atenção na hora de adotar
a computação na nuvem, está o fim da
necessidade de investir na compra de
equipamentos próprios e dos gastos
com manutenção e atualização de
hardware e software. “Ficou muito
mais fácil prever os gastos com TI”,
garante Camila. Nesse cenário, o
segmento de pequenas e médias
empresas foi fortemente contemplado,
porque é justamente ele que precisa
controlar custos na ponta do lápis para
deslanchar a operação e pode, enfim,
alocar os recursos em outras áreas
mais necessitadas. “Existem modelos
Ao adotar a computação na nuvem,
a empresa se livra do custo de
investir em equipamentos próprios
Como o cloud computing pode ser contratado por demanda, seu uso pode ser bastante flexível
48locaweb
Cloud.indd 48
12/3/12 11:48 AM
cloudserver
que cobram pelo uso da máquina, em
que é preciso controlar o consumo por
minuto para saber os gastos com TI.
E existem modelos com mensalidade
fixa, com previsão de gastos por mês”,
conta Camila Kamimura.
O empreendedor não precisa
de conhecimentos avançados ou
de investimento em uma área
especializada de TI. “Basta contar com
conhecimento e experiência de um
provedor de serviços para gerenciar
a infraestrutura”, ensina a gerente.
“Assim, o empresário pode seguir
tranquilo e focado no seu negócio”,
complementa. Adequado à realidade
da maioria das empresas do País, o
modelo de servidor na nuvem oferece
elasticidade para aumentar e diminuir a
capacidade da infraestrutura na medida,
e flexibilidade para abrigar qualquer
tipo de projeto (de sites e e-commerce
a sistemas de gestão, como ERPs e
CRMs, por exemplo). Sendo assim, não
há mais necessidade de comprar uma
capacidade computacional maior do que
a real necessidade, apenas prevendo
possíveis picos de acesso, e se pode
reduzir a capacidade se ela não estiver
em uso. Isso é o que podemos chamar
de uso sob demanda.
Um exemplo capaz de ilustrar tal
versatilidade seria o caso de um show
de uma banda internacional, com venda
de ingressos online. Nesse período,
o número de acessos simultâneos irá
ser dez vezes maior do que o normal
e irá demandar muito mais memória,
desempenho e rapidez. Sem o preparo
adequado, o site poderá sair do ar e
causar enorme prejuízo para todos
Em casos de venda de ingressos para
shows, o cloud computing é ideal
Existem
modelos que
cobram pelo uso
da máquina, em
que é preciso
controlar
o consumo
os envolvidos, mas passado o pico, é
hora de retomar a rotina. Lojas virtuais
também deparam com esse cenário que
demanda crescimento momentâneo em
períodos como Natal, Dias das Mães
e Dia dos Namorados. Outro aspecto
positivo é a flexibilidade e a agilidade
para ajustar a capacidade do servidor
em tempo real, online, sem precisar
fazer qualquer manutenção física (algo
que leva tempo e dá trabalho para o
administrador da infraestrutura).
Cloud computing
da Locaweb
O Cloud Server Pro, produto de cloud
computing da Locaweb que nasceu em
2008 e já está em sua segunda geração,
é uma solução robusta e elástica para o
ambiente de TI.
É robusta porque comporta hospedar
sites e aplicações web, como lojas
virtuais, bancos de dados, sistemas
de gestão empresarial e aplicativos
de forma geral, com alto desempenho,
disponibilidade e segurança,
graças à exclusividade garantida de
processamento, memória e espaço em
disco para cada usuário.
Elástica porque uma das principais
características do Cloud Server Pro
é a flexibilidade para configuração
e reconfiguração dos servidores,
que permite aumentar e diminuir a
capacidade das máquinas de acordo
com a demanda. Isso significa que não
é mais necessário superdimensionar
a infraestrutura – e pagar mais por ela
– prevendo o crescimento em médio e
longo prazos. Basta ajustar os recursos
conforme precisar, o que é ideal para
empresas que estão em ascensão.
A solução oferece um custo-benefício
adequado para a realidade das empresas
brasileiras. Empreendedores e pequenos
empresários podem escolher seu
servidor entre 1 e 32 GB de memória,
que já vem com 50 GB de espaço em
disco e 175 GB de transferência de dados
por mês, o que supera a capacidade
computacional de diversos servidores
dedicados disponíveis no mercado. E
tudo isso a partir de uma mensalidade
fixa, que começa em R$ 149. “O
Cloud Locaweb faz uma empresa ter
acesso à infraestrutura de TI de uma
multinacional apenas nos momentos
necessários, podendo voltar ao seu porte
original utilizando apenas o que precisa,
administrando de forma inteligente o
servidor, com tecnologia e segurança”,
finaliza Camila.
APLICAÇÕES DO
CLOUD SERVER
• Backup de arquivos: é possível
jogar os arquivos para a nuvem e deixar
todos os documentos da máquina salvos,
podendo acessar quando e de onde
quiser. Basta se conectar à internet e ter
acesso a tudo.
• Instalação de software e
aplicativos: permite instalar todos os
programas que quiser e trabalhar de
qualquer lugar. Ótimo para ocasiões como
reuniões e viagens de trabalho.
• Disco virtual: o cloud também pode
ser utilizado como disco virtual, FTP, file
server, entre outros. Também é opção
para transferir arquivos pesados, projetos
completos ou apresentações extensas.
• CRM: ficou mais fácil instalar o
próprio CRM, como intranet exclusiva,
sistemas de gestão financeira, gestão de
vendas, gestão de call center, logística
e administração de processos internos,
por exemplo.
• Lojas virtuais: construir uma loja
virtual em um ambiente cloud garante
aumento de capacidade e memória
do servidor conforme o crescimento e
oscilação das vendas.
locaweb49
Cloud.indd 49
12/5/12 6:55 PM
wordpress
Seu blog
de cara
nova
Confira dez modelos gratuitos
oferecidos pelo WordPress
para criar sites pessoais
arrasadores com facilidade e
em pouco tempo Por Bianca Bellucci
E
ntre os maiores
blogs do mundo, 48%
usam a plataforma
de publicação WordPress,
segundo pesquisa realizada
pela Pingdom, empresa de
monitoramento e segurança
de web. Além disso, a
ferramenta de CMS divulgou,
recentemente, que abriga
mais de 50 milhões de blogs.
São muitos os motivos
que levam o WordPress a
ser o sistema de publicação
queridinho dos internautas.
Fatores como ser totalmente
gratuito e ter código aberto
para ser modificado conforme a
vontade do blogueiro contribuem
significativamente para o seu
sucesso. Além disso, o painel
com fácil acesso a todas as
ferramentas disponíveis faz com
que leigos se transformem em
experts em blogs em questão de
segundos, o que o torna atraente.
Outro ponto positivo é a
variedade de temas disponíveis
para uso, algo fundamental em
uma página pessoal, que deve
ser personalizada de acordo com
os interesses de seu proprietário.
O WordPress traz várias
opções de templates gratuitos
e também alguns pagos, que
podem ser facilmente instalados
durante a criação do blog ou
posteriormente.
Se o usuário souber usar
HTML ou CSS, pode transformar
um simples modelo em algo
personalizado e original. Agora,
se não tiver habilidade para
criar um tema próprio, não há
com o que se preocupar, pois
sobram opções – de muito bom
gosto – prontinhas na plataforma
de CMS para serem aplicadas.
Veja dez templates gratuitos
selecionados pela redação para
criar blogs arrasadores com
rapidez e eficiência.
1
RETRO MACOS
Este tema é uma homenagem
ao antigo MacOS. O usuário que
optar por este template levará seu
leitor para dentro de um universo
paralelo, como se a interface do
computador nunca tivesse sido
atualizada e as cores preto, branco
e cinza fossem as únicas existentes.
Na parte superior da tela, o nome
do blog aparece ao lado do símbolo
da marca. Os ícones disponíveis na
lateral direita são representações
de símbolos que eram usados
pelo sistema da Apple. Os posts
aparecem dentro de uma caixa de
mensagem e as setas grandes dão
mais realidade à representação do
sistema. Um problema do modelo
é que ele chama mais atenção do
que os posts. Assim, o leitor pode
entrar no blog e ficar deslumbrado
com o modo fiel como foi retratado
o MacOS e pode acabar se
esquecendo de ver o conteúdo.
50locaweb
WordPress.indd 50
12/3/12 12:00 PM
2
wordpress
ENTERPRISE
Com base em uma linha totalmente contrária
ao Retro MacOS, este tema é um dos mais
básicos que o WordPress oferece. Além de
levar o nome da famosa nave espacial da
série norte-americana Star Trek, ele consegue
agradar a praticamente todo tipo de leitor
graças à sua simplicidade. O que pode
incomodar o usuário que escolher o modelo é
a faixa preta que aparece bem abaixo do nome
do blog. Ela parece uma intrusa em meio ao
fundo branco e acaba deixando a página com
aparência pesada.
3
SIGHT
Com fundo escuro e área para posts em
branco, este tema vale a aposta. O nome
do blog é o que mais chama a atenção no
template ao parecer uma manchete de jornal.
Mesmo se for usado com tema-padrão com
fundo preto, funciona muito bem e não deixa a página
com aspecto pesado. É voltado para o usuário que não
quer ter trabalho na hora de escolher cores e opções
para usar em seu blog. O que incomoda neste tema é o
fato de o usuário não poder usar o slogan do seu blog.
Dependendo do tamanho do nome do site, o slogan
irá se sobrepor e o visual ficará desleixado. Então,
caso opte por este tema, tire o slogan. Com relação ao
conteúdo, o blog parecerá um jornal, pois o template
lembra bastante os periódicos.
MONOCHROME
4
WordPress.indd 51
Ao combinar cores básicas como preto,
branco e azul, este tema mostra-se muito
elegante. Ao contrário da faixa preta que
aparece no Enterprise e deixa a página
pesada e desajustada, aqui há uma moldura
preta que dá destaque e torna o blog mais
chamativo. O fato de não ser um quadrado
perfeito e não envolver corretamente a parte
branca dá mais originalidade ao tema. Há
também pequenos detalhes interessantes,
como os dois menus superiores – Home
e About –, que ficam na cor vermelha
quando selecionados. O ícone localizado no
canto inferior direito, chamado Return top,
também é de grande serventia para o leitor.
Depois de verificar todos os textos, ele pode
simplesmente clicar no ícone e retornar
para o topo do blog.
locaweb51
12/3/12 12:00 PM
CHOCO
Apesar de o nome remeter a chocolate,
este tema não é inspirado no doce, mas
tem cor marrom. É muito parecido com
uma agenda. Parece que a capa é feita
de couro e que seus posts ficam dentro
de uma das páginas. A data que aparece
ao lado esquerdo da tela simula uma tira
de couro. O pontilhado que traça toda a
volta da agenda e da data também leva
o usuário a pensar na textura. Os tons
variantes de marrom, por sua vez, dão
profundidade e deixam a página elegante
e convidativa. E o melhor de tudo é que o
fato de ser tão rico em pequenos detalhes
e levar o leitor a imaginar que está lendo
uma agenda, ou até mesmo um diário, não
tira a atenção dos posts, ao contrário do
que ocorre com o Retro MacOS.
5
FLEUR DE LYS
O destaque deste tema fica por conta
da flor-de-lis desenhada no canto
superior esquerdo. Infelizmente, o
nome do blog perde sua importância
para o desenho ao ser deslocado
para o lado direito da tela e ter
uma fonte pequena. As cores
usadas neste modelo são neutras:
predominam as tonalidades cinza,
marrom e pouquíssimo vermelho. A
mesma flor desenhada em destaque
aparece para separar os posts. Outro
diferencial é que o menu se localiza
ao lado esquerdo – quase todos os
outros temas o posicionam à direita.
6
GIGAWATT
7
Com um plano de fundo parecido com a
textura de um papel reciclado, este tema é
simples e charmoso. É um dos únicos que não
usa a cor preta em nada. Predominam tons de
cinza, marrom e branco. É bem discreto, feito
para quem gosta de visuais básicos, mas sem
ser tão simples quanto o Enterprise. O fato
de ter apenas algumas linhas para separar o
conteúdo, sem muitos detalhes para confundir
com o texto, é um ponto extra. Ao se fixar no
plano de fundo, o leitor consegue perceber
a textura do background, como se estivesse
realmente tocando em um papel reciclado.
E embora tenha essa característica bem
marcante, o visual não interfere com o que será
postado nem tira a atenção do internauta.
52locaweb
WordPress.indd 52
12/3/12 12:00 PM
8
wordpress
MONSTER
Este é um dos temas mais divertidos do WordPress. O
padrão vem com um desenho de Frankenstein, mas é
possível usar outros monstros e insetos para enfeitar
a página, como vampiros, aranhas, Jack Lanterna e
caveiras. Infelizmente, mudar a opção do monstro
não mudará a cor do sangue escorrendo no topo da
página. Tudo neste modelo lembra Halloween. Há
teias de aranhas nos cantos superiores e as fontes
apresentam estética à la Tim Burton. Este tema é
mais voltado para datas comemorativas do que para
ser usado permanentemente no blog – embora nada
impeça que você faça isso.
RETRO-FITTED
É um dos temas que mais abusa de
cores, misturando azul, laranja e branco.
É feito para quem não tem medo de
usar combinações chamativas, apesar
de o layout ser básico. O criador deste
template teve bom-senso ao abusar
das cores por um lado e, por outro,
manter a simplicidade do modelo. O
menu à direita é separado por caixas
quadradas bem simples, e o conteúdo
também aparece dentro de um simples
quadrado. O plano de fundo pode ser
mudado também, apesar de a cor neutra
ser a melhor opção de contraste com os
tons que ressaltam a página.
9
SPLENDIO
10
WordPress.indd 53
O Splendio é um template
que apresenta uma paleta
de cores com tons pastéis. A
cor mais forte que aparece é
o preto no nome do blog, que
infelizmente não pode ser
mudado – apenas quando
você posiciona o mouse
em cima ele fica laranja.
Outro ponto interessante
neste tema é que existe a
opção de usar imagens de
prédios no cabeçalho, o que
contribui para o aspecto
geométrico que toma conta
da página. A combinação
do azul-claro com laranja é
bastante harmoniosa.
locaweb53
12/3/12 12:00 PM
54locaweb
Tecnologia.indd 54
12/3/12 12:05 PM
lwtecnologia
Apple x
Samsung
A guerra do século 21
Batalha das multinacionais que mais apresentam
novidades tecnológicas atualmente sai das
prateleiras e vai parar nos tribunais Bianca Bellucci
A
disputa entre Apple
e Samsung sai das
prateleiras e vai parar na
justiça. Há algum tempo, as duas
concorrentes estão se processando
por causa de patentes. A Apple
diz que a empresa coreana usou
indevidamente suas patentes em
tecnologia e design do iPhone
e do iPad em produtos da linha
Galaxy. Enquanto isso, a Samsung
processou a empresa norteamericana com a justificativa de
que violou as patentes de sua
tecnologia 3G.
Em agosto passado, um desses
processos chegou ao fim. A Samsung foi
condenada a pagar uma multa de pouco
mais de US$ 1 bilhão para a Apple por
infringir seis das sete patentes pela
qual estava sendo acusada. A empresa
da Coreia do Sul até tentou usar como
evidência no processo o filme 2001:
Uma odisseia no espaço, alegando que
o protótipo que aparece no longa era
um tablet. Para a juíza que cuidava do
caso, a ideia não colou. Esse, porém, foi
só um capítulo da guerra entre as duas
potências, que parece não ter data para
acabar. A boa notícia é que, ao menos
por enquanto, quem tem ganhado
com essa disputa é o consumidor, que
encontra cada vez mais no mercado
produtos com tecnologia inovadora e
preços acessíveis.
A empresa da maçã
Para entender um pouco mais a
disputa entre a Samsung e a Apple,
vale a pena se aprofundar na história
das duas empresas. O grupo da maçã
foi fundado em 1967 por Steve Jobs,
Steve Wozniak e Ronald Wayne.
Originalmente, foi batizado de “Apple
Computer”, e seu logotipo ainda não
era a famosa maçã mordida, mas
Isaac Newton sentado embaixo de
uma macieira. O foco da empresa era
a produção de computadores – os
primeiros modelos foram criados no
porão de Jobs.
BATALHA DE GIGANTES
Confira detalhes dos grupos Apple e Samsung,
grandes pilares tecnológicos da atualidade:
Apple
Base: Califórnia, EUA
Faturamento:
US$ 128 bilhões em 2011
Funcionários: 60.400
Principais produtos: iPhone, iPad,
iPod, MacBook
13º relatório anual de Melhores
Marcas Globais da Interbrand em
2012: 2º lugar, valendo US$ 76.568 bilhões
Samsung
Base: Seul,
Coreia do Sul
Faturamento: US$ 12,198 bilhões em 2011
Funcionários: 344.000
Principais produtos: Galaxy Note,
Galaxy Tab, Galaxy S III
13º relatório anual de Melhores
Marcas Globais da Interbrand em
2012: 9º lugar, valendo US$ 32.893 bilhões
locaweb55
Tecnologia.indd 55
12/3/12 12:05 PM
lwtecnologia
Dentro de uma sequência de
criações, destaca-se o Lisa (1983) e o
Macintosh (1984). O Lisa foi o primeiro
computador a ter mouse e interface
gráfica, mas custava absurdos
US$ 9.995 e seu lançamento foi um
grande fracasso. Já o Macintosh,
equipamento pioneiro da linha Mac,
atingiu um grande sucesso de vendas
logo de cara por ser muito bonito, mas
seu fraco desempenho logo o tirou da
lista de desejos dos usuários.
O baixo número de vendas fez
com que Jobs e John Scully, na época
presidente da Apple, tivessem algumas
brigas que resultaram na saída de Steve
em 1985. Em 1997, o CTO da Microsoft,
Nathan Myhrvold, fez uma previsão
sobre a empresa: “A Apple já está
morta”. Dez anos depois, o grupo lançou
nada menos que o iPhone, o primeiro
smartphone do mercado. O resto da
história todo mundo conhece.
No mesmo ano em que Nathan fez
a cova da concorrente, Jobs voltou após
a Apple comprar a empresa que ele
criara quando havia saído, a NeXTStep.
Assim, a Apple saiu do fundo do poço e
lançou produtos inovadores em cascada.
Primeiro o iPod em 2001, depois o
iPhone em 2007 e por último o iPad em
2010. A essa altura, a Microsoft já não
era mais sua grande concorrente: a
ameaça agora vinha da Ásia!
inaugurando uma fábrica em Portugal
e um escritório na Alemanha. Nas
décadas seguintes, a marca passou a ser
considerada sinônimo de alta tecnologia,
trazendo sempre ao mercado produtos
inovadores, como a primeira TV LCD e o
primeiro celular com câmera.
Essa alta tecnologia da Samsung
pode ser atribuída à sua seleção de
funcionários. A empresa investe tanto
em capacitação profissional que 25%
dos seus empregados têm grau PhD.
A batalha com a Apple começou
quando a empresa coreana ganhou
notoriedade no mercado de
smartphones, em 2009, graças ao
lançamento de seu primeiro celular
com sistema Android, o Galaxy i7500.
Em 2011, saiu do forno o Galaxy S II,
apontado por muitos como o grande
competidor do iPhone. O lançamento do
Galaxy Tab, concorrente direto do iPad,
só serviu para aumentar a rivalidade
entre as duas companhias e criar fãs de
carteirinha de ambos os lados.
Apple x Samsung
Para a dona do iPhone, a rival
copiou o design de seus aparelhos,
de alguns aplicativos e até mesmo
da embalagem de seus produtos
Em agosto de 2011, a Apple entrou
na justiça contra a Samsung alegando
que o Galaxy Tab e o Galaxy S II
violavam algumas patentes da empresa.
De acordo com o grupo da maçã, a rival
A multinacional
coreana
Fundada por Byung Chull Lee em
1938, a Samsung, inicialmente, era
voltada para o ramo de exportação.
Suas especialidades, para surpresa
de muitos, eram peixe seco, vegetais
e frutas coreanas. A atual arquiinimiga da Apple só ganhou forma
no mercado tecnológico em 1969,
quando uma divisão da empresa,
chamada, Samsung Eletronics, passou
a produzir aparelhos eletrônicos.
O primeiro produto exportado da
marca foi um aparelho de televisão em
preto e branco. Em 1982, a Samsung
passou a trabalhar em escala global,
Tecnologia.indd 56
Empresa coreana usou
reprodução do filme 2001: Uma
odisseia no espaço para se
defender em processo: não colou
12/3/12 12:06 PM
lwtecnologia
copiara o design de seus aparelhos
e também de alguns aplicativos,
além do formato dos carregadores de
bateria, dos cabos, dos conectores
e até mesmo da caixa em que os
produtos eram entregues.
Durante o julgamento,
a Samsung apresentou um
documento que comparava os
produtos dela aos da Apple.
Surpreendentemente, foram
apresentados os mínimos
detalhes em relação ao iPhone.
O documento alegava que o
Galaxy Tab não era uma cópia
do iPad. A prova disso, segundo
a Samsung, era que os números
da calculadora embarcada no
equipamento eram mais grossos
do que os do tablet da Apple.
Muito pouco para a juíza do
caso, que deu ganho de causa à
empresa da maçã.
Não contente, a Apple
entrou, em agosto de 2012, com
mais um processo para barrar
a venda da linha Galaxy em
30 países da Europa. O motivo,
novamente, era a violação de
patentes. A ação foi revogada quando
a Samsung alegou que a empresa
californiana teria usado provas falsas.
Vale lembrar, entretanto, que, em
setembro de 2011, o Galaxy Tab foi
proibido de ser vendido na Alemanha
por causa das patentes violadas. Em
fevereiro deste ano, porém, ele voltou
a ser comercializado, apesar de a
Alemanha ter sido o último país a anular
a ação. Os Estados Unidos, a Holanda
e a Austrália também deixaram de
vender os produtos da Samsung por
determinado tempo.
A empresa coreana não deixou
barato o fato de quase ter sido proibida
de comercializar seus produtos na
Europa. Por conta disso, entrou com
uma ação na Itália, na França e na
Holanda alegando que a Apple tinha
violado as patentes de sua tecnologia
3G ao adotá-las no iPhone e iPad.
Nenhum dos países, no entanto, deu
Quem sai
como vencedor
nessa guerra
de patentes é
o consumidor,
que recebe
cada vez mais
novidades
tecnológicas
Ao lançar o Galaxy S III,
seu novo smartphone, a
Samsung fez uma propaganda
provocando a Apple
continuidade ao processo. Depois
de todas essas idas e vindas, o fato é
que a rivalidade está longe de acabar.
Recentemente, após o lançamento do
iPhone 5, a Samsung publicou uma
propaganda provocativa comparando o
seu smartphone ao da Apple. Na peça,
a coreana mostra que seu Galaxy S III
é melhor que o novo aparelho da norteamericana e que não era preciso ser um
gênio (apelido dado para os funcionários
da Apple) para criar um smartphone.
E o vencedor é...
Enquanto Apple e Samsung travam
batalhas árduas nos tribunais, seus
produtos continuam chegando às
prateleiras com mais inovação e alta
tecnologia. E quem sai vencedor nessa
guerra de patentes é o consumidor.
Não à toa, o smartphone mais
recente lançado pela Samsung, o
Galaxy S III, chegou ao mercado
em maio com o propalado sistema
Android 4.0 (Ice Cream Sandwich)
e a eficiente interface TouchWiz
4.0, gerando grande expectativa de
vendas – a ideia do grupo coreano era
comercializar 19 milhões de unidades
até o final de setembro, mas 20
milhões de unidades foram vendidas.
O aparelho já pode ser encontrado nas
lojas brasileiras, porém apenas na versão
16 GB – as de 32 GB e 64 GB ainda não
estão disponíveis no País. A atualização
para o Android 4.1 (Jelly Bean) já pode
ser feita no aparelho.
Em setembro, a Apple contra-atacou
com o anúncio do iPhone 5. Mais fino e
leve e maior que o seu irmão 4S, trata-se
do primeiro equipamento da linha a ser
compatível com a rede 4G. Foi lançado,
primeiramente, nos EUA, Canadá, Reino
Unido, França, Alemanha, Austrália,
Japão, Hong Kong e Cingapura e teve
2 milhões de unidades vendidas em 24
horas. Aqui no Brasil, espera-se que ele
chegue ainda em 2012 e há rumores de
que o Siri, sistema de reconhecimento
de voz, venha em português.
Para mostrar que tem fôlego de
sobra, a Apple lançou o iPad mini, que
se tornou mais um objeto de desejo.
E agora, será que a Samsung vai
deixar barato? Os fãs de tecnologia
não perdem por esperar a próxima
batalha das gigantes.
locaweb57
Tecnologia.indd 57
12/3/12 12:06 PM
lwprogramação
Serviço: JQuery
Nível técnico: Iniciante/Intermediário/Profissional
Design com jQuery
Muito conhecida quando o assunto é desenvolvimento,
a biblioteca também oferece vantagens na melhoria da
interatividade e do visual de páginas eletrônicas Felipe Magalhães
SITE
A página ao lado
foi criada por meio
do plugin Isotope,
que oferece ao
desenvolvedor a
possibilidade de criar
sites com o jeitão
quadrado do Windows 8
D
esde o próprio
jQuery UI até
os incontáveis
recursos adicionais
existentes para a
biblioteca, muitas das
páginas que se destacam
pela usabilidade e design
agradável usam recursos
baseados em jQuery.
Nesta reportagem, serão
apresentadas algumas
das muitas alternativas
existentes para realizar
melhorias em suas
páginas por meio dessas
bibliotecas.
Isotope
http://isotope.metafizzy.co/
O Isotope é um plugin
para jQuery que auxilia
a montagem de layouts
flexíveis para páginas
web em um modelo baseado
na tabela periódica. Ao
Com o Isotope, é possível
interagir com o conteúdo,
filtrando informações
utilizar esse plugin, é
possível estruturar páginas
com um visual semelhante
ao da interface metro,
utilizada no Windows 8, por
exemplo. Ambos se baseiam
em caixas de conteúdo.
Além de organizar
conteúdo, com o Isotope
também é possível
interagir com o conteúdo,
reorganizando, filtrando,
adicionando e removendo
informações. Por padrão, os
elementos são dispostos na
tela de maneira inteligente,
analisando a melhor
maneira de preencher o
espaço existente (layout
masonry). Existem ainda
outras opções, como fitRows
– nele os elementos da tela
se estendem em linha até o
final do espaço disponível
na tela e, a partir daí, é
criada uma nova linha para
comportar os elementos
restantes, até que todo
o conteúdo tenha sido
encaixado. O fitColumns
faz o mesmo que o fitRows,
porém disponibiliza o
conteúdo em colunas. O
Isotope atua sobre um
contêiner com itens
similares (em geral, divs),
que devem ser referenciados
de acordo com o id ou com a
58locaweb
ProgramacaoJQuery.indd 58
12/3/12 12:08 PM
lwprogramação
classe aplicada, podendo sofrer efeitos
de animação.
O site do plugin possui vários
exemplos de possíveis combinações
entre as possibilidades existentes na
ferramenta – apesar de não haver uma
documentação muito clara.
jQuery Fancy
Transitions
http://workshop.rs/projects/
jqfancytransitions/
Entre as várias bibliotecas que
auxiliam na criação de galerias de
imagens com efeitos, uma que merece
destaque é a Fancy Transitions. A
utilização é simples e os efeitos visuais
são atraentes. A seguir, veja um
exemplo e mais detalhes deste plugin:
<script src="js/jquery.min.js" type="text/
javascript"></script>
<script src="js/jqFancyTransitions.1.8.min.js"
type="text/javascript"></script>
<script>
$(document).ready( function(){
$('#galeria').jqFancyTransitions({ width:400,
height: 300, effect: 'zipper', direction:
'fountainAlternate', navigation:'true'});
});
</script>
</head>
<body>
<div id='galeria'>
<img src='fotoPraia1.jpg' alt=
'Foto da Praia' />
<img src='neve.jpg' alt='Alaska' />
<img src='croacia.jpg' alt='Europa' />
</div>
</body>
A personalização dos efeitos
de transição é feita por meio de
diversas características. As mais
importantes e que merecem destaque
estão listadas a seguir:
effect: define qual será o efeito de
transição entre as imagens, aceitando os
valores wave, zipper e curtain.
width e height: dimensão do
contêiner da galeria.
strips: o efeito da transição é
realizado por meio de faixas que
vão revelando aos poucos a imagem
seguinte da galeria. Neste atributo, o
Entre as várias
bibliotecas
que auxiliam
na criação de
galerias de
imagens, a Fancy
Transitions
merece destaque
desenvolvedor define a quantidade de
faixas que irão compor a transição.
delay: intervalo entre a transição de uma
imagem para a outra (em milissegundos).
stripDelay: intervalo entre a exibição
de cada faixa (em milissegundos).
titleOpacity: opacidade com a qual
será exibido o atributo title da imagem.
De 0 a 1.
titleSpeed: velocidade da exibição do
atributo title da imagem.
position: posição de início da transição,
aceitando os valores top, bottom,
alternate e courtain.
direction: direção do efeito, aceitando
os valores left, right, alternate, random,
fountain e fountainAlternate.
navigation: aceita true ou false e é
onde define se será exibida uma barra
inferior que possibilita a navegação entre
as imagens.
Exemplo de página com o jqFancy: biblioteca permite
desenvolvimento de sites com efeitos visuais simples
links: por default, as imagens não são
linkadas. Caso este atributo esteja como
true, será possível clicar na imagem para
acessá-la por sua URL.
locaweb59
12/3/12 12:08 PM
lwprogramação
JQuery
jQuery Collapse
http://webcloud.se/jQuery-Collapse/
Esta tem utilidade simples, bastante
fácil de construir. Entretanto, ela
potencializou o efeito de expandir e
recolher seções de uma página. Ela
permite aplicação de efeitos CSS 3,
binding de eventos e outros efeitos
visuais de forma prática e muito
simples. Basta, além de você adicionar
a referência ao plugin, informar o
atributo data-collapse nas divs que
receberão o efeito.
<script src="jquery.min.js"></script>
<script src="jquery.collapse.js"></script>
<script>
$(function(){
$("input, button").uniform();
});
</script>
<link rel="stylesheet" href="css/uniform.
default.css" type="text/css" media="screen"
charset="utf-8" />
</head>
<body>
<div id="exemplo" data-collapse>
<h2>Div de Exemplo</h2>
<ul>
<li>Javascript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
<h2>Segunda Div</h2>
<div>
<p>Conteúdo do segundo
painel</p>
</div>
</div>
</body>
Caso o desenvolvedor não queira
algo intrusivo em seu HTML, é possível
manipular os elementos que irão compor
seu bloco de div colapsada por meio
de Javascript. Isso é demonstrado no
exemplo a seguir:
<script>
$("#exemplo").collapse({
show: function() {
this.slideDown(60);
},
hide: function() {
this.slideUp(40);
},
accordion: true
});
</script>
Uniform
http://uniformjs.com/
O Uniform é um plugin estilizador
de formulários, deixando os forms
da página com um visual leve e
agradável de maneira prática. Para
aplicar a estilização do formulário,
basta acrescentar o javascript e o CSS
baixados da página do projeto em seu
HTML e referenciar os elementos que
terão o estilo aplicado por meio de
nome do elemento, classe ou id, com a
mesma sintaxe do jQuery. A estilização
se dá toda por meio da técnica de
sprite aplicada às imagens que vêm no
pacote de download da ferramenta (isso
permite que você crie suas próprias
imagens para estilizar o formulário da
maneira que desejar).
<script src="jquery.js" type="text/
<script src="jquery.uniform.min.js" type="text/
<script>
$(function(){
$("input, button").uniform();
});
</script>
<link rel="stylesheet" href="css/uniform.
default.css" type="text/css" media="screen"
charset="utf-8" />
</head>
<body>
<form action="pagina.cfm"
method="post">
<input name="texto" type="text"
value="Olá!" size="20" maxlength="20" />
<input name="btnClique" type="button"
value="Clique aqui" />
</form>
</body>
Na página do Uniform ainda é
possível que você envie um tema
criado para que eles aprovem e
possam disponibilizar para os outros
desenvolvedores. No endereço http://
uniformjs.com/themer.html, existe um
gerador de tema, onde você pode definir
medidas para as imagens que irão
compor a figura principal deste plugin
(em que é aplicada a técnica de sprite).
A página não só gera o código como
também orienta a maneira com a qual
deve ser salvo o documento.
Vale conferir:
jQuery UI (http://jqueryui.com/) –
obviamente, é a biblioteca de interface
mais famosa, por fazer parte do próprio
projeto do jQuery. Tem uma vasta
variedade de elementos, personalizações
e interatividade.
FitVids (http://fitvidsjs.com/) – um
plugin para jQuery no qual os vídeos da
sua página se adaptam de uma melhor
maneira ao espaço existente.
Grumble.js (http://jamescryer.
github.com/grumble.js/) – plugin
para jQuery que possibilita a criação e
estilização de tooltips mais poderosos.
FerroSlider (http://www.
alessandroferrini.it/lab/jQueryPlugins/
ferroSlider/docs/index.php) – poderoso
plugin para efeito de slide entre
elementos em várias direções, com
foco maior em webpages desenvolvidas
para aparelhos móveis.
60locaweb
12/3/12 12:08 PM
lwprogramação
Serviço: Desenvolvimento
Nível técnico: Iniciante/Intermediário/Profissional
Conheça o TypeScript
Com a popularização do HTML5 e do CSS3, o Javascript teve de
se reinventar para evoluir. O resultado você vê aqui João “Jotaefe” Felipe
OPÇÃO
O Google criou o Dart,
que tem o intuito de
teoricamente realizar
a mesma ação que a
linguagem CoffeScript,
com uma sintaxe um
pouco diferente e
outros recursos
J
avascript é
considerada umas
das linguagens
mais populares do
mundo. E, mesmo assim
(e muito antes do Steve
Jobs direcionar o foco
de desenvolvimento ao
HTML5), desenvolvedores
Javascript já sofriam
muito para construir
aplicações de grande
porte devido à falta de
recursos da tecnologia.
O mercado foi ficando
cada vez mais forte em
razão da popularização do
HTML5 e o CSS3. Com
isso, a necessidade de
que o Javascript evoluísse
aumentava cada vez mais.
Assim, foram
aparecendo alternativas
para a linguagem. Como
exemplo, é importante
se lembrar da iniciativa
de um comitê chamado
TC39 (http://www.ecmainternational.org/memento/
TC39.htm), que visa finalizar
A Microsoft, sabendo da
necessidade de evoluir o
JS, criou o TypeScript
o ECMAScript6 – a evolução
do Javascript que contém
recursos para facilitar
o desenvolvimento de
aplicação de grande porte.
Enquanto o ECMA não é
finalizado, algumas soluções
foram aparecendo no
mercado, como desenvolver
diretamente em C# .NET
utilizando Script#, JSIL,
SharpKit ou Saltarelle, que
no fim gera Javascript.
Outras alternativas utilizam
códigos back end para gerar
Javascript.
Com o amadurecimento
do mercado, outras soluções
começaram a ganhar
status em algumas áreas.
A iniciativa open source
chamada CoffeScript
(http://coffeescript.org) é
uma delas. Trata-se de uma
linguagem que facilita o
desenvolvimento de grandes
aplicações contendo
recursos não existentes
no Javascript. E, ao ser
compilada, gera Javascript.
O Google criou o Dart
(http://www.dartlang.
org) que tem o intuito
de teoricamente realizar
a mesma ação que o
CoffeScript, porém com uma
sintaxe um pouco diferente
e alguns outros recursos.
Por fim, a Microsoft,
antenada nesta necessidade
de evoluir o Javascript, criou
o TypeScript. A iniciativa
62locaweb
ProgramacaoTypeScript.indd 62
12/3/12 12:10 PM
lwprogramação
Imagem mostra como instalar e
compilar o TypeScript com o NodeJS
nada mais é do que se propõe o
ECMAScript6: criar uma linguagem
que ao ser compilada gere Javascript.
O TypeScript tem como arquitetochefe ninguém menos que Anders
Hejlsberg. Ele não é novo no ramo de
desenvolvimento. É um engenheiro de
software dinamarquês que participou
de projetos como o Turbo Pascal na
Borland, Delphi, J++, plataforma .Net e
o C# na Microsoft. É também autor de
vários livros sobre C#.
Para entender um pouco melhor
como funciona o TypeScript, devese lembrar de que simplesmente
criar uma nova versão do Javascript
seria complicado. Trata-se de
uma linguagem de script que é
interpretada por meio do cliente,
no caso o navegador. Por isso, um
novo JS demandaria atualizar todas
as versões de todos os navegadores
(como Microsoft Internet Explorer,
Mozilla Firefox, Apple Safari, Opera
e Google Chrome), de forma que eles
suportassem essa nova linguagem.
Realizar isso seria um pouco
inviável. Então, para solucionar o
problema, foi criado um compilador,
chamado de TSC. Ou seja: você
desenvolve utilizando TypeScript, mas
no fim o seu navegador de internet vai
ler Javascript.
Para utilizar esse compilador,
você pode usá-lo em um plugin para
o Microsoft Visual Studio, que pode
ser baixado diretamente no site do
TypeScript (www.typescriptlang.
org/#Download), ou simplesmente
utilizar o NodeJS (nodejs.org) para
compilar seus arquivos em TypeScript.
Para quem tem facilidade com
o NodeJS, para instalar e compilar
basta fazer como na imagem no topo
esquerdo da página. Quem instalar
o plugin do TypeScript para Visual
Studio vai deparar com a tela acima
ao criar um novo projeto TypeScript.
Caso queira apenas brincar e testar
o TypeScript, é possível utilizar uma
ferramenta online e gratuita do próprio
TypeScript, chamada TypeScript
Playground (www.typescriptlang.org/
Playground). Nela, pode-se compilar
códigos TypeScript verificando como
eles ficam escritos em Javascript. A
ferramenta ainda conta com recurso
O TypeScript tem
como arquitetochefe ninguém
menos que
Anders Hejlsberg
– especialista em
Turbo Pascal e
plataforma .NET
de auto build, que mostra se o código
TypeScript está certo ou errado.
Além de utilizar o Visual Studio
com IDE (Integrated Development
Environment) de desenvolvimento
e o TypeScript Playground, há
alternativas com suporte ao
TypeScript, como o SublimeText,
Emacs IDE, VIM e o Cloud9.
Os três primeiros necessitam
de plugins para funcionar. Eles
podem ser baixados em blogs.
msdn.com/b/interoperability/
archive/2012/10/01/sublime
locaweb63
12/3/12 12:10 PM
lwprogramação
TypeScript
Código-fonte
do TypeScript
disponível no
Codeplex
-text-vi-emacs-typescriptenabled.aspx. O último é uma
IDE Online e não precisa desta
ação. Dentro das diferenças que
o TypeScript tem em relação ao
Javascript, podem-se destacar
as seguintes:
Type Annotations
Classes
Interfaces
Modulos
Lambda Functions
Agora, é importante entender
como algum desses recursos
funcionam. Imagine que você tem
uma função que realiza a soma de
dois valores em JavaScript.
Inicialmente, o resultado seria o
desejado: 19. Afinal, os dois valores que
estão sendo somados são números.
Porém, imagine que na variável valA
fosse inserido um valor de texto. Nesse
caso, o retorno não seria o desejado.
Para solucionar isso, é possível
informar exatamente o que a função
necessita, utilizando Type Anotation.
Dessa forma, o código desenvolvido em
TypeScript ficaria assim:
Agora, há a certeza de que a
função vai receber apenas valores
numéricos. Quando é criado um arquivo
.ts (extensão do TypeScript) e ele é
compilado, automaticamente é gerado
um arquivo .js. Ou seja, ao criarmos o
arquivo calculos.ts contendo funções
em TypeScript e o compilarmos,
automaticamente será criado o arquivo
calculo.js com a saída em Javascript.
Para facilitar ainda mais, no arquivo
calculo.ts, por mais que seja uma
extensão TypeScript, pode-se utilizar
Javascript normalmente. Caso queira
utilizar TypeScript apenas em algumas
partes de seu código-fonte, não existe
nenhum problema. Você pode continuar
utilizando o jQuery e qualquer outro
plugin e framework sem problemas.
Foi adicionado no TypeScript o
conceito de módulos. Isso torna mais
fácil realizar quebra de grandes bases
de códigos em componentes. Para
demonstração, o TypeScript também
trabalha com interface para melhor
organização do projeto. Ele é open
source e a linguagem TypeScript está
disponibilizada nos termos do acordo
OWFA 1,0. Sua fonte está disponível no
CodePlex (typescript.codeplex.com),
em licença Apache 2.0.
É importante lembrar que o plugin
para o Visual Studio não está na
mesma regra. Desenvolvedores que
têm familiaridade com Java, .Net e
ActionScript (ou até mesmo quem
conhece o Jscript.Net, que foi idealizado
pela Microsoft também) vão se adaptar
tranquilamente ao TypeScript. A sintaxe
é bem similar a das linguagens citadas.
Os desenvolvedores Python e Ruby, por
outro lado,vão ter mais facilidade em se
adaptar ao concorrente CoffeScript.
O TypeScript mal saiu e já há muito
planejado para seu futuro. Como a ideia
é se basear no caso de sucesso que é
o C#, Generics é algo que a Microsoft
pretende inserir no TypeScript. Deve
também aprimorar o plugin para TS no
Visual Studio. É esperado também o
trabalho da comunidade para a criação
de extensões para outras IDE.
Como você pode trabalhar
utilizando tanto Javascript como
TypeScript, pode ficar tranquilo em
termos de desempenho e aproveitar
o máximo da produtividade da
linguagem. Caso possua dúvidas sobre
o TypeScript, é possível analisar alguns
tutoriais diretamente no website da
linguagem (www.typescriptlang.
org/Tutorial), ler a documentação
completa e ainda participar dos fóruns
de debate em www.typescriptlang.
org/#Community.
64locaweb
12/3/12 12:10 PM
kwarup.com
Para se
desenvolver
na internet,
acesse essas
páginas.
Assine já!
São Paulo: 11 3038-5050
Demais localidades: 0800 888 5088
europanet.com.br/Locaweb
An_rev_locaweb_205x275_MAR.indd 1
A Revista Locaweb é sua fonte
de informação sobre tecnologia,
novidades e tendências do
mercado. Se você não quer
perder oportunidades na web,
não perca nenhuma edição.
4/11/12 11:41 AM
lwparceirosemdestaque
//Empresas e profissionais liberais que oferecem serviços de desenvolvimento de sites
JBtec
Treetech
Agência Pulso
OMNI
www.jbtec.com.br
www.agenciapulso.com.br
Ad. Agency
www.adagency.com.br
www.treetech.com.br
www.omnigroup.com.br
Aldeia
www.aldeiacom.com.br
66locaweb
Parceiros.indd 66
12/3/12 12:01 PM
205 X 275:Layout 1 27/11/2012 10:40 Página 1
C
M
Y
CM
MY
CY
CMY
K

Locaweb37 - Você Faz o Design, Nós Executamos!

Transcrição

Documentos relacionados

O tecido com estampa tie-dye foi resgatado na

001-304_Para Sempre

áfrica do sul

Contratar Hospedagem - Locaweb

Informações para uso médIco ToxIcoloGIa

Situação de produção: o que dizer? como? para quem? com que

Contato com desenvolvedores será destaque da Locaweb na

Ainda fazendo o impossível

Viagem a cavalo é negócio incipiente no Brasil

Locaweb relança planos de Revenda de Hospedagem