andré.santana [webdesign blog]

Posts Tagged ‘dicas

Adobe Flash CS3

A maior habilidade de quem trabalha com Flash é desenvolver um filme bem produzido, com um SWF muito enxuto. Existem várias estratégias que, em conjunto, deixam o seu SWF o mais enxuto possível. Veremos algumas dicas para otimizar seu filme:

  • Não use formas simples (primitivas), procure sempre agrupar as formas. Transforme tudo que for usar mais de uma vez no filme, em símbolos (gráficos, MC e Buttons). Assim é possível uma grande redução. Não faça dois botões que apenas mudem a posição (sobe e desce). Simplesmente use o mesmo símbolo para representar os sentidos com rotação para cada instância. Quando você cria um MovieClip, ele fica na biblioteca de seu filme e o Flash incorpora todos os cálculos vetoriais no SWF final, e cada vez que você usa uma instância desse MovieClip, o Flash apenas “linka” para o item da biblioteca, deixando seu filme mais leve.
  • Importe com o tamanho já finalizado todas as imagens que usar em seu filme. Nunca reescale uma imagem dentro do Flash pois o tamanho em Kbytes continuará o mesmo. Procure sempre deixar as imagens com compactação, mesmo que seja leve. Faça o tratamento de sua imagem fora do Flash, e deixe a resolução até 72 dpi. Acima disso é desperdício, pois não é percebido nos monitores.
  • Sempre que puder, substitua uma imagem por uma forma em vetor. Bitmaps contém muitos Kbytes de informação e aumentam bastante o tamanho do SWF.
  • Nunca “quebre” (converter em curvas) um texto, com raras exceções. Principalmente fontes com muitos detalhes. O vetor final ficará muito complexo e pesado. Na maioria dos casos, o ideal é incluir a fonte em seu SWF. Porém use com cautela. Sempre que usar fontes simples como Arial, Courier ou Times New Roman, procure sempre usar as fontes de dispositivos (_sans, _serif e _typewriter) pois não são incorporadas ao filme.
  • Sempre que tiver um vetor muito complexo, com muitos detalhes, curvas e nós, faça uma limpeza suavizando bordas e eliminando detalhes desnecessários. Quanto mais nós em uma forma, mais pesado fica seu SWF.
  • Reduza ao máximo o uso de sons. Quando necessário, use o formato MP3 e altere o modo de exportação na biblioteca, para o menor tamanho possível, desde que também não comprometa a qualidade mínima aceitável.
  • Sempre que possível, utilize o carregamento dinâmico de imagens, sons e vídeo, carregando-os externamente. Assim é possível reduzir consideravelmente o tamanho de um filme, pois os elementos serão carregados durante a navegação do usuário, evitando um preload demorado.
  • Evite, sempre que possível, o uso de gradientes (degradé). Sendo inevitável, use o menor número de cores que puder.
  • Evite usar Twenning Motion e Shape (principalmente) no filme. Desde que seja possível, troque esses recursos por Action Script, que além de mais flexível e rápido, possibilita uma redução considerável no tamanho do SWF, pois a animação é executada durante a execução do SWF (run-time). Você poderá, inclusive, criar efeitos que interajam com o internauta e não simples animações pré-definidas.
  • Procure usar a ferramenta Ímã (Snap to Objects) para unir todos os pontos de um objeto, pois se estes ficarem separados (abertos), o Flash tem mais trabalho na execução, tendo que fazer vários cálculos desnecessários.
  • Reduza o número de frames desnecessários no filme. Em vários filmes são esquecidos frames inúteis. Além de aumentar o tamanho do arquivo FLA, pode comprometer o processamento do filme e tamanho do SWF também.
  • Analise seu código Action Script e, se houver duplicações, crie funções para executá-las, principalmente quando houver grande quantidade de comandos. Lembre-se sempre que, quanto mais elementos existirem no seu filme, tão maior seu tamanho será.
  • Evite usar “Break apart” em imagens ou use com muito cuidado, pois em muitos casos o tamanho do arquivo acaba ficando maior que a imagem original, mesmo que se elimine as partes desnecessárias da imagem. Isto em função principalmente do número de pixels selecionado. Ao invés disso, faça os devidos cortes em um programa de imagem e importe a imagem já finalizada.
  • Faça filmes objetivos que tenham ligação direta com o site. Muitos desenvolvedores esquecem que o internauta, geralmente, busca informações e não quer perder tempo carregando coisas inúteis, por mais “legais” que possam parecer.
  • Evite animar tudo que existe no filme. Movimentos só devem ser usados, nos itens realmente úteis e que precisam chamar a atenção ou sejam parte fundamental do contexto de seu site.
  • Faça uma limpeza na biblioteca do Fla, eliminando tudo o que não foi usado no filme. Para facilitar, o Flash tem uma função na biblioteca que seleciona automaticamente os itens que não estão sendo utilizados em seu filme. Use a função para destacar os itens e exclua. As versões mais recentes do Flash ignoram automaticamente os itens não utilizados.
  • Divida seu filme principal (SWF) em filmes menores (vários SWF) e chame-os somente quando necessário. Isto agiliza o carregamento, diminui o tamanho da animação e só exibe o que o visitante desejar. Isto possibilita uma perfeita manutenção, agilização e redução no tamanho dos seus filmes.
  • Cuidado com o uso de variáveis. É muito comum para os iniciantes, usar variável para tudo e incluir diversas variáveis para fazer coisas semelhantes que seriam possíveis com a utilização de uma única. Isto é possível com um maior conhecimento de programação. Sempre que não necessitar usar novamente uma variável, delete-a para reduzir o “consumo” de memória RAM do micro. Um número elevado de variáveis pode travar o micro. Isto dependerá, é claro, da configuração de cada equipamento, recursos disponíveis, consumo da memória por programas rodando simultaneamente na máquina e complexidade de seu filme.
  • O Flash possui uma ferramenta poderosa chamada Shared Libraries. Você pode ter uma única biblioteca com elementos que você vá utilizar repetidamente em vários filmes. Cada filme fará um link do objeto para essa biblioteca compartilhada. Esse método é extremamente eficiente ao se trabalhar com fontes, botões, etc, e caso você precise alterar algum elemento, fará apenas uma vez, na biblioteca principal. Leia a documentação do Flash para saber como usar melhor essa ferramenta.
  • Textos escritos como comentários no FLA, não são incluídos no arquivo final SWF, isso porque ele tem por finalidade auxiliar a documentação do código e facilitar sua compreensão posterior. Não se preocupe com isso.
  • Aproveite sempre os efeitos das versões mais recentes. Sempre que precisar usar sombras, efeitos de blur, glow ou blending mode, ao invés de usar bitmaps para isso. Ainda há a vantagem de animar estes efeitos.

