Modelando por Diego Franco » Desenvolvimento

Modelando por Diego Franco

Este é o site pessoal do Diego Franco Miguel, Desenvolvedor, Webdesigner (Padrões Web, XHTML, Microformats e tudo que contribui para uma melhor customização e leitura de um site), falo aqui sobre novos comportamentos na internet bem como as evoluções que ela sofre na área de desenvolvimento.

CSS Hacks para o Firefox 3

Por: Diego Franco - [ July 2nd, 2008 ]

Primeiramente parabéns ao Firefox, mais de 8 milhões de downloads em 24 horas, garantindo o seu lugar no Guinness Book.

Bom, chega de elogios e vamos ao trabalho.

Firefox 3, IE8, este último polêmico por sinal, resumindo, diferente do que a galera do Casseta & Planeta diz: nossos problemas não acabaram! Muito pelo contrário talvez até aumentem só o tempo dirá.

Nas primeiras impressões alguns problemas foram realmente melhorados, principalmente em relação a performance, porém já percebemos comportamentos estranhos em alguns atributos CSS, como por ex.:

Problemas com display:table quebrando DIVS no Firefox 2;
Facilmente corrigido com a substituição por overflow:auto;

Porém nos deparamos com comportamentos estranhos com overflow:auto; no Firefox 3;

Para corrigir use:
Use: overflow:visible;

A medida que encontrar mais problemas com CSS e suas devidas soluções no Firefox 3 vou escrever aqui.

E vamos para a declaração dos HACKS para o Firefox 3, título deste post. Lembrando que você poderá usar Conditional comments, depois falamos sobre este.

A resolução é simples escreva sempre o nome da classe do seu elemento seguido de uma vírgula seguido de x:default { atributos } conforme exemplo abaixo:

Hack for Firefox 3
.nomedasuadiv, x:default { atributos }

Vamos lembrar outros Hacks.

Hack for Firefox 2
.nomedasuadiv, x:-moz-any-link { atributos }

Hack for Internet Explorer 7
.nomedoseuelemento { *display:none; }

Hack for Internet Explorer 6
.nomedoseuelemento { _display:none; }

Hack for Opera
@media all and (min-width: 0px){

.content { }

}

Qualquer problema comentem!

Bons testes!

Tags CSS, Desenvolvimento, Firefox, Hacks | 8 Comentários » View blog reactions

Veja mais em:

Download Day e Firefox 3 lançado!

Por: Diego Franco - [ June 17th, 2008 ]

Download Day

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.

Tags Desenvolvimento, Ferramentas, Firefox | Nenhum Comentário » View blog reactions

Veja mais em:

Clientes que sabem demais, ou eu que não sei nada?

Por: Diego Franco - [ April 16th, 2008 ]

Ser arte-finalista ou designer para web não é coisa fácil, tenho certeza que se você é um deles, tem uma série de boas histórias de clientes, que já lhe pediram para desenhar: um pássaro com todas as suas penas em detalhe; ou aquela camiseta com um linear ou um radial dentro de um círculo(fala sério); e aquele que te manda a foto da sobrinha e diz: “desenhe o rostinho dela…”; ou melhor: “na manga direita coloque isto, na esquerda aquilo, na frente você faz assim, atrás você coloca aquele desenho que te mandei por e-mail, e lá em baixo pertinho da barra você escreve aquela frase”; isso sem contar as mais “belas” combinações de paletas para combinar com a cor da camiseta ou para compor o layout do site(nem me fale).

São muitos os clientes que atendemos e dentre eles vários que sabem o mínimo de conhecimento para opinar e outros claro, que não sabem absolutamente nada, mas, que no fundo do seu âmago juram para si mesmos que são experts em criação e design, ou melhor: “Eu estou pagando, então é assim que eu quero”, esquecem literalmente da interação do usuário com o produto, do impacto visual negativo ou positivo, seja ele web, papelaria ou camiseteria.

Foram várias as experiências que tive com clientes extremamente meticulosos e exigentes, entendidos e leigos no que se refere a design, a verdade é: em dias que ainda ouvimos dizer, “o cliente tem sempre a razão”, até que ponto ele realmente tem a razão? Apenas pelo simples fato de estar pagando ele tem a razão?

