web de leve

Olá galera,
tudo bem com vocês??
Espero que sim =]

Nos últimos meses venho enfrentando um problema de saúde que me afastou de algumas atividades, entre elas, este meu pequeno e recém criado blog.

É… mal comecei a escrever ( tentar escrever) e fui afastado na marra da telinha do pc.

Eu continuo trabalhando com web e espero em breve postar sobre alguns assuntos que tenho estudado um pouquinho.

Agradeço de coração a galera que tem visitado este blog, aos poucos e valiosos leitores que ainda assinam o meu feed e peço que se alguém conhece algum bom médico, que opere o pescoço e que não tenha receio de lidar com uma tal angiomatóide… por favor me passe o nome e algum meio de contato com ele. Vou ficar infinitamente grato e caso o tal médico resolva o problema prometo que recompenso, de alguma forma, mesmo que simbólica, a pessoa que o indicou.

Isso pode ser meio bizarro mas quem quiser dar uma olhadinha na minha garganta arriada ( como diz o pessoal de Caruaru/PE ), fique à vontade: http://www.youtube.com/watch?v=n1rfZzd3wM8

Obrigado mais uma vez pela atenção de todos e até mais.

Se você ao desenhar um menu definiu visualmente a área de cada um de seus itens faça com que cada área seja eficiente quando o usuário clicar nela.

Vamos ver um menu do Imasters pra entender essa história (clique na imagem para vê-la na íntegra):

O designer definiu uma área para cada item do menu organizando o layout mas - querendo ou não - também sugeriu ao usuário a área onde ele pode clicar só que o mesmo designer esqueceu de dar a funcionalidade de link que a área propõe.

É sério.

Basicamente o usuário usa o mouse para alcançar a área do item, clicar e ir para uma outra página.

O item do menu não precisa ser um lindo botão, precisa somente ter uma área definida como um retângulo para que o usuário clique nele.

Por diversas vezes vi pessoas clicando em retângulos e nada acontecendo - meu pai é um exemplo =]

E a situação piora quando há uma resposta visual da interface mas o link não funciona de acordo.

No site Via6 o item do menu muda de cor quando o mouse está sobre ele mas o ato de clicar resulta em nada pois o link é válido somente para o texto do item.

A área de clique e a resposta visual à interação do usuário são fatores de grande importância para uma boa navegação e compreensão do funcionamento do site.

Veja um bom exemplo no portal Agrolink:

Há outro exemplo no Estadão onde os itens do menu nem possuem uma área visualmente definida:

E veja mais um exemplo no próprio Imasters:

Ainda não te convenci??

Tu acha que de qualquer forma o usuário vai clicar no texto do item do menu e que gastar tempo com o CSS pra isso é bobagem??

Está bem então, mas faça um teste: navegue com o firefox no site do UOL e depois no da Folha . (este teste vai expirar algum dia quando um dos sites for alterado)

Se possível veja outras pessoas navegando neles também.

Navegue, veja e analise se o simples cuidado com as áreas de cliques promovem ou não uma melhor experiência para usuário.

Bom, não sei sobre você, mas eu quero menus fáceis na web, eu quero clicar e ir!

Trabalhei recentemente em um site que possui versões em três idiomas ( português, espanhol e inglês ) e em uma das reuniões com o cliente ele me disse mais ou menos o seguinte:

“Acho melhor você tirar essas bandeirinhas. Nós temos clientes importantes que podem não gostar de ver a bandeira dos EUA”

Oks, oks.

Troquei as bandeirinhas por texto para atender o pedido do cliente.

Veja, o motivo do pedido de alteração foi apenas uma bandeirinha de alguns pixels que de acordo com o cliente pode ter um significado negativo mesmo que esteja somente associada com a função de troca do idioma do site.

Foi só um “detalhe” mas o cliente conhece os clientes que tem ( e os que quer) até nos detalhes e por isso a alteração é válida, relevante.

A moral dessa história é que mesmo que a conversa com o seu cliente seja sobre bandeirinhas é bom prestar atenção e pegar todas as dicas que ele tem sobre o público alvo do site.

Se aparecer um cliente semelhante, em termos, ao cliente que cito neste post, já sei que tenho que perguntar se posso ou não usar bandeirinhas de apenas alguns pixels

Acredito que se tu um dia ficou sabendo que existe um modo diferente de programar sites onde a formatação não fica no html e sim em um tal de arquivo CSS e que o pessoal que programa dessa forma resolveu jogar fora as tabelas e batizaram tal “lance” de Tableless, tu provavelmente conheceu a seção Convertidos do Tableless onde há sites que foram refeitos sem as tradicionais tabelas organizando o layout dos mesmos.

Se tu conhece a seção tu já tem idéia sobre o propósito deste post e desta nova categoria deste blog.

Opa, tu é iniciante mesmo e ainda não entendeu??

Deixa eu tentar te explicar de novo: “Os Convertidos são sites feitos originalmente com tabelas organizando o layout que foram refeitos sem as tabelas organizando o layout”.

Mais ou menos, oks??

Bom, o meu primeiro e único convertido até o momento é o site do Greenpeace

