Modelando por Diego Franco

Não poderia deixar este dia passar batido, por isso estou manifestando minha admiração por esse poderoso navegador.

Espero que o recorde seja batido(Quem não acompanhou as notícias atualizem-se) e que mais e mais pessoas possam aderir a esse navegador, inclusive aos nossos companheiros de desenvolvimento.

Firefox 3 lançado e algumas coisas nós esperamos com sua vinda, creio que nenhuma delas é mais importante que a otimização em sua performance, definitivamente precisamos que o consumo de memória caia e claro que fique mais rápido que hoje.

Recentemente foi lançado o novo Opera versão 9.5 sinceramente é surpreendente a rapidez de processamento e o mínimo consumo de memória.

Precisamos hoje de browsers decentes que fazem por merecer suprindo as necessidades tanto dos desenvolvedores quanto as de um simples usuário, não sou um amante do firefox, navego com IE7, com Opera, Safari e outros porém de todos o que mais supre minhas necessidades como desenvolvedor é sem dúvida nenhuma o Firefox, obviamente nunca deixando de realizar os testes necessários nos demais browsers.

Em fim, agora é esperar e ver os resultados!

Pra você que deseja fazer o download do novo Firefox 3 acesse o site oficial.

Pra você que desja fazer o download do novo Opera 9.5 acesse o site oficial.

A um tempo atrás prometi escrever alguns posts sobre dicas de vetorização creio que este será um bom começo e será extremamente interessante para quem trabalha com silks.

O caso é o seguinte: O cliente lhe envia uma foto qualquer e pede pra você vetorizá-la, ou, nem lhe envia a foto apenas solicita uma ilustração aberrante, a dita cuja será usada em uma camiseta por exemplo.

Se você é arte-finalista e cria ilustrações para camisetas sabe que encontrará algumas limitações como tamanhos de telas limitados, cores específicas, tipos de tinta etc…, claro, isso poderá variar de região para região, cidades de porte maior tendem a ter tecnologias mais avançadas que cidades de porte menor, mas isto não é uma regra.

Consideremos que o nosso amável cliente nos solicita uma arte para uma camiseta na qual homenageará o lendário Fusca, escolhido por mim carinhosamente para ilustrar este post, um marco para sua época que perdura até hoje com suas curvas arrojadas. A camiseta será simples com no máximo três cores.

Vamos ao trabalho. Eis o nosso Fuscão.

