eduardo lacorte » Eduardo Lacorte

Resolvendo a sobreposição de arquivos Flash em Lightbox

Eduardo Lacorte — Wed, 27 Jul 2011 07:10:44 +0000

Ministrando um treinamento no dia de hoje fui consultado sobre um problema bastante usual no Desenvolvimento Web: sites que utilizam o recurso de Lightbox (ou Shadowbox, Fancybox, etc), que escurece a tela do site para mostrar uma imagem, e que acabam tendo problemas com aplicativos Flash que se sobrepoem ao efeito de escurecimento da tela. E como resolver isso?

Simples. Não importando a maneira como se implementa o Flash no site, ele deve ter seu wmode setado para transparent. Veja abaixo duas maneiras bastante usuais da resolução do problema:

Modo 1

Se a chamada do Flash for via JavaScript sem parameters no código HTML basta implementar o código ‘wmode’,'transparent’ em algum ponto da chamada da função, como abaixo:

Modo 2

Se a chamada do Flash contiver parameters no código XHTML, fica da seguinte maneira:

Já em HTML 5, a diferença é que não há o fechamento da tag nela mesma. Veja abaixo:

Com isso, os arquivos Flash sempre aparecerão atrás dos Lightboxes e variantes do mesmo efeito.
Abraços!

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

Find and Replace (Avançado) – Como utilizar?

Eduardo Lacorte — Sat, 09 May 2009 18:27:56 +0000

Salve galera!

Essa semana começou bem: renovei minha certificação de Dreamweaver, e agora tenho a Adobe Certified Expert (ACE) em Dreamweaver. A anterior era a de Dreamweaver MX2004 Developer (nem a do 8 eu tinha feito.. hahahaha). Devido a isso vou mostrar algo interessante para vocês…

Essa matéria consiste em explicar da maneira mais simples possível o Find and Replace, um recurso fantástico do Dreamweaver. Bom, na verdade todos os softwares têm esse recurso, mas no Dreamweaver a coisa é fantástica mesmo… principalmente no quesito MANUTENÇÃO!

É simples:

A localização dele é a mesma. Vá em Edit – Find and Replace (Ctrl + F). A caixa de diálogo aparecerá para você.

Primeiramente, vamos analisar as opções que temos de Find And Replace:

Find in:

- Selected Text: Buscará a informação desejada dentro do texto selecionado na página.
- Current Document: Buscará a informação desejada dentro do documento todo.
- Folder…: Buscará a informação desejada dentro do diretório escolhido, em qualquer página.
- Selected Files in Site: Buscará a informação desejada dentro dos arquivos que vierem a ser selecionados com a tecla Ctrl no painel Files do Dreamweaver (F8).
- Entire Current Local Site: Buscará a informação desejada dentro de todo o site especificado nas configurações do Dreamweaver (Site – Manage Sites)

Após selecionar o local de pesquisa, devemos informar o que estamos procurando:

Search:

- Source Code: Realiza a pesquisa de código. Ignora Design. Veja abaixo um exemplo:

- Text: Realiza a pesquisa de texto. Ignora tags e programação. Veja abaixo um exemplo:

- Text (Advanced): Realiza a pesquisa de texto dentro ou fora de tags específicas. Veja abaixo um exemplo:

OBS: Os sinais de + e – refletem a possibilidade de incrementar tal pesquisa com combinação de tags dentro tags ou fora de tags.

- Specific Tag: Realiza a pesquisa de Qualquer coisa. Veja as imagens explicativas abaixo:

A imagem acima reflete a seguinte pesquisa: “Todas as tags td que tiverem o atributo bgcolor com qualquer atributo que seja terão esse atributo removido. De todas as páginas do site” – (ahá… repare na imagem que deixei Entire Current Local Site na opção Find In)

Já a imagem abaixo mostra as possibilidades de pesquisa:

- With Attribute: Pesquisa tags com o atributo especificado.
- Without Attribute: Pesquisa tags sem o atributo especificado.
- Containing: Verifica conteúdo da tag selecionada anteriormente (td, no caso).
- Not Containing: Verifica ausência de conteúdo na tag selecionada anteriormente (td, no caso).
- Inside Tag: A tag selecionada (td, no caso) deve estar dentro de outra tag. Bom, seria mais útil se quiséssemos analisar todos os parágrafos dentro de células… (p inside td).
- Not Inside Tag: A tag selecionada (td, no caso) não deve estar dentro de outra tag. O oposto da explicação anterior.

Veja na imagem abaixo o que podemos fazer após a seleção de caso e pesquisa:

