eduardo lacorte » Desenvolvimento

Como resolver incompatibilidades entre IE7 e IE8

Eduardo Lacorte — Sat, 23 Jul 2011 08:02:35 +0000

Olá pessoal!

Nesse post quero explicar como resolver problemas de incompatibilidade entre os browsers Internet Explorer 7 e Internet Explorer 8, ambos ainda muito usados na Web.

É uma forma muito simples, que se fará valer do botão de compatibilidade que há no Internet Explorer 8, responsável por “emular” uma página acessada em IE8 como se estivesse sendo acessada em IE7 (estranho existir um botão desses de retrocesso, não??? rs).

Faremos uso de um código muito simples. Na verdade, uma única Meta Tag, conforme vemos abaixo:

Ao adicionar a Meta Tag acima ao do seu código HTML, a página sempre será acessada “emulada” automaticamente. Ou seja, quando o usuário acessar o seu site pelo IE8 (que não representa nenhum avanço na história da Web… rs) a página se comportará como se estivesse no IE7, e problemas como background-bottom (CSS) estarão automaticamente superados. O botão de emulação nem aparecerá, porque o browser entenderá que a página está sendo forçada a se comportar como se estivesse em IE7. Muito simples!

OBS: Se você trabalhar com HTML 5, o código é assim:

Isso porque na sintaxe do HTML 5 os fechamentos em caso de inexistência de fechamendo oficial de uma tag deixaram de existir.

Você usa o Dreamweaver? Muito bom!!! O código está presente no Painel Snippets (Shift + F9), na categoria Meta.

Abraços!

Como alinhar sites ao centro da tela com CSS

Eduardo Lacorte — Sat, 23 Jul 2011 07:48:20 +0000

Olá, pessoal!

Bom, esse é um post relativamente curto, onde explicarei como alinhar um site ao centro da tela através do CSS.

Existem duas maneiras, sendo que ambas são aplicadas ao div principal do seu site: a certa e o boato, sendo que o boato é o mais disseminado na Web, infelizmente. Primeiramente, vamos ao boato.

Alinhando sites ao centro da tela com divs de posição absoluta

Esse boato corre a Web, porém é uma explicação totalmente errada, principalmente pela ausência de teste de usabilidade. Veja abaixo um exemplo de CSS para o alinhamento dessa maneira:

#alinhacentro {
position: absolute;
width: 980px;
left: 50%;
top: 10px;
margin-left: -490px;
z-index: 1;
}

O código acima resulta em um site alinhado ao centro da tela, justamente por realizar um procedimento bastante simples:

A posição em X (left) do div é equivalente a 50% da tela.
Ao posicionar o div a 50% da tela, o próximo passo é recolher METADE da sua largura através da margem esquerda negativa.
Com isso, o div que estava com seu início a 50% da tela terá sua metade para trás, deixando assim o site exatamente no meio da tela.

Problemas

O usuário, se utilizar resolução inferior à largura do site, não conseguirá navegar nele por completo pelo fato da margem esquerda com valor negativo. O site entrará para a esquerda, inviabilizando principalmente os sites com menus verticais.
O usuário até pode ter resolução de tela compatível com o site, mas se ele utilizar o browser apenas com a metade da tela dele (digamos que ele esteja com duas telas ao mesmo tempo, sendo uma um documento do Word e outra o site, ou então um boleto bancário ou algo assim) enfrentará o mesmo problema.

Ou seja, essa maneira de formatação que corre a Web é absolutamente equivocada, e não deve ser praticada.

Alinhando sites ao centro da tela corretamente

Explicada a maneira errada, vamos à certa:

#alinhacentro {
position: relative; /* para o caso de necessidade de trabalho com divs absolutas dentro do site */
width: 980px;
margin: 0 auto; /* o primeiro valor é equivalente aos valores para topo e baixo, e o segundo para esquerda e direita */
}

O código acima resulta em um site alinhado ao centro da tela de maneira correta, pois não trabalha com a margem negativa. Você pode fazer o teste de usabilidade que sugeri, deixando o navegador com tamanho menor que o do próprio site, e verá que não enfrentará problema algum. Essa sim é a forma absolutamente correta de alinhar um site ao centro da tela com CSS.