Converti o site para ser avaliado no curso da Visie que fiz no ano passado mas olhando bem para o código hoje tenho certeza que o faria de outro modo.

É… estou até lembrando agora que escolhi o site pois uma querida amiga trabalhava no Greenpeace na época.

Que pena que ela saiu logo depois, tava fácil de enviar uma proposta pra lá. Tem jeito ainda querida??

Bom, de qualquer forma baixe o arquivo e confira se ele é válido ou não para tu aprender algo sobre Tableless.

Fique à vontade também para sugerir outros sites para serem convertidos e caso queira publicar um convertido de tua autoria neste blog entre em contato comigo através do email tigodi@gmail.com*, estou esperando

* use o codificador e evite o spam

Links Relacionados:
http://www.tableless.com.br/convertidos-tableless-de-volta

Dessa vez o layout tem uma tarja no topo que deve ocupar todo o comprimento horizontal da tela independente da resolução do usuário e ter uma sombra que delimite o site (em flash) que é quase todo branco.

Bom, não coloquei o swf do site mas coloquei um div com background branco e com as mesmas dimensões para simulá-lo.

» Clique aqui para baixar o arquivo.

Há outro modo mais fácil e/ou correto de produzir esse layout com css??

Se tem e tu sabe não espere mais…

conte logo pra mim

Semana passada estava visitando o Camiseteria pela sei lá que vez para tentar comprar uma camiseta e acabei escolhendo a Moai?.

A camiseta deve estar chegando ainda hoje. Não é a qual eu queria mas tá valendo.

Então, na semana passada fiz o meu cadastro no Camiseteria e vejam abaixo dois detalhes que encontrei:

1) NoFollow

As dicas na imagem abaixo são para um textarea.

Olhe a última dica:

Será que a maior parte dos usuários do Camiseteria são programadores html, trabalham com SEO ou sabem o que é PageRank??

Será que o usuário comum entende a informação e ela é útil pra ele??

2) “X-largura por X-altura”

Geralmente quando nos cadastramos em um site e criamos um perfil há um campo para o envio de uma imagem (foto) nossa.

Nem todo site informa ou restringe as dimensões da imagem mas quando o faz segue o formato (convenção) “X-largura por X-altura”.

No Camiseteria não:

Aposto que muitos usuários olham rápido e buscam no texto somente quais são os tipos de arquivos (jpg, png, gif) e os números que para eles sempre serão correspondentes ao par “x-largura por x-altura”

Bom, são detalhes lembrados às 4:56 horas da manhã.

Qualquer coisa me dêem um desconto. oks?? =]

Olá pessoas.
Tudo bem com vocês??
Espero que sim=]

Bom, vou publicar sempre que possível o código básico dos layouts que produzo na agência.

Os layouts em si (o psd) são produzidos por outra pessoa e quando consigo convencer o pessoal a não fazer o site em flash coloco a mão na massa e começo a codar.

É galera… interior é retrógrado mesmo, o pessoal ainda quer tudo em flash. Acreditam??

Espero que vocês baixem os layouts que eu publicar aqui e se possível comentem sugerindo alterações e correções.

Estou aprendendo e qualquer pitaco de vocês com certeza vai ser válido.

A imagem abaixo mostra a estrutura básica do 1º layout que fiz lá na agência.

A questão dele era manter o ropadé fixo, abaixo do conteúdo principal e ao lado da sibebar.

Clique aqui para baixar o layout

Obrigado pela atenção galera/abraços/t+!!

Ser freela, (quase) empregado e ter clientes fixos ocupa bem o tempo.

Estou lutando nessas três frentes e em cada uma delas com diversas funções.

Meu dia-a-dia tem sido corrido mas ainda dá tempo de ir na academia, ver ao menos um amigo e ler Eragon à noite com a minha filha - o livro é fraco acho que por conta da tradução mas a pequena não dorme sem ouvir todo dia mais uma parte da história.

Bom, legal, estou começando a pegar o ritmo, finalmente aprendendo alguma coisa e crescendo um pouco mas percebi que realmente não dá para fazer tudo.

Nesses meus intentos perdi um freela importante pois não cumpri o prazo.

Tal fato me serviu como aviso de que algo não está certo e que precisa ser revisto.

É isso aí.

Vivendo e, sempre, aprendendo.

E nessa de estar sempre aprendendo me lembro o que um bom primo e amigo sempre me diz: “É preciso ter foco”.

Meu foco tem balançado um pouco, acho que estou dando mais atenção à agência mesmo sabendo que não posso me desligar de modo algum dos meus clientes fixos.

Os clientes fixos são quase sagrados.

Eles me mantêm e me apoiam em muitos sentidos.

Saiba que é muito bom quando o seu cliente não é somente mais um cliente.

Saiba que é muito bom quando o cliente te chama para beber umas ( não que eu ligue para cerveja ), trocar umas idéias e te reconheça como um amigo.

Isso, realmente, é muito bom.

Voltando… =]

Fixos, agência e freela me fizeram pensar, mais uma vez, que está na hora de passar parte das responsabilidades para outra pessoa.

