Feeds:
Posts
Comentários

Posts Tagged ‘HTML’

[Update fev/2013] Antes de tirar dúvidas, por favor, leia o final do artigo!

No Facebook, o perfil de minha empresa lotou. Cheguei ao limite de 5000 amigos e estou em dúvida quanto a criar um segundo perfil… Cuidado! você pode estar cometendo um grande erro!

Está na hora de rever seus conceitos e aceitar uma política do Facebook que faz todo o sentido: Com mais de 5000 contatos você deixou de ser um simples mortal e tornou-se uma entidade.

Está preparado para criar um segundo perfil, então prepare-se para o terceiro ou talvez, de uma hora para outra, nenhum.

O que aconteceu é que muitas empresas entraram com o pé esquerdo na mais popular rede social do mundo. Acredito que a “cultura” que o já quase falecido Orkut criou em nossa maneira de se relacionar pela internet, cristalizou. Isso fica fácil de constatar: quanto tempo você levou para migrar de rede? Vai dizer que não achava o Facebook chato no começo?

A regra é clara: Pessoas tem perfis, empresas tem páginas. O Facebook reserva-se ao direito de deletar um perfil que seja associado à uma marca ou represente uma, e você pode perder definitivamente seus contatos:

A conta que criei para promover meus negócios, banda ou outra organização foi desativada.
De acordo com a nossa Declaração de direitos e responsabilidades, os perfis do Facebook devem representar um indivíduo. Não é permitido que os usuários mantenham uma conta sob o nome de uma organização ou usem contas pessoais para fazer propaganda ou promovê-los profissionalmente. Se o seu perfil foi listado sob um nome de um indivíduo ou usado primeiramente para promoção profissional, esse é provavelmente o motivo pelo qual ele foi removido.
Fonte: http://www.facebook.com/help/?faq=188258584554690

Isto porque o Facebook foi feito para conectar pessoas, com nomes reais e que de preferência, se conheçam realmente. A sua empresa pode ter mais do que amigos, pode ter fãs!  Interagir com um espaço cheio de recursos que o perfil não disponibiliza.

Se você está em uma situação dessas, use as ferramentas que o próprio Facebook criou para ajudar nesta adaptação/migração.

Básico: Como criar uma página no Facebook

Se você já tem um perfil lotado, siga para o próximo tópico.

Para criar uma página, abra o link: https://www.facebook.com/pages/create.php

Quando você é dono ou administrador de uma página, é possível fazer uma troca de perfil sem precisar logar novamente. Clique em “Conta” na barra superior e em “Usar Facebook como Página”. Você pode acessar uma ou mais páginas com este procedimento.

Convertendo um perfil em página (fan page)

Faça um backup!

Seus posts, fotos e aplicativos não serão migrados! É altamente recomendável fazer um backup de seu perfil no Facebook antes da migração: Clique em “Conta” no canto superior direito, depois “Configurações” e em “Baixe suas informações”. Após alguns minutos você receberá um e-mail com o link para baixar o perfil.

Convertendo seu perfil em “fan page”

Se você tem um perfil mas ainda não tem a página e quer migrar, é fácil, crie sua página através deste link:

https://www.facebook.com/pages/create.php?migrate

Seus “amigos” serão convertidos em fãs (como se tivessem clicado em “Curtir” em sua página)  dentro de alguns minutos!

Em relação à estratégia de marketing, agora recomenda-se focar na página, oferecendo um ótimo conteúdo a seus fãs, fixando sua marca. Para facilitar as coisas, crie um endereço personalizado – isto está melhor detalhado mais adiante – e divulgue algo como “facebook.com/minha.empresa”.

Vantagens de uma página em relação ao perfil

Além de ter uma gama de possibilidades em relação à aplicativos que podem ser disponibilizados a seus fãs e ter permissão para fazer propaganda, promoções, integrar com outras redes sociais você tem algumas vantagens:

Estatísticas

Poder visualizar como está a popularidade de sua empresa através de gráficos detalhadíssimos como estes:

Sua equipe administrando a página

Várias pessoas habilitam promoções, editam e acompanham o que está acontecendo na página da empresa logando-se com seu próprio perfil do Facebook, basta adicioná-los como administradores.

  • Não existe um login e senha para acessar as configurações e edição de uma página oficial, portanto, teoricamente, não pode ser hackeada.
  • Com a própria conta, todos os administradores podem acompanhar, adicionar fotos, editar textos e iniciar ações.
Como fazer: Peça ao colaborador para curtir a página. Abra a página e clique em “pessoas que curtiram”. Encontre o perfil e clique em “Tornar Administrador”.

Endereço personalizado no Facebook

Pense nas vantagens de ter um endereço como facebook.com/minha.empresa. A credibilidade das informações e a identidade de sua empresa na rede social podem aumentar muito. E este endereço é totalmente gratuito.

Além disso, se for constatado que alguém está utilizando de modo indevido seu nome ou marca, pode-se fazer uma denúncia que é rapidamente analisada e cumprida pela equipe do Facebook. O perfil ou página falso é deletado.

