Xbilidade.net

Dia 22/03 começou o curso de Python na UFMT de Rondonópolis ministrado pelo guru Andrews Medina.

Este curso de Python veio a calhar para a região sul do Estado de Mato Grosso. A mão de obra que é formada aqui na área de programação é muito debilitada pelo nível de professores das instituições de ensino superior locais. A UFMT de Rondonópolis pensou mais longe, quebrou paradigmas ao trazer a comunidade acadêmica local, um curso gratuito ministrado por alguém qualificado e experiente.

Sobre o curso:

O curso é um curso básico sobre programação de computadores dispositivos utilizando a linguagem Python que foi desenvolvida nos moldes das necessidades modernas de programação.

A princípio um curso básico, mas pelo andamento do curso, o professor Andrews Medina relatou, em conversa informal no intervalo, que se continuar assim poderá ser visto conteúdos avançados como desenvolvimento de jogos (PyGames) e ainda um framework para desenvolvimento web (Django).

Sobre o professor:

Conheço o Andrews Medina desde a época do IRC, depois passei a conhecê-lo pessoalmente nas aulas de Ciência da Computação. E desde sempre já prometia sucesso.

Hoje é moderador e membro atuante da lista de Python no Brasil, professor de Ciência da Computação e Sistemas de Informação em uma faculdade particular e já trabalhou em muitos projetos pelo Brasil a fora, entre eles o site da Sociedade Brasileira de Diabetes.

 Moral da história:

Alguém pode perguntar o que alguém da área de Arquitetura da Informação que tende ao Design de Interação quer com programação em Python. O objetivo é o seguinte: Quanto mais conhecimento melhor. Eu preciso aprender o lado do programador para não prometer nos projetos soluções milagrosas por valores insignificantes. É muito importante dar valor ao trabalho do programador. Ok, tudo bem, eu tenho formação em Ciência da Computação, programo com eficácia em pelo menos 6 linguagens diferentes, conheço cerca de 4 banco de dados, mas nada me impede de conhecer mais uma linguagem.

Trabalhar com equipes heterogêneas, exige conhecimento heterogêneo. Se o Gerente de Sistemas disser que a equipe de desenvolvimento web irá trabalhar com linguagem Python, eu devo saber fazer ao menos as inclusões (includes) de código dinâmico dentro do estático (HTML).

É incrível como nós, designers ou não, que trabalhamos para deixar o cliente muito satisfeito com o produto, peça publicitária ou serviço que prestamos. Acho que isso não acontece nas gráficas. Pelo menos não aqui no interior do Mato Grosso.

Eu adoro trabalhar com o Illustrator e Photoshop da vida da Adobe, às vezes me surpreendo com a rapidez que consigo desenvolver algum desenho ou efeito composto em fotos, mas a arte esbarra na hora de passar do meio digital para o analógico, a impressão.

Enviar o arquivo para a gráfica em alta resolução não resolve, então é facil, envia o original em formato de Illustrator mesmo, já que para alguns tipos de materiais, como faixas de lona, são impressos cor por cor separados. Mas, epa! Paramos por aqui. E recebemos o seguinte e-mail:

“A imagem que nos enviou é de baixa resolução ou não é compatível com o Corel. Envie-nos o arquivo em Corel.”

Muito bonito, não tem erro de concordância e engraçado que parece ser uma mensagem genérica, não sabe se é de baixa resolução ou se é de um formato não aceito pelo Corel.

Mas será que não é aceito pelo Corel ou é preguiça incompentência mesmo?

É muito fácil ‘converter’ illustrator/Photoshop em Corel, está tudo no File > Import.

Tem lá arquivo AI, Arquivo PSD, incrível é que os ‘especialistas em Corel’ das gráficas não saibam disso e pedem que eu reenvie o arquivo.

Fazer isso eu faço, não me é problema algum. Mas volto ao começo do post e lembro que o moral do negócio é satisfazer o cliente e no momento que eu solicito uma impressão à gráfica, sou Eu o cliente.

Mas tudo bem, já fiz um cursinho de Corel e as últimas peças publicitárias da empresa que trabalho estão sendo produzidas em Corel Draw X3 (no crack).