Não a responsabilidade geral sobre freelas e fixos mas sobre algumas tarefas repetitivas e mecânicas como atualizar galeria de fotos e catálogo de produtos.

No momento estou estudando a possibilidade de passar tais tarefas para um bom amigo.

Se não der certo com ele vou procurar outras pessoas.

Ainda tenho muito que aprender e não sou um profissional expressivo como muitos que vejo pela web mas há boas oportunidades para mim e sei que não posso aproveitá-las se continuar fazendo tudo sozinho.

Cursos presenciais ministrados em escolas de informática e em instituições como o Senac estão fora de cogitação para mim há muito tempo.

O último que fiz foi o curso Web Publisher Editor da Macromedia em 2002 no Senac com professores “credenciados” e outras lorotas.

Como não tinha banda larga em casa, e uma galera legal ia no Senac, resisti e agüentei ficar no curso até o final.

Até que valeu pois os computadores eram bons, conheci pessoas legais, fiz amigos, naveguei muito na web e no final recebi um diploma até que bonitinho.

Olha ele aí:

Acabou o curso e com ele a coragem de fazer qualquer outro curso por aqui mas o tempo passou e os cursos “on-line” começaram a aparecer.

Então, no ano passado cursei o antigo Tableless I da Visie.

Falei antigo pois o curso se fundiu com o Tableless II e virou Tableless.

Parte do material era constituído de traduções de documentos da w3c mas mesmo assim foi um bom curso e o diploma veio em dose dupla =)

A melhor parte do curso é quando o assunto é a mudança do workflow com a adoção dos padrões web.

Três simples fluxogramas são apresentados na abordagem.

Dois deles mostram modelos convencionais de desenvolvimento de sites e um propõe um novo modelo com a adoção dos padrões web.

Se não me engano o Elcio até utilizou os mesmos fluxogramas em uma palestra no CPqD onde alguns amigos trabalham e por onde já passou um dos “senhores” do Papotech.

Voltando… =)

Depois do Tableless I fiquei sabendo em algum canto da web sobre o curso do Ávila.

O nome do curso é “Curso de Design Web com Bruno Ávila“.

Li e reli a descrição do curso.

Deixei quieto, não tinha grana e alguns dias se passaram.

Alguns dias se passaram e a consciência me dizia: “Bro, tu precisa fazer este curso. Tu já és um programador meia-boca e ainda por cima trabalha de freela fazendo serviço de web designer. Tu precisa aprender mais”.

Bom, decidi fazer o curso e “corri” para o site do senhor Ávila.

Caracoles!!! Tinha um aviso no site: “Inscrições Encerradas”.

Caracoles!!! Vou ter que esperar até abrir outra turma .

“Que droga!!!” - pensei.

Apelei e escrevi um email para o Bruno e ele me deixou entrar no curso na boa.

Valeu Brunão!!

O curso começou bem, se desenvolveu e foi muito bom.

Vale mesmo a pena fazê-lo pois ele te dá algumas bases que ampliam o teu conhecimento e outras que fundamentam o que você já sabe mas não sabe como explicar para o teu chefe ou cliente.

O curso acabou na semana passada e anteontem tivemos ( eu e os demais alunos ) que liberar a “sala” para uma nova turma

Mas está bem, o Bruno fez o Boteco da Web e galera tá indo pra lá pra bater um papo.

Boa idéia, muito boa a idéia.

Talves agora eu entre no curso de Acessibilidade do senhor Torres ( tenho que esperar ele atualizar o curso ) ou no curso de Ilustrator da WOC que me foi recomendada pelo Will.

Bom, por hora, vou para o Boteco

Posts em blogs, tópicos em fóruns e conversas em IMs ou ao vivo são alguns dos meios pelos quais compartilhamos o nosso conhecimento.

Emprestar livros também é uma boa prática para compartilhar mas às vezes é complicado pois o tal “amigão” que quer teu sagrado livro por uns dias é um cara bagunçado, desleixado e você tem certeza que ele irá se dedicar ao ato da leitura naqueles preciosos 30 minutos diários que ele reserva para visitar o toalete.

Mesmo com todos esses riscos resolvi me desapegar um pouco dos meus livros.

Fiz um teste, na última terça-feira, emprestei o livro “Flash Animado - Técnicas Avançadas em Design & Animações” dos irmãos Piologo e Dauton Janota.

Bom, emprestei o livro para um cara lá da agência que só conheço há 7 dias. Vamos ver no que dá.

E ontem emprestei para um amigo ( nao “amigão” ) o livro do Felipe Memória: “Design para a Internet - A Experiência Perfeita“

Vá e volte com todas as suas folhas inteiras, limpas e secas companheiro.

Bom, é hora de pensar em uma nova aquisição.

Visitar algum e-commerce e comprar algum bom livro

Quem quiser conhecer as outras dicas para… para… para seja lá o quer for que até agora não se perguntou, visite : http://dwd3.blogspot.com/2007/02/criatividade-10-dicas.html

Links Relacionados:

Criatividade - mais 10 dicas

Parabéns (despedida?) ao meu camarada Felipe Memória.