Como fazer: Sua página precisa ter no mínimo 25 fãs, peça a ajuda de amigos. Se já tem, troque para página (Conta > Usar Facebook como página). Clique no botão “Editar página”,  Siga: Informações Básicas > Nome de usuário: > Se o link estiver liberado, clique nele e coloque o nome que deseja em uma caixa branca. Após 100 fãs não é possível trocar este nome.

Integração com aplicativos

É possível, como nos perfils, integrar os milhares de aplicativos disponíveis  no Facebook e outras redes sociais como o Twitter, publicações via celular e até ferramentas específicas como um aplicativo que sorteia usuários em promoções. Depende de sua necessidade e criatividade!

Customização da página

Que tal dar a seus fãs um player para escutar música, um jogo exclusivo valendo prêmios, um vídeo institucional ou promocional ou um formulário de contato direto?

O Facebook disponibiliza uma linguagem própria para os casos em que o empresa deseja adicionar conteúdo personalizado às páginas. O FBML (Facebook Markup Language), uma linguagem de diagramação como o HTML, de semântica simples possibilita e potencializa o conteúdo mostrado no perfil da empresa.

Além de utilizar o HTML normalmente, CSS e JavaScript, conheça  as tags próprias da linguagem e o que você pode fazer com elas:

http://developers.facebook.com/docs/reference/fbml/

Alimente seus fãs com conteúdo diferenciado e de qualidade, atraia mais fãs e acompanhe o resultado destas ações!

Qual é a melhor opção afinal?

A utilização de uma página oficial  (fan page) no Facebook ao invés de um perfil de usuário oferece mais vantagens do que desvantagens e abre um universo de possibilidades de divulgação e interação com seu público.

Ainda duvida? Dê uma olhada nas 50 páginas mais visitadas do Facebook.

[Update fev/2013] 

Caso você precise de consultoria para resolver um problema, esta poderá ser cobrada como serviço, pois poderá tomar tempo para pesquisa e solução, envie seu caso para análise!

Read Full Post »

Montar um layout pode trazer muita dor de cabeça, que pode se agravar caso não sejam conhecidos alguns “macetes”. No caso estou falando do CSS, uma grande ferramenta!

Utilizar qualquer ferramenta que monte o seu layout de forma automática deve ser dispensado, eles geram código desnecessário (lixo) e complicam a estrutura. O pensamento lógico utilizando CSS vai levar em conta os blocos de conteúdo. São regiões do layout, como por exemplo: logotipo, cabeçalho, navegação, menu, rodapé.

Nesta fase do projeto, quando layout, ou seja, a parte visual, já está definida, entraremos em uma esfera bastante técnica onde é preciso ter um ótimo conhecimento principalmente de HTML, que é a base de qualquer produção voltada para internet. Recomenda-se conhecer a fundo esta “linguagem”.

Ok, mais eu tenho o Dreaweaver e ele faz tudo pra mim, e eu ainda consigo ver o site como fica no browser!
 Certo, mas no dia-a-dia você fatalmente perceberá que nem sempre haverá um Dreamweaver disponível para você brincar com o editor WYSWYG (What you see is what you get) e precisará trabalhar diretamente no código. Além disso também é fácil perceber que este editor não resolve todas os problemas durante a montagem do layout, e o pior: Ele pode encher o seu código de tags perdidas, sujeira mesmo, que o deixará uma bagunça e com uma cara nada profissional.

Os posts anteriores (Web Design Metodologia I a III) falavam sobre ações conceituais e comportamentais inerentes ao projeto, e diante do cliente. Concluídas estas fases, o que resta é montar o quebra-cabeça e esta etapa você terá que cumprir por si mesmo. Tudo bem que o cliente não saberá se você fez um “xunxo” ou outro, mas estamos tentando manter um nível profissional aqui, certo?

Um web-site bem construído segue uma série de especificações e seguí-las é uma questão de bom senso. Primeiro porque seu site estará dentro dos padrões mais consistentes e utilizados na internet e também porque você criará, desde o início, o hábito de trabalhar com conceitos como palavras-chave, meta tags, robot tags, web semântica, web standards e SEO.

Devido a esta demanda técnica, iremos abandonar um pouco a metodologia em si e falaremos sobre como, passo a passo, pensar em um web-site bem construído. Fiquem atentos!

[Update 2013]

A preguiça me tirou deste projeto… não só a minha preguiça, mas a do público! Não fazer no mínimo uma pesquisa sobre os temas e termos levantados nos posts e perguntar de uma maneira “faça para mim” me incomoda. Curiosidade é o que move o mundo pessoal, estudar não tem nada haver com “instituição de ensino”, busquem conhecimento!

Read Full Post »

Reuni todo o material, queimei fosfato, pensei, pensei. Fiz um rascunho de como deveriam ser as telas, posições de menus, animações. Nem sabia que não precisava de computador! O cliente assinou a proposta, o contrato. Tudo certo! Agora é a hora, apertem os cintos e vamos lá!