Há algum tempo prometi que colocaria minha monografia da graduação à disposição e acabei não cumprindo. Para não saírem a dizer por aí que eu não cumpro o que prometo já está a disposição para quem quiser acessar.

Monografia: Construção de Layouts com Lista de Estilos para Amenizar o Tráfego de Dados nos Servidores Web

O enredo é sobre o desenvolvimento de websites com padrões web. Desde quando iniciei a minha carreira como profissional web, encontro uma resistência muito grande do mercado em aceitar os padrões web (pelo menos aqui no Mato Grosso). As desculpas eram as mais esfarrapadas possíveis, tais como: vai demorar mais, vai ficar mais caro ou a melhor pior de todas: ‘meu sobrinho fez um curso de web design e sabe fazer isso aí por x reais’.

Como sempre na minha vida, tenho que provar tudo que estou a dizer, resolvi provar que seguir os padrões web é muito melhor.

Das muitas coisas que tinha que provar, optei por aquela que comercialmente é mais visada: custo do site.

Muitas empresas que contratam alguém para desenvolver sua marca na Internet, acaba chorando muito no preço de construção da marca e esquece do preço de manutenção da marca.

Se você é bem posicionado nas buscas, teus clientes acessam com frequência seu website, a maioria do conteúdo do seu site é de interesse do seu público alvo, isso vai gerar um grande tráfego de dados no servidor de hospedagem e para que não sabe, os servidores cobram por cada bit que é transferido, logo, o que era barato para desenvolver, sai caro para manter.

É aí que entram os padrões web [HTML ou XHTML (não quero defender um ou outro aqui, já que ambos são para o mesmo intuito), CSS (para tornar o xHTML bonitinho ;P) ], todo aquele emaranhado de tags de tabelas, são substituídos por um código semântico, que pode ser lido por qualquer dispositivo (celulares, ledor leitor de telas, ipods, qualquer navegador) sendo apresentado o conteúdo da mesma forma para qualquer usuário independente do dispositivo utilizado para acessar a informação.

Se quiserem saber mais detalhes dessa loucura toda e os resultados obtidos, acessem a monografia:  Monografia: Construção de Layouts com Lista de Estilos para Amenizar o Tráfego de Dados nos Servidores Web

Aos curiosos que não vão clicar no link o resultado, para meu alívio, é que os padrões web diminuem o tamanho dos arquivos de conteúdo já que eliminam figuras decorativas e elementos de tabelas desnecessários a apresentação do conteúdo. Todas as figuras decorativas são carregadas uma única vez no arquivo CSS que deixa em cache as figuras para serem apresentadas nas outras páginas.

O problema de tempo para postar já foi resolvido, difícil é o computador colaborar.

Meu computador estragou e já tem uma semana que pedi a peça e até agora nada. Sabe como é, computador relativamente antigo (2003), não se acha mais peças para reposição. E por causa de uma controladora de IDE vou ter que trocar toda a placa-mãe, e processador, sem falar que minha memória é do tipo DDR, ou seja, atualmente usa-se DDR2, vou ter que comprar outra memória, que por sinal esta é novinha, não tem 2 meses de uso. Sem falar da placa de vídeo, AGP, substituida atualmente por PCI-Express.

Agora a indecisão, compro logo um notebook, ou outro computador temporário, essa vida de mudanças constantes está me colocando em cada encruzilhada.

Assim que resolver o problema com o PC, posto aqui as boas novas.

Moçada, resolvi postar um tutorial de como fazer silhuetas com Illustrator ou Corel Draw.
Existem muitas formas de fazer isto, é possível até encontrar plugins prontos para isso.

Vamos ao passo a passo:

1º - Escolha a figura:

Eu escolhi esta foto, que achei aleatóriamente no orkut de alguém que não conheço, mas aqui só será usado para fins de aprender a técnica. Escolhi esta foto que estão de costas para não serem identificados no tutorial, mas pode-se utilizar uma foto que está de frente.

 O interessante é que se houver mais de uma pessoa, que esteja bem separada, para as silhuetas ficarem bem definidas.

2º - Escolha o software da sua preferência, mas no tutorial ensinarei usando o Illustrator e o Corel Draw.

