andré.santana [webdesign blog]

Archive for the ‘Web’ Category

Olé galera, tudo bem com vocês?

Tem novidade no meu portifolio.

http://www.flickr.com/photos/andre-santana/

Espero que gostem!
=)

Galera, ufa! Estou a praticamente dois anos sem postar nenhuma novidade e tenho o enorme prazer em anunciar que vou voltar a blogar(!), então aguardem mais um pouquinho e em breve estarei contando o que me aconteceu nesses últimos anos. Muitas novidades e supresas, novo portifólio e muito mais.

Quem não quiser esperar pode me acompanhar no Twitter: @andrehsantana

See you guys!

Manter em sua empresa uma boa equipe de profissionais eficientes e motivados não é muito diferente do que fazem os clubes de futebol – para exigir amor à camisa ofereça alguns benefícios em troca.

Não é novidade que a rotatividade dos profissionais de internet é alta. E qual seria o real motivo deste vai-e-vem do mercado? O aspecto financeiro motiva a saída de um profissional. O ambiente da alta rotatividade dentro da empresa também, o que não é novidade. A grande questão é como reduzir o êxodo em massa da sua empresa ou até praticamente zerar este fenômeno.

Com o mercado aquecido, as propostas de contratação aparecem para os bons profissionais e poucos fatores podem fazer um profissional desistir da sua saída. Isso mesmo, desistir, pois sabemos que o mercado funciona na maioria das vezes desta forma: antes de comunicar a saída, o profissional comunica a proposta recebida para, possivelmente, receber uma contra-proposta ainda mais motivadora.

Não vejo isto como algo ruim. Mostra muitas vezes que você tem do seu lado um bom profissional que outras empresas gostariam de somar em suas equipes. É um mundo muito parecido com o do futebol e a semelhança aumenta diante da ida de muitos bons profissionais brasileiros para outros países.

É claro que a comparação tem as suas particularidades, mesmo porque as cifras também são bem diferentes. Mas, assim como no futebol, é clara a necessidade de se formar bons times e não apenas equipes.

É muito importante buscar profissionais criativos, outros com um perfil de análise para colocar o projeto no chão e alertar os criativos na hora certa, um capitão para liderar e motivar internamente a equipe e chamar a responsabilidade e, claro, um bom técnico, com habilidade e desenvoltura para propor inovações e se comunicar com os clientes nos momentos bons e ruins de um projeto.

Parece brincadeira, porém no fundo os times bem sucedidos têm essa fórmula nada mágica, mas realista.

Um bom time precisa estar bem entrosado. Os profissionais devem estar em sintonia, ter um espírito empreendedor, conseguir enxergar além do óbvio, ou, em muitos casos, enxergar pelo menos o óbvio, coisa que não acontece em muitas equipes.

Os times devem ser formados por profissionais com raça, brilho nos olhos, concentrados, que não olham o dia todo para o relógio contando as horas para o dia acabar. Um bom time cria um vínculo de amizade e as difíceis horas extra tornam-se descontraídas e produtivas. Os profissionais que formam bons times sabem a hora de cobrir o outro e carregar responsabilidades que nem sempre são deles. O velho ditado de “uma mão lava a outra” é comum em bons times.

Além disso, duas palavras são muito importantes para se formar bons times: liberdade e liberdade. O profissional tem que sentir que a empresa é parte da equipe, que sabe cobrí-lo quando necessário, até como forma de reconhecimento das vezes em que ele segura “rojões” para a empresa.

Com bons profissionais, que trabalham em sintonia dentro de um time e falam a mesma língua da empresa, a liberdade tende a somar para a produtividade, criatividade e uma duradoura relação entre o profissional e a empresa.

Outro ponto importante é o reconhecimento financeiro, com bônus e reajustes salariais antes das inesperadas e indesejadas propostas, para antecipar aquele momento em que o profissional pede uma conversa reservada, onde nem sempre sabe como justificar o que deseja. Não descuidar deste aspecto pode deixar a empresa na frente na corrida pelo bom profissional.

Estes fatores podem contribuir muito para, ao menos, minimizar a rotatividade dos seus times de trabalho. A combinação destes fatores insere o profissional em um ambiente prazeiroso para desenvolver um bom trabalho, que passa a pensar e a pesar se é mesmo uma boa escolha quebrar sua rotina em um bom ambiente para arriscar algo novo.

Não é uma tarefa fácil para o líder formar um bom time, quando muitos dos bons profissionais já estão em bons times. É como garimpar: demora muito encontrar os profissionais que irão compor o seu time de sucesso. É uma tarefa que não tem fim, mas muito compensadora quando se consegue montar um excelente time.

Por Rafael Cichini

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

Tags: , , ,

Foi divulgado hoje pelo Registro.br que o Comitê Gestor de Internet no Brasil – CGI.br liberou o registro de domínios .COM.BR apenas sob um CPF. Se você não está acreditando falarei com mais clareza. Se você existe como pessoa física neste país, poderá registrar um domínio .com.br, ponto. Esta alteração passa a valer a partir do dia 01/05/2008.