Abraços!

Como exportar JavaScript do Dreamweaver para arquivos .js

Eduardo Lacorte — Sat, 23 Jul 2011 07:05:49 +0000

Sim, é isso mesmo que você leu! O Dreamweaver exporta seus comandos de JavaScript, criados através do painel Behaviors (assunto para outro post) de uma forma muito simples. Veja abaixo:

As imagens acima demonstram o uso do JavaScript do Dreamweaver. No exemplo acima, um código gerado para o manuseio da visibilidade de elementos (Show/Hide Elements).

A questão é que, por padrão, o código JavaScript do Dreamweaver é gerado no próprio , e se formos aprofundar o pensamento, ao duplicar as páginas via Templates ou includes (ou mesmo qualquer outra técnica), esse código será replicado para cada página, tornando as páginas mais pesadas e a manutenção mais complicada por “bobeira”.

O comando em foco na imagem abaixo resolve o problema:

Esse comando é extremamente útil, e ainda por cima te dá duas opções de sequência: exportação de forma simples (arquivo .js apenas) e forma não-obstrutiva (arquivo .js e retirada de todo e qualquer evento aplicado em tags HTML no decorrer do arquivo). Veja as imagens abaixo e seus resultados:

Exportação de JavaScript apenas do (opção 1)

Pela imagem acima nota-se que o Dreamweaver retirou o código JavaScript do e colocou-o em um arquivo .js, que é exportado para o mesmo local do HTML, por padrão. A chamada ao arquivo é inserida, como observado na figura acima.

Exportação total do JavaScript (JavaScript não Intrusivo / Obstrutivo)

Perceba que o Dreamweaver solicita a edição de IDs nos links e/ou objetos que utilizam JavaScript em seu arquivo. É um passo extremamente importante, pois é através do ID do objeto que o Dreamweaver viabilizará a utilização do JavaScript de maneira não intrusiva (ou obstrutiva, como alguns também chamam o método).

O resultado da operação será a geração de arquivos externos, conforme as figuras abaixo:

(Caso você não tenha o diretório SpryAssets, ao salvar o arquivo o Dreamweaver solicitará a criação do mesmo.)

A maior vantagem com relação a código limpo, obviamente está na segunda opção. Porém, não podemos nos esquecer que o Dreamweaver usará o framework Spry para a conclusão do processo, e como exibido na imagem acima, o arquivo gerado no diretório SpryAssets não é lá muito pequeno…

Veja abaixo um trecho desse arquivo, para que você entenda o que acontece:

(Chamada do Spry diretamente no arquivo .js gerado)

(Resultado final do HTML, com o link também para o arquivo SpryDOMUtils.js, bem como os IDs inseridos no código HTML)

A manipulação dos eventos ocorre totalmente fora do HTML. Porém, a sua manutenção também, no caso de, por exemplo, a inserção de mais algum elemento que precise da manipulação do Javascript. O Dreamweaver não será mais capaz de manipular o JavaScript criado por ele via painel Behaviors. Porém, o seu código estará mais limpo. Aí é questão de colocar na balança o que vale mais: um código alterável pelo Dreamweaver ou um resultado mais limpo?

É isso aí! Espero ter ajudado quem enfrenta esse problema no Dreamweaver.

Abraços!

Redução de Código CSS no Dreamweaver (CSS Shorthand)

Eduardo Lacorte — Sun, 22 May 2011 06:51:25 +0000

Olá, pessoal, tudo bem?

Bom, depois de 2 anos (sim, DOIS ANOS) parado, venho por meio deste post retomar o meu blog, com a mesma ideia de antes: publicar dicas sobre Web. Nada muda, a não ser a versão dos softwares. O que aliás, é uma vergonha pra mim, né? Retomar um blog somente após a mudança de versão de um software. Tenso…

Bom, bora lá! Vou retomar falando de Dreamweaver CS5. Mas a partir de agora, procurarei ser abrangente, e não mais citar no título da matéria a versão do software. Isso porque retomo o software com as matérias todas postadas para Dreamweaver CS4, e todas as dicas ainda são praticas no CS5, por exemplo. O mesmo ocorre com o Flash. Então, a partir de agora, apenas o software no título, e na matéria o descritivo do mesmo. No caso então, uma dica de Dreamweaver CS5. Mas que funciona em outras versões…

