eduardo lacorte » Dicas

Extensão Chrome: View Image Info

Eduardo Lacorte — Tue, 26 Jul 2011 10:11:46 +0000

Algumas funções que damos por garantidas nos browsers e usamos diariamente não estão disponíveis em todos. Existem funções que vemos disponíveis em um e que não estão disponíveis nos outros. É nestas alturas que as extensões podem dar uma ajuda e amenizar as falhas, atribuindo essas funções onde elas não existem.

Um exemplo prático destas lacunas é a opção que o Firefox tem disponível no seu menu de contexto e que permite vermos informações sobre uma imagem, de forma simples e rápida. Para o Chrome, que não tem essa função acessível nos seus menus, existe a extensão View Image Info.

O View Image Info adiciona ao menu de contexto do Chrome uma nova opção que permitirá acessar de forma simples e rápida a toda a informação disponível sobre uma imagem que esteja em uma página web.

Essa opção chama-se View Image Info e ao ser seleccionada abre uma nova janela com toda a informação dessa imagem. A informação a ser disponibilizada vai desde a localização (endereço), dimensões, tipo da imagem, tamanho, texto associado e uma pré-visualização da imagem.

O fechamento dessa janela informativa pode ser feito normalmente ou através de um simples clique na tecla Esc.

Depois de terem instalado o View Image Info vão então ter disponível essa opção para que possam verificar os parâmetros das imagens que pretenderem e saberem um pouco mais sobre ela.

Esta função está disponível no Firefox desde o seu inicio e é bastante útil para quem desenvolve páginas web. Passa agora a estar disponível também no Chrome e da mesma forma que o Firefox o faz.

Fazemos notar que apesar de não estar acessível de forma simples como no Firefox ou através da extensão View Image Info, o Chrome tem esta informação disponível através das ferramentas do Programador. Esta extensão apenas facilita o acesso à informação.

Tornem o Chrome mais simples de usar e com maior informação acessível. Esta extensão, bem como outras que já apresentamos, permitem dar ao Chrome algumas das funções que estão em falta desde o seu início.

Download: View Image Info (properties) 0.0.1.0
Homepage: View Image Info (properties)

Fonte: http://pplware.sapo.pt/google/extensao-chrome-view-image-info
Créditos: Pedro Simões

* Apenas adaptei a matéria para o Português – Brasil, mantendo a sua originalidade.

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 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)

Portfólio ou Portifólio?

Eduardo Lacorte — Mon, 06 Apr 2009 17:17:20 +0000

Bom, para colocar o primeiro post no meu site, optei por um texto bastante interessante, que achei para ver de que maneira colocaria o link no MEU site. Autoria de Luiz Gonçalves.

Pouca gente tem firmeza na hora de escrever esta palavra tão usada em agências. É com i ou sem i? Tem acento? Nem o Word sabe. Veja a origem do termo e considere usar porta-fólio. Pois é, mais um termo que gera confusão. Afinal o que a gente carrega debaixo do braço ou publica virtualmente em nossas “pages” tem acento? Tem “i”? Bom, ainda que o que interesse mesmo seja o conteúdo, vamos pesquisar e definir a forma.

Segundo o dicionário publicitário online, a palavra significa:

Conjunto de marcas, produtos e serviços de uma empresa.
Conjunto das contas de uma agência, produtora, fornecedor ou profissional.
Conjunto dos títulos de uma editora e de programas de uma emissora de rádio e TV.

No italiano moderno a palavra se tornou “portafoglio” e no inglês “portfolio”. É curioso o fato de em português utilizarmos “portfólio” ou “portifólio” ao invés de “porta-fólio”, que é o correto e o mais natural na latinização moderna da palavra.

Enfim, a expressão “portfólio” é claramente ligada ao anglicismo, com o aportuguesamento caracterizado pela inclusão do acento na letra “o” pois se trata de uma paroxítona terminada em ditongo oral.

O vocabulário da propaganda utilizado no Brasil é excessivamente influenciado pelas expressões inglesas, numa referência ao trabalho desenvolvido pelos norte-americanos na construção dos modelos e referências desta área.

Assim, a palavra “portifólio” é usada – mas não conta nos dicionários Aurélio, Houaiss ou Michaelis, onde a grafia certa é “porta-fólio”. Esta, portanto, é a adequada quando se busca de uma identidade nacional para se utilizar o termo.

“Portifólio” talvez seja usado por uma questão fonética, afinal soa bem estranho a pronúncia da alternativa “portfólio” com o “t” mudo. Mas não consta dos dicionários que citamos.

Como se trata de uma palavra de utilização restrita no segmento artístico e de comunicação, é natural que se encontre uma ausência de conceituação até em dicionários renomados, prevalecendo a definição leiga que utiliza indiscriminadamente as duas formas – “portfólio” ou “portifólio”.

Você pode usar “portfolio” e “porta-fólio” e deve evitar portifólio. Só não esqueça da qualidade do conteúdo…

fonte: webinsider
autor: Luiz Gonçalves