A nota publicada no Registro.br, curta e grossa, diz que esta alteração vale apenas para a TLD .com.br e domínios como .etc.br por exemplo, continuam exigindo CNPJ. Boa novidade para quem fica dependendo de amigos que tem empresa registrada para registrar o próprio domínio. E pena que esta mudança não vai valer para as outras TLD`s.

via Revolução Etc

Post muito legal, vale a pena ver. Via Stuff That Happens

Ouch!

simplicity

Clique na imagem para ampliar

=)

Comentem…

O Flash já foi um alvo de muitas críticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficiências ao gerar conteúdos acessíveis.

Bom, a Macromedia, atualmente Adobe, contratou o próprio Jakob Nielsen, autor das maiores críticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, além de novas características em outros painéis.

Vamos ver como utilizar estes painéis da forma correta, aplicando ao documento, menus e campos de texto.

Para este manual básico, estarei utilizando a versão CS3 do Flash, mas as mesmas ferramentas e painéis são encontradas nas versões MX 2004 e 8.

Acessibilizando o documento

Janela Document Properties

Para abrir esta janela, vá até o menu Modify > Document.

Para cada arquivo em Flash que for desenvolver, é importante que defina duas informações sobre o mesmo:

  1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálogo de Produtos”.
  2. Description – Neste campo faça uma breve descrição sobre o conteúdo do arquivo e seu propósito. Como por exemplo: “Conheça nossas linhas de produtos”.

Com o documento descrito, podemos começar a desenvolver nosso projeto, sabendo que já informará ao usuário que documento está acessando e qual o seu propósito.

Painel Acessibility

Com este painel, podemos gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash.

Para abrir este painel, vá até o menu Window > Other Panels > Acessibility.

Acessibilizando Textos

Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Static Text (Texto Estático)

Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem: “Current selection cannot have accessibility applied to it” ou seja: “A seleção atual não tem acessibilidade aplicada a ela”, o que nos informa que não há opções a serem configuradas para ela, veja a Imagem 3 . Mas é importante deixar ativa a opção “selectable”, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Static Text não possui configurações no painel Accessibility.

Dynamic Text (Texto Dinâmico)

Os campos de texto do tipo Dynamic Text, quando com a opção “Make object Accessible” ou seja “Torne o objeto acessível”, estiver ativada, permitirá ao leitor de tela ler exatamente o conteúdo escrito no mesmo. Mas se achar necessário poderá contar com mais duas configurações:

  1. Description (Descrição) – Utilize esta opção para definir uma pequena descrição do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicações, o que na maioria das vezes não é necessário.
  2. Tab index (Ordem da Tabulação) – Utilizado para definir a ordem que o objeto será selecionado quando o usuário navegar utilizando as teclas TAB e SHIFT+TAB.

Opções de acessibilidade para Dynamic Text.Input Text (Texto de Entrada)

No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X)HTML, onde é indicado definir um “Name” – um rótulo para o campo de texto, para que o usuário saiba o que está preenchendo, e quando for necessário coloque uma descrição no campo “Description”, como por exemplo: “Campo obrigatório”.

Além destas duas opções ainda temos os campos:

  1. Shortcut – que serve para definir um atalho, um acesso rápido ao campo, o que é feito definindo uma letra ou número, como por exemplo: “A”. O atalho para o usuário será a tela ALT juntamente com a letra ou número definido, no nosso exemplo o atalho é “ALT + A”.
  2. Tab index – No caso de formulários é muito importante definir a ordem da tabulação para que o usuário tenha uma ordem lógica definida ao preencher os campos. Caso contrário ele ficará preso à ordem de criação dos campos.

Acessibilizando Buttons e MovieClips

O termo “etiquetar” é bem conhecido por quem desenvolve conteúdo acessível, que significa identificar textualmente um elemento, o que é feito no HTML com imagens através do atributo “alt” e no Flash é feito através do painel Accessibility.

Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, é um elemento fechado e pode acarretar em não ser acessado pelo leitor de tela.Para demonstrar como etiquetar um menu de navegação, criei no Flash dois elementos utilizados para este fim, um Button, com a função de voltar e um MovieClip com a função de avançar.

A utilização do Symbol Button é para botões mais simples, sem uma animação maiselaborada, enquanto o Symbol MovieClip deve ser utilizado para botões animados e com aspectos visuais mais elaborados.

Acessibilizando um Button

O Button tem as mesmas opções que foram vistas nos campos de texto, então basta configuralo da mesma forma, mas é importante salientar a importância de determinar o rótulo do botão no campo “Name” do painel Accessibility, para este botão do exemplo o Name seria “Voltar” e nos casos que forem necessários determine a descrição no campo Description, aqui poderíamos utilizar: “Clique para voltar para o slide anterior”.

Para botões com a função de navegação de slides, como “Voltar” e “Avançar” é importante definir corretamente o Tab index e um Shortcut.

Para botões animados desenvolvidos com MovieClips, há apenas uma diferença no painel

Accessibility para os botões definidos pelo Symbol Button: a opção “Make child objects accessible”, ou seja, “Tornar os objetos filhos (ou internos) acessíveis”.

Acessibilizando um MovieClip

Neste caso, como o MovieClip pode, desde ter a simples funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção “Make child objects accessible” permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade definidas.

por Carlos Tristacci


Seja Bem-Vindo!

@andrehsantana

junho 2017
S T Q Q S S D
« abr    
 1234
567891011
12131415161718
19202122232425
2627282930  

RSS Feeds Deliciosos

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

Flickr!

Cell

Dia do Design

Geometric

Logotipo Pé do Palco // 02

Logotipo Pé do Palco // 01

Mais fotos

Blog Stats

  • 239,086 hits