E assim devemos aceitar suas opiniões acatando-as? Entendo que antes de pagar, existe a necessidade por parte do próprio da requisição de um profissional para suprir a falta de qualificação necessária e experiência em determinada área para executar uma tarefa.

Mas claro, como bons profissionais cabe a nós a incrível arte de “advogar” pela nobre causa de defender um layout ou uma arte que criamos e convencer prudentemente o cliente que, o que criamos é o que realmente ele precisa, nada mais e nada menos, curto e objetivo, direto no alvo, no foco da peça, e ainda, convencê-lo no final do projeto, que não existira profissional ou empresa melhor a não ser a sua para fazer o trabalho.
Portanto na hora de desenhar um novo layout algumas coisas podem te ajudar a diminuir os problemas que levam a reprovação de uma peça:

  • - O cliente já possui identidade visual? Meio caminho andado, procure ser prudente para não sair da mesma linha de raciocínio respeitando o material enviado, é quase certo que você não poderá mudar nada. Neste caso, na maioria das vezes uma aprovação logo na primeira amostra é quase certa.
  • - O cliente não possui nenhuma identidade visual, nem logomarca, mas respondeu o briefing. Sinceramente eu não arriscaria nem um minuto do meu tempo, tudo bem que o cliente respondeu o briefing passou algumas referências, direcionou o foco, mas você poderá ter problemas com cores, e aplicação de elementos, por exemplo: linhas retas ou curvilíneas? Sendo assim prudentemente não arrisque, seja um profissional, entre em contato com o cliente e solicite o material necessário para dar início ao projeto deixando-o ciente da importância disto e caso ele não tenha logomarca sugira no mínimo; se você não cria logomarcas, alguém gabaritado para desenvolvê-la para ele, com ela será possível ao menos iniciar o desenvolvimento.
  • - O cliente tem apenas a logomarca, mas ainda não respondeu o briefing. Posso iniciar o desenvolvimento? Eu digo que sim, mas, todavia, no entanto, entretanto, algumas dúvidas poderão surgir durante o desenvolvimento. O que você irá absorver serão apenas referências de cores, uma leve noção do tipo de público e de linhas que poderá usar: retilíneas ou curvilíneas por exemplo. Particularmente eu não avançaria tanto, deixaria uma margem de tempo para qualquer tipo de modificação ou surpresa que o briefing ou o cliente revelasse.
  • - A logomarca do cliente é horrível e não vai mudar. Alguns clientes são bem fechados para mudanças, não aceitam opiniões e assim se torna difícil, mas neste caso nem sempre são exigentes com a aprovação, portanto seja um bom profissional e capriche no layout, quem sabe ele se impressione e veja que a logomarca está totalmente ultrapassada.
  • - O cliente enviou a logomarca passou várias referências, mas tem se mostrado indeciso na suas escolhas. Muitas referências principalmente se forem bem diferentes uma das outras, podem ou não lhe ajudar no desenvolvimento de um layout. Neste caso converse bastante com o cliente, é visível que ele precisa de ajuda para centralizar seu raciocínio e chegar num consenso em relação ao design. Talvez nesta hora você precise praticar um pouco de AI (Arquitetura da informação), mostrando para o cliente a importância da disposição dos elementos, a necessidade do usual, do acessível, a preocupação direta com o usuário, levando-o a compreender que o maior interessado em seu produto é o usuário final, desviando um pouco o foco do design, mostrando que nem tudo são cores, bordas, imagens grandes, pequenas etc…, entenda que passar segurança para o cliente é de extrema importância, mostrar-se um verdadeiro profissional que entende do que está falando. Se o cliente por acaso sentir que você está inseguro em suas argumentações, esqueça, ele vai pedir pra você “pintar o sete” no seu design. Acredite.

Não se pode nos dias de hoje ser simplesmente um Designer de Interface, Webdesigner ou Arte-finalista somente, vivemos dias onde o mercado está exigindo que você traga um algo mais, o “plus”, o “extra”, o que realmente fará a diferença na hora de apresentar uma peça publicitária seja ela web, papelaria ou qualquer outro tipo de mídia. Precisamos conhecer o usuário/cliente, como ele pensa, quais são seus comportamentos, quais os principais pontos que determinam a sua satisfação, ele é base para a execução do seu trabalho.