Não sei vocês, mas eu já tentei criar layout de web-site até no Corel… É vício de quem trabalhou em gráfica com arte-final no início de carreira. Logo que você descobre que o Photoshop é a melhor opção, fica mais tranquilo manipular as idéias para construir uma interface.

O web-site não passa disso, uma interface. O usuário quer a informação que está no site e esta informação precisa estar organizada e acessível. É a interface que “conversa” com o nosso amigo usuário. É realmente um desafio prever como esta comunicação acontecerá e se será bem sucedida.

Quando eu crio um layout para web-site, costumo perguntar a amigos, parentes, e qualquer um que esteja por perto o que a pessoa está entendendo, vendo. Por incrível que pareça, são os menos familiarizados que podem nos passar dicas preciosas sobre as falhas do layout.

Desenhando o Layout

Entenda-se por “layout” uma representação gráfica, não funcional, do projeto, ou seja, é uma imagem estática. É esta peça gráfica que você apresentará ao cliente para aprovação.

Abra o Photoshop, um novo arquivo. Costumo trabalhar com as medidas de 750px de largura por 500px de altura (update fev/2013: a realidade agora é que cada dispositivo segue um medida e os monitores aumentaram de tamanho! baseio meus layouts para internet na medida de 900px de área útil), com resolução de 72dpi. Não adianta trabalhar com resolução maior, pois esta é a resolução que o monitor utiliza.

Estas especificações foram as que escolhi para iniciar um projeto, são escolhas pessoais, nada impede de você formar seu padrão. A largura do layout neste caso é importante para evitarmos o “scrooling“, que faz aparecer uma barra de rolagem horizontal… péssimo para quem está navegando.

Apesar de monitores com resolução de 1024px por 768px serem comuns hoje em dia, eu ainda teimo em projetar sites para o padrão 800px por 600px. É melhor pensar sempre em quem possue os recursos mais limitados de acesso (que são a grande maioria) do que os poucos privilegiados.

Procure trabalhar com as imagens com a melhor qualidade possível, para dar uma aparência profissional ao layout. Caso você tenha reduzido uma foto, utilize o “unsharp mask” no menu de efeitos para dar maior nitidez.

Coisas a pensar durante a execução do layout

Pense em continuidade do layout e posicionamento do bloco na tela. Recomendo que você pense em centralizar o layout e neste caso é bom pensar em como ele vai continuar para os dois lados.

Algo polêmico, mas impossível de deixar de lado. Sites totalmente em Flash perdem muito em velocidade, acessibilidade e o pior: O Google é cego, ou seja, não lê informações em arquivos SWF. Nada contra utilizar o Flash, mas utilizá-lo com cautela e em poucas partes do web-site é a melhor opção.

É importante também pensar em livrar-se do método de utilizar tabelas para posicionar os itens. Estude HTML e CSS, o conceito de “Tableless” nos permite um controle muito maior sobre usabilidade, acessibilidade, renderização em navegadores diferentes, outras plataformas (como palms e celulares), versões para impressão, etc. O código fica mais leve, os buscadores entendem melhor o conteúdo, isso sem falar na facilidade de fazer alterações no web-site.

Apresentando o layout

Produza uma ou duas variações para a peça gráfica. Apresentar muitas opções pode deixar o cliente confuso e a aprovação indefinida. Ao mostrar os layouts procure explicar de forma fácil e acessível, evitando termos técnicos, sobre quais foram os conceitos utilizados para gerá-lo. Fale sobre suas pesquisas, sobre os concorrentes… tente embasar o projeto para evitar comentários levianos.

Se você tiver um laptop, leve-o e apresente a imagem ao cliente. É importante também levar o layout em um pen-drive, que permita a você mostrar o layout em um monitor da empresa. Aproveite esta chance para explicar que podem haver variações de cores de uma máquina para outra.

O ideal é levar o layout impresso em papel e anotar nesta imagem todas as alterações, itens duvidosos, etc. Caso não hajam alterações, peça para que o cliente assine o papel aprovando a imagem. Esta folha pode servir como um documento atestando a aprovação.

Em caso de alterações serem necessárias, proceda da mesma forma ao reapresentar o layout. É comum também o cliente não aprovar o projeto de primeira. Ele quer conversar com sócios, funcionários, com a mãe e o pai dele e se bobear, irá parar alguém na rua para emitir uma opinião sobre o layout. Dê este tempo ao cliente e se ele não entrar em contato, cobre uma resposta após 4 ou 5 dias.

Durante a reunião de aprovação, não deixe de comentar que o próximo passo é a montagem e é preciso inserir o conteúdo (textos, imagens e fotos). Peça ao cliente para preparar este material pois isto influênciará no prazo de entrega do projeto finalizado.

Na parte IV iremos falar sobre como dar vida ao seu layout discutindo técnicas simples, como o check-list para evitar erros e refações.

Read Full Post »