- Replace Tag & Contents: Com essa opção podemos substituir os ítens localizados pelo bloco de códigos que quisermos. Ao selecionarmos essa opção uma caixa de texto se abrirá para a digitação do código.
- Replace Contents Only: Somente o conteúdo das tags localizadas será substituído.
- Remove Tag & Contents: As tags localizadas e seus conteúdos serão removidos.
- Strip Tag: A tag é removida, tanto sua abertura quanto seu fechamento. Ex: Conteúdo – A tag font é removida, e seu conteúdo permanece.
- Change Tag: Troca uma tag por outra. Ideal para localizar todas as tags e substituí-las por .
- Set Attribute: Configura um atributo para as tags localizadas. Uma boa prática para se aplicar classes em massa…
- Add Before Start Tag: Adiciona um bloco de códigos antes do início da tag em questão.
- Add After End Tag: Adiciona um bloco de códigos após o fim da tag em questão.
- Add After Start Tag: Adiciona um bloco de códigos após o início da tag em questão.
- Add Before End Tag: Adiciona um bloco de códigos antes do fim da tag em questão.

Opções

Há também opções complementares às pesquisas, conforme vemos abaixo:

- Match case: Diferencia a pesquisa em maiúsculas e minúsculas. edu é diferente de Edu.
- Match whole word: Analisa a palavra como sendo inteira, e não parte de outra palavra. Nesse caso, Edu não faz parte de Eduardo, por exemplo.
- Ignore whitespace: Com essa opção o Dreamweaver passa a ignorar espaços em branco nas sequências, como o Tab, Enter, por exemplo.
- Use regular expression: Com essa opção habilitada o Dreamweaver passa a permitir o uso de Expressões Regulares (Regex) em suas pesquisas.

Tudo explicado. Basta utilizar de acordo com a necessidade, com os botões Find Next (Localizar próximo), Find All (Localizar Tudo), Replace (Substituir Próximo) ou Replace All (Substituir Tudo).

Salvando Pesquisas

Se você tem a intenção de executar a mesma rotina futuramente, seja ela qual for (retirar tag , remover atributo bgcolor, etc…), fique tranquilo. Você terá a possibilidade de salvar sua pesquisa, e carregá-la quando quiser. Ao salvar, o tipo de arquivo será .dwr. Basta guardar esse arquivo e carregá-lo quando necessário. Veja como fazer:

Para refletir

Atendi um cliente em um desenvolvimento em 2003. O site dele tinha 63 páginas. Em 2008 refiz esse trabalho, com exatos 5.542 códigos a menos!!! E o melhor de tudo: retirados do conteúdo total (que seria utilizado novamente) em quarenta minutos, aproximadamente!!! Como será que consegui isso???

Simples! Analisando todo o código que eu precisava retirar, estudando seus casos (remover bgcolor de td, class de qualquer tag, remover font de todo o site…), salvando cada pesquisa e aplicando tudo com a opção Entire Current Local Site. Simples, não?

Bom, galera… é isso aí! Espero ter explicado com clareza um pouco dessa ferramenta excepcional do Dreamweaver. Até a próxima!

Eduardo Lacorte
Adobe Certified Expert – Dreamweaver

Enviar artigo em PDF

Adobe Certified Expert – Eu sou um!

Eduardo Lacorte — Wed, 06 May 2009 15:04:26 +0000

Especificamente nesse post vou deixar a educação de lado, e dizer que passei num prova fudida da Adobe sobre o Dreamweaver CS3 (ainda não tem o CS4).

Eu já havia rodado uma vez, mas isso não importa. O que importa é que consegui passar, e posso voltar a exibir um título de Certified (a primeira certificação de Dreamweaver foi na versão MX 2004). A sensação é boa, principalmente quando aparece a palavra “Congratulations” no sistema.

Fiz a prova na New Horizons, o centro autorizado VUE mais próximo que encontrei. E a história é foda…

Era para eu ter feito a prova no dia 29 de Abril, não fosse o Agnaldo (MCT, MCSE, MCTS, MCSEILAOQUE…) marcar a prova errada! Saí de casa concentrado, preparado, me preparei psicologicamente, fui para o computador, a menina cadastrou tudo, botou a prova pra rodar, e pasmem… carregou a prova de PHOTOSHOP!!! Eu queria matar o Mineiro, sinceramente!!! O foda foi ir pra Paulista em um dia que eu não precisava ter ido, dar essa merda, voltar pra casa e ver um e-mail dele pedindo desculpas… é um asno mesmo! hahaha.

Brincadeiras à parte, o Agnaldo é um grande amigo meu, e agradeço por ele ter me ajudado a marcar a prova e deixar tudo certinho pra mim. Mas enfim, voltando ao “causo”…

Com essa confusão toda 100 dólares foram pro saco, e a prova teve que ser remarcada, para 04 de Maio, segunda-feira, 17:15h. Pela segunda vez, mais 100 doletas…

Passado todo o feriado, lá vou eu dar aula de Dreamweaver CS3 segunda de manhã. Peguei uma turma bacana, e o dia foi todo assim, totalmente descontraído. Almocei com o Mineiro e outro amigo dele, falei muita besteira, dei muita risada, até dar a hora da prova. Mas nessa eu tinha que passar, de qualquer jeito.