3º - Importar a imagem
COREL – Abra um Arquivo Novo (CTRL + N) e depois vá ao menu Arquivo > Importar (CTRL + I);

ILLUSTRATOR – Abra a imagem direto (CTRL + O).
- Crie uma camada (layer) nova para a silhueta.

4º - Escolha da ferramenta

COREL – Ferramenta Caneta (Pen Tool)

ILLUSTRATOR – Ferramenta Caneta (Pen Tool)

O uso dessa ferramenta é para desenho a mão livre, e vai marcando pontos, portanto o segredo está aqui.

5º - O desenho

Em ambos os softwares o processo é o mesmo, deve-se ir marcando o contorno com a caneta, para facilitar a visualização do que está a fazer, coloque borda vermelha para fazer um alto contraste com a figura do fundo e o preenchimento transparente. Logo teremos algo parecido com a figura abaixo:

 Lembre-se que quanto mais pontos, mais fiel é a imagem, ainda é possível deixar mais as curvas mais acentuadas, no COREL, através da ferramenta FORMA (F10).

6º - Preenchimento
Basta agora preencher o contorno e o desenho com preto. É possível incrementar, fazendo um gradiente com contraste com o fundo e outras coisas mais. O básico do desenho é isto, abaixo tem alguns exemplos de silhuetas feitas que se encontra pela web e em muitos outdoors da vida.

Muito bem, tem uma galera que se auto-entitula “Arquiteto de Informação”, não é de admirar que eu enquadre neste grupo. Entretanto, relendo o livro do Dr. Luiz Agner (ergodesign e arquitetura da informação: trabalhando com o usuário), justo no capítulo que dá título a obra, o Agner diz: “Questiona-se se a arquitetura de informação deveria ser vista somente como atividade de um único profissional ou como processo (caracterizado pelo esforço de colaboração de diversas pessoas e disciplinas).” e foi esse questionamento que me voltou a mente, talvez tenha passado desapercebido quando li pela primeira vez.

Eis o caso, a arquitetura de informação é formada por várias outras disciplinas como: Interação Humano-Computador (IHC), Psicologia, Ergonomia, Ciência da Informação, Ciência da Computação, Design de Interação e mais uma infinidade de conhecimentos. Até aí tudo bem, se não fossem os defensores de IHC dizerem que IHC abraça isso tudo, inclusive Arquitetura de Informação, alguns camaradas do Design de Interação também querem sair por cima e abraçar todo mundo.

Mas o que estive verificando, tratando-se do processo de desenvolvimento de artefatos de interação, a Arquitetura de Informação abraça todo mundo, justo por ser uma profissão mais focada no gerenciamento dessa teia de conhecimentos.

Comercialmente, o que se vê no Brasil, também baseado nos dados que o Guilhermo Reis obteve em sua pesquisa, Arquitetura de Informação é uma profissão e não um processo constituído por vários especialistas como é facilmente encontrado em job searches pelas bandas norte-americanas.

Lá fora existe o Engenheiro de Usabilidade, que vai dar os pulos dele, seguir seus próprios processos para tornar o artefato ‘usável’, aqui essa responsabilidade é do arquiteto de informação.

Na verdade, o arquiteto de informação é detentor do conhecimento de várias especialidades, como design de interação, usabilidade e aplica isto durante o processo de concepção de sistemas.

O mais importante é que a Arquitetura de Informação vem ganhando espaço nos processos de desenvolvimento de sistemas, algumas empresas têm contratado muitos arquitetos da informação para resolver o problema criado em sistemas mais antigos, alterando interfaces, alterando a transição de estados, de tarefas, tornando o acesso às informações mais claro e preciso.

Quanto mais desmembrada a Arquitetura dae Informação for, mais fácil será a identificação de onde surgiu o problema, acionando o especialista do caso para o conserto.

Arquitetura de Informação, termo que surgiu para simplificar uma atividade complexa, multidisciplinar, que envolve planejamento da informação para acesso a todos seres humanos através de mídia digital. Em 1976, o primeiro camarada a usar, criar o termo foi Richard Saul Wurman, não é a toa que ele é um dos grandes gurus da web, que dentre muitos, destacam-se também: Louis Rosenfeld e Peter Morville, famosos pelo livro do urso polar.