Os pontos acima são meras dicas baseadas em experiências, a busca incessante por novas tecnologias, metodologias, estudos em bases de conhecimentos deve ser constante, para que você se mantenha atualizado. Por exemplo, acho extremamente importante que HOJE o Webdesigner possa ao menos saber o que é: Feed, AJAX, .Net, PHP, CMS, SEO, Semântica, IIS, Apache, MySQL, SQL, XHTML, CSS, Javascript, Web Standards, Padrões Web, W3C, XML, AS2, AS3, Arquitetura da Informação, Folksonomia, Taxonomia, TAGs, Psicologia das Cores, Webwriter, IP, DNS e mais uma porção de coisas que daria para listar aqui.

Talvez você webdesigner não concorde comigo, e olhe que nem expus minha opinião sobre o que realmente webdesigners deveriam aprender. Sinceramente, designers para web pagos somente para criar layouts? Sem saber XHTML? Sei que isto é possível, mas POR FAVOR o mercado quer que você dê o algo mais, já ouviu falar em “experiência”? Conhecimento NUNCA será demais. O que você tem a perder adquirindo conhecimento? Já deu uma olhada nas qualificações que ultimamente o mercado anda exigindo na sua área?

Tags Briefing, Comportamentos, Criação, Desenvolvimento, Padrões Web, Webdesigner | Nenhum Comentário » View blog reactions

Veja mais em:

Arquivos pesados no CorelDraw? Podem ser arquivos sujos.

Por: Diego Franco - [ March 16th, 2008 ]

Problemas com arquivos do CorelRecebi uma dica esta semana de um amigo que não posso deixar de compartilhar aqui, até porque conversando com alguns colegas vi que não era só eu que estava por fora do problema.

Recebo vários materiais de identidade visual que me auxiliam na criação de layouts, dentre estes materiais recebo arquivos de vários programas e um deles creio que os mais populares são os arquivos do Corel. Tenho percebido que muitos desses arquivos que recebo não tem nada nos elementos que façam com que se tornem pesados, às vezes uma logo com 3 cores, simples arquivos quem não compõem texturas nem lentes etc… ficam extremamentes grandes em Kb incompatível com seu conteúdo, exemplo disso foi que à alguns dias atrás recebi um arquivo da logo de uma empresa que simplesmente tinha duas cores e estava com 150kb, quando na verdade não passaria de 10 a 20kb.

Foi ai que conheci a dica da semana, tais arquivos podem ter sido gravados em uma versão do Corel com problemas, As características dos arquivos são:

  • - Arquivos mais pesados que o normal. Exemplo: Um arquivo que normalmente pesaria 50kb, fica com 300kb;
  • - Lentidão ao abrir;
  • - O gerenciador de exibições aparece com várias exibições inúteis. Aperte Ctrl+F2 para abrir o gerenciador;
  • - Se copiar um objeto desse arquivo e inserir em outro ele leva todas as exibições juntas;
  • - Acontece o mesmo se importar um desenho com esse problema para um arquivo que acabou de criar;
  • - Outro problema notado é quando vamos copiar qualquer objeto p/ inserir em outro arquivo. Pode demorar mais de 1 minuto. É como se estivesse copiando o arquivo e todos os defeito do mesmo. Pois quando inserido em outro arquivo, o novo também aparece com os problemas apresentados.

A solução para o problema é bem simples e está neste PDF escrito por Alan Melo adaptado por Ivanberg Moreira e o Desenho da Tela por Daywison Thales. Você tambm pode ter mais informações neste link do Vetorizar.com.

Pessoal o procedimento funciona mesmo e com certeza irá te ajudar. Desde já agradeço aos autores do tutorial e outros que não conheço que contribuiram para descobrir este bug do Corel.

Tags CorelDraw, Desenvolvimento, Dicas | 1 Comentário » View blog reactions

Veja mais em:

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.

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

Veja mais em:

« Posts Anteriores



Assine os Feeds do Modelando

Desconto de $70,00 nas hospedagens Dreamhost Cursos Visie!