É isso aí pessoal. Com esse “pacote” de dicas é possível construir bases de sites completos em Flash com até míseros 60Kb, aproveitando ao máximo a otimização do SWF.

Espero que tenham gostado. Até a próxima!

por Arthur Paredes

Anúncios
Tags: , , ,

desenvolvendo-web

Existe mais ou menos um consenso entre os profissionais sobre o que observar ao desenvolver um bom website. Este artigo procura reunir estes pontos, com base em uma livre interpretação de alguns protocolos e padrões da W3C.

Nosso foco está nos sites de objetivos comerciais, cada vez mais o destino de compradores e especificadores nas compras de produtos entre empresas.

Sabemos que o processo de compra pode começar de diversas formas (através de revistas técnicas, sites de buscas, portais verticais ou indicação de colegas), mas sempre o comprador acessa o website do fornecedor antes de decidir a compra. É nesta hora que a qualidade do website e das informações que oferece se tornam um fator primordial em apoio à decisão de compra.

Um bom website deve oferecer uma navegação fácil, intuitiva e rápida em função da informação que o comprador procura.

Definir objetivos claros

Antes de qualquer ação, é preciso saber o que se espera do site que será desenvolvido. Sites sem objetivos claros são confusos, dispersos e dificultam o usuário a atingir suas necessidades. Para desenvolver um novo website ou reformular um já existente é necessário responder as seguintes perguntas:

  • qual a finalidade do website?;
  • qual o público-alvo?;
  • para quê o público-alvo vai utilizar o website?;
  • quais os principais concorrentes da empresa?;
  • quais as palavras-chaves que são ou devem ser utilizadas para que compradores encontrem o website em mecanismos de buscas?

