A necessidade de boas ferramentas de desenvolvimento

Por: Diego Franco - [ December 14th, 2007 ]

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.

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

Acessibilidade, Desenvolvimento, Ferramentas, Firefox | 1 Comentário » View blog reactions

Internet Explorer Developer Toolbar + IEDebugBar

Por: Diego Franco - [ December 14th, 2007 ]

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.

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

Addons, Companion.JS, Desenvolvimento, Extensões, Ferramentas, Ferramentas Web, IE7, IEDebugbar, Internet Explorer, Javascript | 1 Comentário » View blog reactions

Addons | Desenvolvimento | Extensões | Ferramentas Web | IE7 | Javascript

Cores RGB e Cores CMYK

Por: Diego Franco - [ October 27th, 2007 ]

Vai um post rapidinho e resumido sobre a diferença de cores RGB e cores CMYK.

RGB

A cor de um pixel em RGB é gerada por 3 cores projetadas que se misturam. As luzes projetadas formam as cores: vermelho, verde, e azul (do inglês: Red, Green, e Blue). Após misturadas, essas cores criam um espaço de cor chamado RGB. As cores RGB são aditivas, significando que a mistura de diversas cores cria o branco. Esse espaço de cor foi criado para gráficos feitos em computadores e visualizados em computadores.

CMYK

A cor de um pixel em CMYK é gerada por 4 cores, são elas: o ciano, magenta, amarelo e preto (do inglês: Cyan, Magenta, Yellow e blacK). O espaço de cor CMYK em um computador é usado para simular tintas impressas em papel e, geralmente é usado em artes-finais para impressão. As cores CMYK são subtrativas, ou seja, significa que misturando diversas cores cria-se o preto. Esse espaço de cor foi criado para gráficos feitos em computador e serem impressos em papel.

Os gráficos para a web são baseados em “tela” e não para impressos, portanto o uso de RGB. Por isso se você enviar um arquivo de alguma arte-final ou peça em Corel ou Photoshop para uma gráfica não esqueça de verificar se está enviando tudo em CMYK, isso é necessário para se gerar um fotolito, a não ser que sua peça criada não use uma imagem colorida, policromática, onde não há uma mistura de cores.

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

CMYK, CorelDraw, Cores, Desenvolvimento, RGB | Nenhum Comentário » View blog reactions

CMYK | Cores | RGB

Declarando cores com códigos Hexadecimais como é isso?

Por: Diego Franco - [ October 25th, 2007 ]

Minha idéia neste post não é de aprofundar no assunto mas de ter uma referência rápida sobre os hexadecimais.

Em nosso ambiente de criação estamos acostumados a selecionar as cores que desejamos e pronto lá está ela naquele círculo, quadrado, fonte ou qualquer outro elemento no qual se deseja preencher. Diferente dos trabalhos Arte-finalistas criados para materiais em papelaria onde selecionamos a cor que se deseja, e se, é RGB ou CMYK (isso depende do tipo de material que é produzido), na web, em nosso CSS mais especificamente trabalhamos com cores escritas em códigos hexadecimais. Mas como é isso?

O nome hexadecimal vem da união de 2 palavras do latin hexa( sexto) e decimal(10, base 10, ou décimo), unindo as duas palavras podemos ter (base do décimo sexto) ou falando em miúdos matemáticos o código hexadecimal é derivado de uma base de cálculo 16, contendo 16 símbolos.

Abaixo você tem uma tabela que mostra como uma base de cálculo 10 é convertida para a base 16.

Os números hexadecimais são utilizados para converter valores RGB para que o HTML possa interpretar quais cores você escolheu. As cores RGB variam de 0 à 255. Hoje você pode fazer essa conversão usando a prória calculadora do windows, mas aqui vai uma tabelinha bem simples e prática para se converter valores RGB em hexadecimais.

Tabela RGB - Hexadeximal

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

CSS, Cores, Desenvolvimento, Hexadecimal | 2 Comentários » View blog reactions