O resumo da ópera: 71 questões, 140 minutos, muitas pegadinhas, e tudo em INGREIS! Foda, muito foda!

Como na primeira prova eu interpretei demais as questões e acabaram ficando umas 20 para responder nos 10 últimos minutos, optei por uma tática diferente, onde decidi responder o que eu sabia, marcar o que eu não tinha certeza e responder também o que eu não sabia (não sei, não perco tempo). Mas acima de tudo, marcar as questões que eu não sabia no papel, relacionadas por assunto. Algo como (5 – Manage Sites, 6 – Bindings), e então, ao final da prova, responder as questões sabendo previamente seus assuntos. Querem saber? Foi uma boa tática, pois terminei o exame com mais de 10 minutos de folga.

Saí de lá com uma sensação vitoriosa, realmente muito feliz. Saí de lá, e fui dar o treinamento de Dreamweaver com acesso a banco de dados, o meu primeiro como ACE.

A certificação ainda não chegou, mas já posso usar o título da Adobe. Então, até a próxima!

Enviar artigo em PDF

Velocidade do Timeline em um arquivo Flash

Eduardo Lacorte — Mon, 27 Apr 2009 19:24:18 +0000

Até o Flash CS3, o padrão de velocidade de um arquivo era de 12 frames por segundo. Cá entre nós, praticamente impossível trabalhar legal nessa velocidade… até que surge o Flash CS4 e muda o padrão para 30 frames. Legal…

Porém, podemos abrir mão desse conceito de TV / Cinema x Frames por segundo, passando a pensar em qualidade e simplesmente trabalhando com outras velocidades que viabilizem melhor animação. Qual tal SESSENTA frames por segundo?

Vamos tomar como exemplo uma animação de uma janela aparecendo na tela. Pelo nosso briefing ela precisa de 2.5 segundos para aparecer completamente na tela. Efeito simples… de alpha 0% para 100%, por exemplo. Ou deslocamento de um ponto a outro.

Com a velocidade de 12 frames por segundo no seu arquivo você precisará de 30 frames para executar essa animação. Logo, serão 30 passos ou 30 estágios de evolução da sua animação.

Já com a velocidade de 30 frames por segundo a coisa melhora um pouco no quesito qualidade, justamente porque você passará a utilizar o dobro de passos para a mesma animação, pois para executá-la em 2.5 segundos você precisará de 75 frames!

Imagine agora a mesma animação a 48 frames por segundo, e 120 frames no Timeline. É a quantidade necessária de frames para atender àqueles 2.5 segundos do briefing.

Mas o meu frame rate (taxa de frames) preferido é 60 frames por segundo. Eu utilizaria 150 frames para obter a mesma animação, atendendo aos 2.5 segundos.

Veja as imagem abaixo e entenda onde está a explicação disso:

Perceba que cada contorno é um passo da animação (visualizada com Edit Multiple Frames e Outlines na opção da camada). Quanto mais distante um passo se encontrar do outro, maior será o pulo entre eles. E somando isso à baixa velocidade do arquivo, o efeito de travamento na sua animação será dado como certo.

O objetivo é aplicar um efeito de deslize perfeito, por isso mais intervalos dentro do mesmo espaço são imprescindíveis. Realize o teste com motion ou shape na sua animação (independente) e tire suas próprias conclusões. Ao longo da sua experiência com Flash você ouvirá perguntas como:

“A quantidade de frames por segundo aumenta exponencialmente o tamanho do meu arquivo?”
Resposta: Não. Ela acrescenta sim, algo a mais, mas nada relevante, pois para o Flash é mais importante a quantidade de desenhos e imagens, e não a velocidade do mesmo.

“A quantidade de frames por segundo pode interferir na execução da aplicação na máquina do meu usuário?”
Resposta: Sim, pois serão mais passos de animação. Porém, convém analisar o público-alvo antes de aplicar a técnica. Se for um site voltado para um público que não tem problemas com maquinário, tudo bem. Senão, convém partir para a web estática e deixar o Flash um pouco de lado. Ou então trabalhar com uma velocidade baixa para atender o público com menor acesso a bom maquinário. Banners a serem exibidos em portais, por exemplo, CONTRATUALMENTE têm seus frame rates reduzidos. O Terra, por exemplo, solicita o banner com a velocidade fixada em 18 frames por segundo.

“Ouvi dizer que a visão humana capta 24 posições por segundo. E se eu usar mais do que isso no Flash?”
Resposta: Estamos falando de qualidade, não de Leis da Física, Ótica, seja lá o que for. O assunto é qualidade de animação, não passagem de mensagem subliminar, o que a visão humana capta ou não. Ela captará qualidade na animação, e isso é inquestionável.

Bom, pessoal, é isso aí. Além de ser um momento “Para refletir”, é também uma boa dica de uso do Flash, e também uma opinião pessoal, de que devemos focar em qualidade, não em Leis da Física ou processamento. Um post 3 em 1… que beleza!

[]‘s!

Enviar artigo em PDF