Uma grande reclamação de diversos desenvolvedores Web é que o Dreamweaver não gera CSS Shorthand. Ou seja, não gera o CSS de maneira otimizada, reduzida. Mentira! Mentira! Mentira!!!

Muitos não sabem, mas o Dreamweaver trabalha SIM com CSS Shorthand. Apenas não vem habilitado “de fábrica”. Onde está o truque?

Simples! Vá em Edit – Preferences (ou CTRL + U).

Acesse a categoria CSS Styles, conforme a imagem abaixo.

Habilite todas as opções desejadas com relação a CSS Shorthand (ou, mais uma vez, CSS Reduzido ou Otimizado)

Clique em Ok, e vá trabalhar!

Considerações relevantes:

Ao habilitar essa opção, todo código gerado pelo Dreamweaver será no formato CSS Shortand;
Se você estiver trabalhando com CSS e resolver fazer essa operação no meio de um desenvolvimento, é importante saber que o código gerado anteriormente NÃO SERÁ ALTERADO.
Um outro ponto a considerar é que o código gerado pela tela Page Properties NÃO É AFETADO PELO CSS SHORTHAND. Ou seja, para quem mexe com a opção Page Properties, nada muda.
CSS Shorthand reduz, em média, 30% do seu código CSS.

É isso aí. Fica a dica para quem mexe com Dreamweaver, e a explicação de que Dreamweaver gera sim CSS reduzido. Basta habilitar.

Abraços!

Vinte dicas sobre desenvolvimento Flash – Parte 1

Eduardo Lacorte — Fri, 15 May 2009 11:21:44 +0000

Olá, pessoal!

Que desenvolver em Flash é legal, todos sabem. Que sites em Flash são legais também. Quem desenvolve para a Web muitas vezes tende a optar pelo Flash pela sua riqueza em visual e vasta quantidade de recursos, mas muitas vezes acaba se esquecendo de detalhes básicos… antes, durante e depois do desenv0lvimento.

Exponho isso diversas vezes em treinamentos, e são detalhes que aprendi com pura e simples observação. No meu desenvolvimento e principalmente no dos outros. Sim, pois não se aprende Flash apenas desenhando, animando, e sim observando outros trabalhos, vendo técnicas novas de animação, etc.

Veja os principais cuidados que devemos ter ao trabalhar com Flash:

1 – Seu cliente precisa?

Um site em Flash pode ser bem mais caro que um site institucional (bom, isso é assunto para horas, pois cada profissional tem sua forma de cobrar), mas acima disso, será que o seu cliente precisa de um site em Flash? Quais são as reais necessidades do seu cliente?

É importante considerar esse ponto, pois um site que não atenda às expectativas do cliente logo é substituído, e provavelmente seu desenvolvedor também. Transparência e honestidade são extremamente importantes para o profissional Flash, principalmente ao indicar a tecnologia a ser utilizada. Faça o papel de consultor, e oriente o cliente em relação a isso. Em uma discussão franca com seu cliente conquiste sua confiança, e faça-o permitir apontamentos e sugestões. Uma boa técnica para isso é estudar seu público-alvo.

Pense no seguinte: você atenderá uma empresa cujo foco é a classe C. Você oferecerá um site em Flash simplesmente por ele ser “bonitinho”?

2 - Flash não é pesado, mas pode se tornar pesado.

O que pesa mais? Uma animação Flash de 80 kb ou uma fotografia de 80 kb? É a mesma que perguntar sobre o quilo de chumbo ou algodão. São a mesma coisa!

Porém há uma incidência direta do Flash sobre o vídeo da máquina do usuário. Uma animação Flash com uma bolinha subindo e descendo é uma coisa. Duas bolinhas ao mesmo tempo exigem mais processamento da máquina do usuário. Três bolinhas mais ainda… e quatro, e cinco… e isso sim torna-se pesado! Não pelo peso do arquivo, mas da necessidade de alto processamento vindo dos recursos de vídeo da máquina do usuário. Tente falar com seu amigo jogando uma bolinha para o alto. Depois duas, depois três… e então você não fala mais! Só se concentra. É o mesmo processo.