Atualmente curso um MBA em Tecnologia da Informação, curso bastante focado para programadores, suporte e help desk. Mas como em todo curso desse tipo no Brasil, esqueceram do foco no usuário, afinal, do que me adianta desenvolver um software capaz de fazer cálculos geniais e com tempo de resposta baixo, se ninguém consegue purgar informação nele? Aí entra o Design de Interação e Arquitetura de Informação, que ao me ver, estão muito entrelaçados. Alguns autores afirmam que Arquitetura de Informação é sub do Design de Interação e existe o inverso também. Mas não é este o caso que quero discutir.

Tenho que fazer uma monografia e eu não quero nada sobre programação extrema ou objetos, deixa isso para quem entende. Meu negócio é organizar essa bagunça da informação que programadores teimam em fazer, deixar diagramas, esquemas que facilitem a produção do programador e que aos olhos do usuário seja o mais natural possível.

Existem várias metodologias de desenvolvimento de conteúdo e interfaces, criadas pelos grandes nomes citados aí em cima.

Toda pesquisa envolve mais pesquisas secundárias, por isso busquei saber mais sobre quais as metodologias existentes e para minha surpresa, há um montão delas, mas para não dar tiro no escuro, vou me auxiliar pelos dados levantados pela pesquisa do Guilhermo Reis que destacou a utilização destas metodologias pelos Arquitetos de Informação brasileiros que usam Jesse James Garret, Rosenfeld e Morville, Moebius, entretanto o mais impressionante é que a maioria utiliza metodologia própria. E não querendo fazer lei ou amarrar e padronizar algo que deve se adaptar aos projetos, optei por fazer um levantamento bibliográfico dos métodos mais utilizados que foram levantados nesta pesquisa do Guilhermo, que convenhamos, mão na roda hein?

Trata-se de descrever os passos da Arquitetura de Informação no desenvolvimento de softwares. Entenda aqui, que website também é software. Lembra da definição: “Hardware é o que você chuta e software o que você xinga!”.

O resultado dessa loucura toda sai em breve, quando estiver pronto, certamente deixarei aqui o arquivo a disposição.

Hoje, desenvolvendo mais uma interface para o Núcleo de Estágios da UNIR, acabei me deparando com a seguinte questão: “No botão que vai acionar a pesquisa, devo escrever ‘Buscar’, ‘Procurar’ ou ‘Pesquisar’?” Ok, não é a primeira vez que faço um mecanismo de busca, mas dessa vez decidi investigar o que é mais utilizado e quais as recomendações de usabilidade do Jakob Nielsen.

Primeiro, fui no rei das buscas na web, Mr. Google.com e para meu desespero o Google não usa apenas uma palavra e sim a dobradinha: “Pesquisa Google” que depois nas páginas de resultado, viram apenas “Pesquisar”. Ponto para ‘Pesquisar’. Acontece que a pesquisa é mais genérica, envolvem muitas fontes heterogêneas, e resolvi ir em outros sites e ficou uma briga entre ‘Procurar’ e ‘Buscar’,  mas o ‘Buscar’ teve ligeira vantagem na contagem.

Traduzindo do inglês, ‘Search’ fica mais próximo de ‘Buscar’, e ‘Browse’ vai mais para o ‘Procurar. O que acabei percebendo é que o termo ‘Procurar’ é amplamente utilizado quando se vai procurar algum documento ou arquivo no computador para fazer upload ou submeter anexo. Já o termo buscar é melhor utilizado para as buscas internas.

Mas eu não poderia afirmar isso sem a assinatura do Jacózão,  que está começando a caducar ou estão adicionando muitos ativos na conta dele; mesmo assim, em momentos de sanidade intensa ele nos passa algumas diretrizes:

- Não rotular a área de pesquisa com um título, em vez disso usar um botão “Buscar” ou “Pesquisar”, a direita da caixa.

- Não oferecer um recurso para “pesquisar na web”, na função de pesquisa do site.

- A pesquisa na homepage deve pesquisar o site inteiro, por padrão.

- Disponibilizar para os usuários uma caixa de entrada na homepage para inserir consultas de pesquisa, em vez de oferecer apenas um link para uma página de pesquisa.