Com base nas respostas a essas perguntas é possível criar um roteiro para servir de guia durante a fase de desenvolvimento, assegurando que o mercado comprador seja atendido.

Orientar e conduzir o usuário

Durante a navegação o usuário pode se perder nas páginas. Para minimizar essa dispersão, o website deve sempre informar o usuário em que página ele se encontra, como chegou até ali e quais são suas opções de saída.

Isso pode ser feito através de algumas recomendações:

  • a página principal deve informar ao usuário onde ele está e o que o website oferece;
  • em todas as páginas oferecer um link de retorno para a página principal;
  • durante a navegação, as páginas devem informar ao usuário onde ele está, de que página veio e para aonde ele pode seguir;
  • é imprescindível existir um mapa do site para que o usuário possa se localizar em qualquer momento da navegação;

Com relação aos links:

  • devem ser auto-explicativos;
  • evitar o uso de expressões como “clique aqui”;
  • marcar como link o texto (nome da empresa, título da página, assunto etc.) e não o endereço URL;
  • apontar exatamente para o conteúdo descrito no link;
  • em caso de conteúdo fechado, para usuários registrados, indicar graficamente ao lado do link (ex.: ícone de cadeado ou chave);
  • se possuir lista de links úteis, inserir comentários sobre cada link disponível;

Usar o atributo ALT da HTML (HyperText Markup Language), com o significado das imagens para que o texto apareça enquanto estiver sendo feito o download da figura ou quando o usuário optar por suprimir figuras na configuração do seu navegador web.
Continue lendo »

dicas

Essas 40 dicas são ótimas e assino embaixo. Foram passadas para mim pelo amigo Luiz Rodrigues, aluno também do Curso Online de Design Web. A fonte dessas 40 maravilhosas dicas é a Revista “Aprenda Criar Sites” Ano III Nº12. Para quem já conhece, vale a pena ler de novo, para os que não conhecem, leiam!

1. Menos é mais:

essa máxima há muito tempo usada para a arte gráfica e o design também é válida para a Web. Ao planejar seu site, pense de forma simples. Páginas de Web rebuscadas e cheias de movimento já deram o que tinham que dar, mostrar ícones se mexendo e animações complexas não vão levar a nada, no máximo à perda de foco para o que realmente deve ser destacado em seu site.

2. Informações a dois cliques:

planeje seu site de tal forma que toda e qualquer informação deve ficar a dois ou no máximo três diques da Home (página inicia!) de seu site. A idéia é facilitar ao máximo o acesso do internauta às informações.

3. Cuidado com as animações:

com o surgimento de programas gráficos de animação como o Flash, o uso de animações se tornou indiscriminado. Os criadores de páginas na Web seguiam a linha de quanto mais animações, melhor. Hoje basta você pensar no que de fato é necessário para seu site. Use, sim, o advento da animação, mas dose e pondere com a real necessidade da utilização desse artifício.

4. Cores similares sobrepostas:

cuidado ao usar cores similares, principalmente quando elas precisam ser sobrepostas, como um logo laranja sobre um fundo amarelo, por exemplo. Por mais que em seu monitor esteja tudo claro, lembre-se de que há inúmeras variações de brilho e contraste de monitor para monitor e que aquilo que está claro para você pode surgir como uma grande imagem chapada a quem estiver acessando seu site.

5. Logomarca à esquerda:

esse já é um padrão na Internet mundial e que vale a pena ser levado em conta. Sempre que possível, use a logomarca da empresa no canto esquerdo superior do site. Esse local facilita a visão da logomarca, além de ser um dos principais pontos de atenção que as pessoas têm ao acessar um site.

6. Dê uma prévia do assunto a ser tratado:

quando se tem muito conteúdo no site, é interessante fazer um pequeno resumo na Home do que será tratado em determinada seção. Você pode fazer links em forma de manchetes, com um título da seção e uma pequena parte do texto que será tratado nela, É mais ou menos o que é feito hoje nos grandes portais da Internet.

7. Animações de abertura:

animações na abertura do site foram tendência durante um bom tempo, mas aqui também se encaixa a pergunta da real necessidade desta animação. Ela agregará informações substanciais ao conteúdo do site? Ou está lá só para “fazer uma gracinha”? Se a resposta for a segunda opção, por que não tirar essa animação e proporcionar um acesso mais rápido ao site? Mas não encare isso como uma regra, e sim como uma dica prática.