3 – Maldito botão direito.

Várias vezes testei sites na frente de alunos. Várias vezes peguei erros. Várias vezes apontei, zombei e ensinei.

Não sou perfeito, mas o botão direito de uma animação em Flash eu travo. Sempre. Já peguei sites onde o botão direito do mouse está destravado na aplicação Flash e o usuário consegue dar zoom no mesmo, desfigurando assim o site, o banner, o floater, o menu, ou seja lá o que for. É péssimo, e não é acessibilidade. Para tanto, no primeiro frame do seu site em Flash, utilize o código que trava o botão direito do mouse. Segue abaixo as duas versões de código:

A – ActionScript 2.0

Stage.showMenu = false;

B – ActionScript 3.0

Stage.showDefaultContextMenu = false;

E lá se vai o seu usuário sem dar zoom no seu site…

4 – Qual velocidade eu uso no Timeline?

http://www.eduardolacorte.com.br/2009/04/27/velocidade-do-timeline-em-um-arquivo-flash/

5 – Quero fazer um portal em Flash.

Inviável. Portal geralmente é acessado por diversos tipos de públicos, e não são todos que têm acesso a boa tecnologia, como internet rápida, computador bom e outros. Vá para o XHTML. Já teve universidade que fez isso e não durou muito tempo…

6 – E trilha sonora em site?

Vai de cada um. Certa vez passei horas escolhendo uma trilha sonora para uma animação que eu havia feito para a Ellemento, e depois de terminar mandei o link para um grande amigo meu avaliar, como usuário mesmo. A avaliação dele foi a seguinte: “Cara, gostei muito, só não gostei do som.”

Claro, perguntei o porquê. E a resposta: “É que eu já entro na Internet ouvindo música, e sites com música atrapalham o que estou ouvindo.”

É de se pensar…

7 – Qual a medida ideal para um site em Flash?

Não há medida ideal, e sim medida ideal para projeto a ser executado. O site será direcionado para qual público? Lembre-se que a resolução de 800 x 600 já está praticamente descartada. Outro fator a considerar é que os browsers não são iguais, e os usuários os utilizam de maneiras diferentes, com barras de ferramentas diferentes, dando então alturar diferentes.

Pessoalmente gosto de utilizar 980 x 550, pois desenvolvo para o público que usa no mínimo 1024 x 768 px na resolução de tela. E rolagem liberada, pois não sei o que o usuário tem no navegador dele. Avaliar altura é sempre complicado…

8 – E peso? Há peso ideal?

Não. Há bom senso. Você colocaria no ar um site de 2 MB para ser baixado pelo seu usuário? Ele está cheio de recursos? O que é realmente importante manter? Esvazie-o, elimine animações, deixe o seu site o mais objetivo possível. Certamente você atingirá para o primeiro carregamento algo em torno de 500kb a 1 MB, o que considero sim, IDEAL.

9 – Posso fazer o menu do meu site HTML em Flash?

Pode, mas não deve. O Flash inibe a apresentação do link na barra de status do browser do usuário, e muitos usuários consultam esse setor para saber precisamente para onde estão indo. O Flash não passa essa informação ao browser, o que pode gerar certa desconfiança no seu usuário. Site em HTML, menu em HTML. Não cabe Flash a esse setor.

10 – Filtros no Flash exigem cuidados também?

Sim. Tendem a deixar a animação mais lenta. Faça um teste aplicando um efeito do tipo Blur em uma palavra (desde que devidamente criada como Movie Clip), onde a mesma irá aparecendo aos poucos com Motion Tweening. No Flash ela terá o efeito desejado, mas no browser seu surgimento ficará mais lento. Evite grandes efeitos, seja prático e direto. É melhor.

—

Bom, essas foram algumas dicas que eu quis passar. Existem várias outras, que devo ir postando aos poucos. Mas espero que essas dez dicas acima o auxiliem em seu desenvolvimento Flash. Perceba que a grande maioria não passa de análise e bom senso. No Flash são fundamentais.

Grande abraço! Principalmente para a minha mãe, pelo seu aniversário! Um grande beijo, mãe… amo você! (ficou meio Xuxa, mas tudo bem… rs)