Depois  de ler o que o velho sábio disse, optei por usar o bom e velho buscar,  conforme a figurinha ilustrativa.

Pra fechar, vai a minha diretriz para a caracterização de busca:

Buscar - Usar em buscar internas, especificas.

Pesquisar - Fazer pesquisas que irá buscar em bases heterogêneas, incluindo consultas bibliográgicas e sistemas de ajuda de operação do sistema.

Procurar -  Procurar por arquivos, anexos, algo que se faça manualmente através de gerenciador de arquivos ou similar.

Pronto, acabei de arrumar briga com um milhão de designers.

O melhor jeito para resolver este impasse era fazer uma pesquisa com o publico alvo do Núcleo de Estágios, mas como há fatores administrativos que inviabilizam a pesquisa, o jeito é seguir as diretrizes do Jakob Nielsen.

Em um dos raros momentos que meu computador pessoal funcionou no ano passado (antes do upgrade), decidi criar uma logo para dar uma cara mais profissional ao blog.

Ainda não comecei a desenvolver o meu template que irá facilitar o uso da marca, mas vou adaptando este, ou até troque de tema para facilitar a mudança, que será gradual.

No momento, o que posso adiantar é a logomarca que já está pronta, porém pode ser que eu altere alguma coisa. Ainda estou ‘aprendendo a andar’ com o Illustrator₢.

A escolha das cores fiz baseada numa tabela de combinação de cores que fiz no 3º ano de graduação(2005) que foi quando me interessei por design. Era uma época de decisão, entre as muitas opções que a faculdade jogou à minha escolha, optei pela área de Interação Humano-Computador (IHC). A fonte que usei é a BernhardMordenStd-bold-italic, achei interessante por ser de fácil leitura, claro, a fonte tem ponta de pé-de-cabra, que é usado para um monte de coisas, tal qual o blog e o nome, xbilidade que usa o radical “bilidade” precedido pelo “x” que representa os prefixos de todas as ‘ha’bilidades necessárias para trabalhar com web e pessoas. Esse negócio de X me fez lembrar do dia que eu finalmente entendi a matemática, era na 6ª série, quando tinha que achar o tal do X e substituir o valor de X na função e verificar se o resultado do primeiro membro da expressão era igual ao do segundo membro.

Aos poucos vou alterando o blog que é um projeto beta, apesar de estar apenas há 1 ano no ar, entretanto vamos dar um desconto, o orkut está desde 2004 e ainda é beta, meu blog também não poderia ser diferente.

As próximas alterações devem ser no feed, na visualização dos ad-senses e devo colocar também um medidor de rating dos posts.

UPDATE: Lendo um pouco de Arthur Henrique, fiz bem rapido aqui mesmo no trabalho o efeito reflexo que acabei de aprender, apesar de não ter ficado 100% porque não consegui habilitar o “rasterize>type” no photoshop.

Proximo passo é fazer aquele efeito aqua que fica show de bola.

É tempo de voltar, voltar a aprender e a ensinar através desse blog.

Certamente eu devo ter frustado alguns usuários, visitantes e até paraquedistas. Fiquei devendo um monte de posts e até agora nada.

Moral da história: quando se é recém-formado, muitas vezes deixamos de fazer o que gostamos para garantir um bom trabalho, o que não me faltou em 2007.

Mas vamos deixar de chorar pelo leite derramado evamos ao que interessa.

Este blog é um projeto que não deu muito certo no ano passado, devido a circunstâncias que não vêm ao caso, no momento. Provavelmente os posts serão mais frequentes este ano, talvez até semanais. Tenho que reformar o blog, atualizar algumas sessões e por aí vai.

Estive pensando e nada melhor do que ter o próprio template, isto facilita muitas coisas para o blogueiro, tal qual reservar uma boa interface para comentários, de preferência que não fossem SPAMs. Recebi muitos, agora entendo o que muitos blogueiros sofrem.

Chega de conversa fiada que a vida continua.

Ps.: Tenho que agradecer dois blogueiros que me incentivaram a continuar: Blogueiro Sobrevivente e Andrews Medina. Valeu a força moçada!