8. Caso a animação inicial se faça necessária:

só use uma animação de abertura, ou algo assim, se for de suma importância e precise ser feito. Nunca, mas nunca, deixe de incluir a opção de pular a abertura do site e ir direto ao conteúdo.

9. Contatos sempre à vista:

muita gente se esquece de uma das utilidades mais básicas de um site: gerar contato do internauta com a empresa ou pessoa dona do site. Mas como esse contato acontecerá sem que a pessoa que visita o site tenha acesso fácil a informações como e-mail da empresa, telefone e endereço? Por isso. não pense duas vezes e espalhe e deixe bem visível essas informações por todo o site.

10. Formulário de contato:

e se o contato é tão importante, incentive esse processo incluindo um formulário de contato prático e simples ao site, isso será sempre positivo.

Continue lendo »

Tags: , , ,

E-mail

Bem, depois desta charge, vamos ao que realmente interessa:

Preocupe-se com a apresentação da mensagem

Otimize o nome do remetente e assunto da mensagem. Geralmente, o nome do remetente é o que determina se o e-mail marketing será deletado. O assunto é o que motiva as pessoas a abrirem o e-mail. Já existem ferramentas de e-mail marketing que contemplam recursos para visualização de como o nome do remetente e o assunto serão exibidos em diversos provedores e programas de e-mail.

A apresentação da sua mensagem pode ser prejudicada por conta dos diversos provedores, portanto, evite o uso do CSS, Java Script e formulários. Trabalhe o formato da mensagem em uma área máxima de 450 pixels de largura e deixe a altura o menor possível para evitar barra de rolagem.

Simplifique a mensagem

Os profissionais tendem a enviar as mensagens sobrecarregadas de ofertas, provocando rejeição por parte dos destinatários. Simplifique o conteúdo. Concentre-se na mensagem principal, ela levará o destinatário ao objetivo da ação.

O topo da mensagem é visualizado primeiro, utilize-o para a identificação da empresa e para transmitir o objetivo da ação. Se a mensagem estiver clara e objetiva, será transmitida não apenas para os que costumam ler, mas também para os destinatários que visualizam rapidamente.

Não utilize apenas imagens. Deve haver um equilíbrio entre textos e imagens. Lembre-se de diferenciar as mídias offline e online. Cada uma requer sua própria abordagem.

Considere o hábito de visualização do destinatário

Seus clientes não interagem com o e-mail marketing da mesma forma que o fazem com a mídia impressa ou páginas da web. Diagrame a mensagem de forma que a informação fique pertinente com a ação.

Imagens podem ser bloqueadas em muitos programas de e-mail. Para que a mensagem principal não seja perdida, inclua sempre um texto alternativo nas imagens (Alt Tags). Não esqueça que alguns leitores de e-mail não aceitam Html, portanto, inclua sempre a versão texto (plain text).

Preocupe-se com a entrega

Lembre-se que antes de ser entregue na caixa postal dos destinatários, a mensagem é submetida a rigorosos filtros anti-spam. Existem diversos filtros e, dentre eles, há o filtro por palavras, que pontua o e-mail marketing de acordo com as palavras encontradas no texto, podendo classificá-lo como spam. Prefira ferramentas de e-mail marketing que contemplem o teste de spam. Assim, antes do envio, será possível fazer as alterações de texto necessárias, melhorar a pontuação do e-mail marketing e evitar que seja bloqueado por spam.

Respeite o seu destinatário

No processo do opt-in (permissão de recebimento de mensagens eletrônicas), ofereça sempre opções por assunto e frequência de recebimento de mensagens.

Nunca esqueça do double opt-in: envio de mensagem para confirmar e ativar a opção de recebimento. Deixe clara a sua política de privacidade.

Lembre-se que o destinatário lhe concedeu a permissão para comunicar-se com ele através do e-mail. Não abuse desse privilégio!

por: Walter Sabini Jr.


Seja Bem-Vindo!

@andrehsantana

outubro 2017
S T Q Q S S D
« abr    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

RSS Feeds Deliciosos

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.

Blog Stats

  • 240,327 hits