Logo abaixo estão as principais ferramentas usadas na vetorização e o que elas fazem: (Vou ser bem direto aqui para não embromar(já ouviu essa palavra?) Os ícones são bem intuitivos. Abaixo de todas as ferramentas estão as etapas da vetorização até o resultado final, espero que gostem.

Ferramenta Bezier >> À medida que você clica ela adiciona pontos (nós) do vetor. Você a usará praticamente na primeira etapa da vetorização, contornando as principais características de seu desenho, sombras, reflexos, objetos, um pouco de senso será muito útil neste momento para definir os principais traços da imagem. Quanto mais pontos você criar, melhor será na hora de moldá-los, mas com o tempo você saberá os lugares corretos onde deverá criá-los.

Ellipse >> O nome já é intuitivo. Para você desenhar círculos (tenho certeza que você já sabia desta).

Convert Line to Curve >> Quando se adiciona os nós com a ferramenta Bezier eles são criados como linhas retas não sendo possível a suavização(arredondamento) dos nós, para que você possa suavizar os nós, construindo curvas, basta selecionar os nós desejados e aplicar esta ferramenta. A partir daí você usará a ferramenta Shape para moldar os nós.

Shape >> Como já disse anteriormente a ferramenta Shape com certeza será a mais usada aqui, é ela que dará formas uniformes ao seu desenho, é com ela que você suavizará os nós. Nesta etapa você excluirá alguns nós, criará e suavizará outros, lembrando que para editar um nó basta selecioná-lo dando um clique sobre ele, para excluir dê um duplo clique sobre o mesmo e para adicionar dê um duplo clique sobre o contorno.

Make Node A Cusp >> Quando você converte suas linhas em curvas(3ª ferramenta), ao clicar em um dos lados do nó para suavizá-lo o outro acompanhará a suavização, para que isto não aconteça, ou seja, no caso de você querer suavizar ou editar somente um lado do nó independente do outro basta selecioná-lo e aplicar esta ferramenta, automaticamente os nós ficarão independentes um do outro. O próprio ícone já é bem intuitivo.

Etapas da vetorização até a versão final:

E por fim, para alegria de alguns, segue o arquivo final do vetor em CDR: Fusca.rar

Assim como o martelo é a ferramenta do Carpinteiro, nós desenvolvedores obrigatoriamente eu disse: Obrigatoriamente, devemos ter as nossas e de preferência as melhores. Eu diria que é muito difícil você alcançar um resultado perfeito, ou ainda, conseguir uma excelente produtividade sem ter excelentes ferramentas que te auxiliem a identificar: erros, validações, a debugar scritpts etc…

A um tempo atrás entrei no site do Bradesco na página do simulador de consórcio, qual foi a minha surpresa ao executar a primeira ação: escolher a marca do veículo em um dropdow subsequente um outro dropdow carrega os modelos, Pimba! Não funcionou. Sou usuário do navegador da famosa “rapoza de fogo” Firefox. Bom, procedimento básico de desenvolvedor, enviei um e-mail para o pessoal do suporte sobre a falta de acessibilidade, e qual foi a resposta?

“Prezado Sr. Diego, boa tarde!
Em atenção a seu e-mail, informamos que realizamos testes no Firefox e constatamos que está operando normalmente.
Solicitamos por gentileza que realize um Print Screen da tela de erro e nos envie por e-mail para que possamos analisar.”

Como sou um usuário obediente e que se importa com o próximo e meu maior interesse é de compartilhar conhecimento, enviei pra eles o print das telas, inclusive depurando o javascript com a Firebug mostrando exatamente onde era o erro.

Pra quem não conhece Firebug é uma poderosa e excelentíssima extensão para o Firefox que te possibilita editar, depurar e controlar CSS, HTML, JavaScript, e outras coisas tudo isso on-line e em qualquer página da Web te possibilitando ver o resultado na mesma hora. Se você navega com o Firefox clique aqui e baixe a extensão agora para conhecê-la ou entre no site oficial http://www.getfirebug.com. Para desenvolvedores que usam o Internet Explorer como browser padrão, primeiro eu te aconselharia a mudar rapidamente e navegar num browser digno de desenvolvedor, mas neste post aqui escrevi sobre duas extensões para o IE7 que podem te ajudar qualquer hora dessas.

Ok feito isto segue a resposta de volta.

“Prezado Sr. Diego, bom dia!
Lamentamos o transtorno e informamos que o acerto realizado no site em 30/11/2007.
Atenciosamente,
Bradesco Administradora de Consórcios.”

Apesar da má formulação da frase que da a impressão de que foi resolvido, Qual foi a minha surpresa quando acessei o site ontem 06/12/07, e quem estava lá? O mesmo problema. Enviei outro e-mail e vamos ver onde isso vai dar.

Imagino que se tivessem boas ferramentas de desenvolvimento não teriam tanto trabalho a ponto de um usuário ter que enviar a causa do erro.

Bom, estou publicando este post aqui que comecei a escrever no dia 07/12/2007 e o problema ainda está lá, se você navega com o Firefox pode conferir a falha acessando a página do Simulador de Consórcio do Bradesco aqui.

Vou postar aqui três extensões para o Internet Explorer que qualquer hora dessas pode te salvar de um erro esquisito. Já disse e volto a dizer, boas ferramentas de desenvolvimento podem afetar absurdamente em sua produtividade, te ajudando a descobrir erros de script e outras coisinhas que vão aparecendo no decorrer do desenvolvimento de um site.

A primeira: Internet Explorer Developer Toolbar ( Baixe aqui )

Essa tem um visual semelhante a Firebug a qual citei aqui neste post, porém nem se compara a tal extensão. Essa extensão irá te auxiliar em erros de sintáxe, indentificação de elementos como DIVS, Links, imagens e outros, dividos por cores e mais algumas outras opções não tão interessantes, mas não deixa de ser uma extensão interessante já que boas extensões para o IE são raras.

A segunda: IEDebugBar ( Baixe aqui )

Essa é parecida com a de cima e consequentemente também com a Firebug, um pouco mais robusta que a IEDeveloper a IEdebugBar tem um inspetor de propriedades para DOM, HTTP, Javascript, AJAX e outras mais que você pode ver uma prévia abaixo (em inglês) ou no conteúdo completo no site do desenvolvedor.

• DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
• HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
• Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
• HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
• And many more features: See page cookies, get pixel color on a page, make a page screenshot…

A terceira: Companion.JS ( Baixe aqui ou acesse o site do desenvolvedor)

Essa sim eu tenho usado mais constantemente, mais simples do que a DebugBar ela é específica para depurar javascripts, mostra o erro no próprio javascript te indicando a linha, local do erro em destaque e o nome do arquivo. Realmente essa é uma ferramenta que mesmo para aqueles que não usam o IE7 como seu navegador e até mesmo para um Analista de Qualidade, é uma excelente extensão para se usar na hora do desenvolvimento e em casos de erros de javascripts no IE7 claro. Quem nunca se deparou com aquela marmota de mensagem que o IE te dá quando tem algum problema na página? “Concluído mas contém erros na página”, e o melhor é que não informa mais nada, não te dá nenhuma referência de onde está o erro. Essa extensão vai substituir esse depurador padrão que, incluse para que a extensão funcione perfeitamente você deve desabilitar duas opções no IE7 conforme mostrado abaixo.

Vá até o menu:
Ferramentas > Opções da Internet > Avançadas
Na janela Configurações vá até o ítem:
Navegação
Desabilite as caixas:
- “Desabilitar depuração de scripts (Internet Explorer)” e
- “Desabilitar depuração de scripts (Outros)”

A extensão deverá funcionar perfeitamente. Veja abaixo um print da extensão em uso.

Pois é baixei a nova versão do Cliente FTP da família “Zilla”, o Filezilla 3.0.1. A nova versão saiu já faz mais de 1 mês mas baixei esta semana, gosto do Filezilla já uso a um bom tempo e nunca me deixou a desejar, é rápido nas transferências inclusive notei uma leve diferença em outros que já usei como o CuteFTP por exemplo, além de ser open-source.

Abaixo segue alguns links sobre características da nova versão, screenshots e downloads.

• Site oficial do Filezilla
• Opções de downloads multi-plataformas
• Novas Características
• Prints das telas dividas por plataformas.

Eu recomendo Filezilla.