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)

Send post as PDF to

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: <font…>Conteúdo</font> – A tag font é removida, e seu conteúdo permanece.
- Change Tag: Troca uma tag por outra. Ideal para localizar todas as tags <b> e substituí-las por <strong>.
- 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 <font>, 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

Send post as PDF to

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!

Send post as PDF to

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!

Send post as PDF to

Olá, pessoal!

Que o Flash é um software de animação todos sabem. Que aprender Flash sozinho é complicado todos sabem. Inclusive eu. =)

O Flash trabalha com uma Linha do Tempo (Timeline), que sempre anda pra frente, e pode ser trabalhada de maneiras diferentes. Decidi então escrever uma matéria sobre os comandos básicos que podem ser aplicados nesse Timeline, o que costuma ser dúvida entre muitos principiantes. Creio que o domínio sobre os principais comandos do Timeline ajudam e muito na evolução do uso desse software “estúpido” da Adobe!

Para começar, veja a imagem abaixo:

Agora, uma relação dos principais atalhos de teclado que você deve saber para trabalhar de maneira simples com o Flash CS4:

• Insert Frame (Inserir Frame): F5
• Insert Keyframe (Inserir Quadro-chave): F6
• Insert Blank Keyframe (Inserir Quadro-chave em branco): F7
• Copy Frames (Copiar Quadros): Ctrl + Alt + C
• Paste Frames (Colar Quadros): Ctrl + Alt + V
• Clear Keyframe (Limpar Quadro-chave): Shift + F6

Veja também uma pequena lista de comandos de mouse que podem ser executados:

• Botão direito em qualquer frame: Surgirá uma lista de comandos para operações rápidas (Criar animação, Recortar frames, colar…)
• Clicar em um frame que não esteja selecionado: Seleciona o mesmo (óbvio…)
• Clicar em um frame que não esteja selecionado, segurar, arrastar e soltar: Seleciona uma quantidade maior de frames
• Voltar a clicar em frames previamente selecionados com o comando acima: Desloca esses frames para outra posição, com o objetivo de acelerar / retardar uma animação
• Clicar fora (ou Esc, o correto…): Tira a seleção dos objetos ou frames

Bom, passados os principais comandos, vamos a um exemplo simples de uso:

- Desenhe um quadrado no seu palco, de qualquer medida, com qualquer cor, em qualquer posição.

- No painel Timeline, clique no frame 30 (não no número, e sim no frame) e pressione F6. Você terá inserido um Keyframe.

- Clique nele e realize uma edição qualquer (troca de cor, por exemplo). Ele estará diferente dos anteriores. Pressione Ctrl + Enter para testar a sua animação.

- Caso você queira prolongar a minha animação basta clicar uma vez no frame 30 e soltar. Clique novamente, segure e arraste o frame mais para frente, e solte onde desejar.

- Para realizar mais passos de animação basta continuar o trabalho pressionando F6 para criar os intervalos e as edições. Nesse ponto vale lembrar que SOMENTE É POSSÍVEL REALIZAR EDIÇÕES EM KEYFRAMES. Então, caso queira realizar uma edição em um local que seja um frame simples, basta transformá-lo em um Keyframe, com F6.

- Caso queira transformar um Keyframe em Frame, pressione o botão direito sobre o Keyframe em questão e escolha a opção “Clear Keyframe”.

- Caso queira inserir um Blank Keyframe em algum ponto da sua animação, pressione F7. O Blank Keyframe serve para criar espaços na sua animação, com o intuito de fazer com que uma animação comece depois, ou haja um intervalo entre duas animações.

- Agora, observe a imagem abaixo:

- Na camada Cenário foi pressionado F5 no frame 30, para que o fundo da animação fosse apenas prolongado, para o caso de uma futura edição todo o conteúdo ser facilmente atualizado através do primeiro frame apenas. Apenas usamos o F5 em caso de não haver animação futura naquela camada.

- Na camada Círculo foi elaborada uma animação que começa no frame 1, vai até o 15 quadro a quadro e se estende até o 30 com F5.

- Na camada Ellemento foi elaborada uma animação que começa no frame 20, onde foi pressionado F7 para marcar o seu início, e do frame 20 pra frente foi feita uma animação quadro a quadro também, com o auxílio do F6.

Os recursos de mouse que expliquei mais acima são usados para manutenções, como deslocamento de animação (para que ela comece mais para frente ou mais para trás), remoção de frames em excesso (botão direito na área desejada – Remove frames), desistência de ter um Keyframe em determinado local (Clear Keyframe), etc…

É questão de muito treino, por isso recomendo a animação de um boneco, com um braço em cada camada, uma perna em cada camada.

Para editar vários frames ao mesmo tempo:

Usa-se o recurso Edit Multiple Frames, presente também no painel Timeline, no local indicado na figura abaixo:

Ao clicar na opção citada acima, duas alças (Onions) aparecerão acima dos frames, no Timeline, e é o ajuste delas que permitirá a edição daquele setor por completo, bastando fazer uma seleção simples de objetos (Ferramenta Seleção) para poder selecionar também os frames que estiverem compreendidos entre os onions.

OBS: Extremamente recomendável desabilitar a opção Edit Multiple Frames ao término do uso.

[]’s a todos os principiantes de Flash, e boa sorte nos estudos! Vale a pena! =)

Send post as PDF to

Olá, pessoal!

Pensando no que escrever, me lembrei de algo que eu sempre abordo nos meus treinamentos na Impacta, e por incrível que pareça, o Dreamweaver CS4 (e nem seus antecessores) não faz automaticamente: tratar a borda gerada pela inserção de um link em uma imagem como um estilo CSS.

Então… vamos fazer com que ele trate! Vamos lá:

- Insira uma imagem do seu site no seu arquivo (salvei o arquivo como demo.html).

- Clique nela e vá no painel Properties (Ctrl + F3). Lá coloque um link qualquer na sua imagem e coloque na opção border o valor 0.

- Verifique o código-fonte (modo Code). Você perceberá que o código border=”0″ foi inserido no HTML. Até aí tudo bem… mas se tivéssemos 483 imagens na nossa página seriam 483 border=”0″ pelo documento… além de border=”0″ ser atributo visual, não considerado pelo XHTML 1.0 Strict!!

- Volte para o modo Design, e retire o valor de border. Aproveite e tire os valores de largura e altura da imagem, sob o mesmo conceito de repetição desnecessária de código. Largura e Altura somente devem ser usados em caso de imagens com tamanho que não seja real, o que não é muito comum…

OBS: Nesse momento, ao clicar em algum outro ponto da página, você perceberá que a imagem ficou com a costumeira borda azulada. 

- Acesse o painel CSS (Shift + F11) e crie uma nova regra (New CSS Rule).

- Crie uma regra que será aplicada a todas as imagens da sua página, conforme a figura abaixo.

OBS: Recomendável criar a regra em arquivo css externo, para que você possa controlar todas as imagens do site com uma única regra em um único arquivo.

- Na janela de configuração do CSS, vá à opção Border, e preencha sua largura como zero.

- Clique em Ok, volte ao arquivo. Repare que a borda da imagem sumiu. Vamos ao código:

- Dá para otimizá-lo com uma pequena regra, que pode ser aplicada assim:

- A linguagem CSS entende 0 como sendo valor absoluto. Você tem 0 pixels, 0 centímetros, 0 reais, 0 moedas… você não tem nada. É tudo 0, portanto a unidade de medida pode ser retirada. E também que podemos generalizar, querendo que TODAS AS BORDAS tenham valor zero.

E assim fica corrigido o problema. Anulamos todos os border=”0″ que poderiam aparecer em virtude da inseração de links em imagens, e implantamos o que deveria ser praxe para o Dreamweaver.

[]’s!

Send post as PDF to

Essa é para o povo do Flash (Van, Erica, Renan, Lu e galerinha que eu tinha falado que escreveria)… máscara!

Máscara é um recurso bastante utilizado por profissionais do Flash, mas ao mesmo tempo é um recurso bastante simples de ser criado e explicado. É um dos meus recursos preferidos, por se tratar de um efeito que tem muitas vertentes de uso.

Veja abaixo como vou tratar esse assunto:

- Configure o arquivo para fundo preto, velocidade de 30 fps (frames por segundo). Para isso vamos pela forma mais fácil, através do painel Properties (Ctrl + F3).

- Selecione a ferramenta Oval (O) e faça um círculo sem contorno fora do palco, na cor que desejar.

- Com a ferramenta seleção (V), selecione o círculo e alinhe-o verticalmente ao centro em relação ao palco, através do painel Align (Ctrl + K)

- Com o círculo ainda selecionado, selecione o círculo e pressione F8, para salvá-lo com o nome de Luz, sendo um objeto do tipo Gráfico. Adote como padrão a opção Registration ao centro, até obter maiores explicações sobre o que é isso (outros posts…).

- De volta ao palco, no painel Timeline, vá ao frame 60, pressione F6 para a inserção de um Keyframe* e desloque o objeto para a outra extremidade do palco.

* Keyframe: Quadro-chave, cópia do quadro-chave imediatamente anterior.

- Ainda no painel Timeline, com o botão direito no primeiro keyframe, clique na opção Create Classic Tween, para aplicar a interpolação de movimento. Até o Flash CS3 essa opção era conhecida como Create Motion Tween.

- Dê à camada o nome de Luz, e crie uma nova camada com o nome de Palavra.

- Com a ferramenta texto em Static Text e a configuração do texto com a fonte desejada e um tamanho aproximado ao da altura da Luz, escreva a palavra Ellemento (tá, marketing… rs), pinte-a de preto e dê o mesmo nome à camada. Os contornos na palavra são apenas a opção Outlines habilitada. Desconsidere-as. Alinhe a palavra ao centro da tela.

- Teste o filme (Ctrl + Enter). A luz deverá passar por trás da palavra.

Bom, agora vamos à mascara:

- Com o mouse em cima do nome da camada superior (Ellemento), clique com o botão direito, e habilite a opção Mask.

- Os ícones das camadas mudarão, conforme a figura abaixo:

- Teste o filme (Ctrl + Enter). O resultado deverá ser como o da imagem abaixo:

- Salve o arquivo como máscara.fla e gere o swf novamente através do Ctrl + Enter. Está pronto para ser inserido em alguma página HTML.

Em resumo: Máscara não passa de inversão do campo de visão. O que não víamos passamos a ver, e o que víamos se torna oculto. No exemplo construído não conseguíamos ver a luz por trás da letra, e com a máscara só vemos o que estava por trás da letra. A mesma coisa acontece com um quadrado em cima de uma imagem. Sem máscara o quadrado tapa a imagem, e com o quadrado ele mostra a imagem. Para editar a máscara, basta tirar os cadeados das camadas. Simples, não?

Até!

Send post as PDF to

Olá, pessoal.

Vou demonstrar nesse tópico algo relativamente simples, mais uma vez voltado para o público iniciante em Dreamweaver e Desenvolvimento Web em geral, mas que já conhece um pouco de XHTML e CSS: como formatar tabelas de dados com CSS.

Muitos desenvolvedores fazem como no Word: selecionam as células da tabela e, através do Painel de Propriedades (CTRL + F3), centralizam os conteúdos das células, ou ainda aplicam cor de fonte, fundo e outras manobras que só fazem com que o código cresça exponencialmente (partindo do princípio que o site pode conter inúmeras tabelas). Embora seja uma manobra errada é a mais aplicada, pela sua comodidade e muitas vezes a falta de conhecimento dos desenvolvedores. E como eu sempre digo: formatar pelo Painel Properties é a pior roubada em que um desenvolvedor pode se meter (a não ser para aplicar regras CSS previamente criadas).

Vamos deixar de blá blá blá e mãos à obra!

Software Utilizado: Adobe Dreamweaver CS4
Requisitos: Conhecer um pouco de XHTML e CSS

Considere a tabela abaixo:

É uma tabela simples, sem formatação alguma, como realmente deve ser. É um grande erro o desenvolvedor gerar conteúdo e formatá-lo ao mesmo tempo. Primeiro faça o básico, depois se preocupe em formatar. =)

- Abra o Painel CSS Styles (Shift + F11)

- Declare uma nova regra CSS (New CSS Rule)

- Preencha a sua caixa de diálogo como mostra a figura abaixo:

OBS: Conforme solicitado um conhecimento mínimo de CSS, nesse exemplo irei colocar a Rule Definition em “This document only” (gerar código CSS para esse documento e nesse documento, em seu cabeçalho), mas fica a critério do desenvolvedor se o CSS deve ser gerado em um arquivo .css (New Style Sheet File), ou mesmo um CSS já existente.

- Defina a regra .dados. Utilizei configurações básicas como exemplo (atenção à última tela da imagem):

- Clique em OK.

- Volte à página, selecione a tabela pelas suas bordas ou pela tag <table> no navegador de tags, e aplique a classe dados, que estará disponível na opção Class no Painel Properties.

O resultado será uma tabela com textos centralizados e fonte Verdana, conforme formatado. Porém, perceba que as bordas não foram atribuídas às células, e sim à tabela apenas, ou as bordas exteriores. Para resolver o problema temos que criar outra regra CSS (Painel CSS Styles novamente – New CSS Rule), com o nome de .dados td, conforme a imagem abaixo:

Explicando:

Todas as tags <td> que estiverem dentro de uma tag tomada pela classe dados serão formatadas de acordo com a regra criada. Veja como podemos eliminar vários códigos, com o auxílio da programação abaixo:

- Ao configurar como a imagem acima, aperte Apply. Você perceberá que todas as células ficaram com suas bordas pretas. Poderiam, por exemplo, ter ficado maiores, caso eu tivesse declarado altura (atributo Height, na categoria Box)…

Assim como o exemplo acima, você também pode criar uma classe para os títulos das tabelas, chamada .dados .titulo (essa classe só funcionará se estiver dentro de um objeto que tenha a classe .dados), aplicar nas primeiras células ou linha da tabela, bem como outra regra chamada .dados .par (para as linhas pares dos dados da tabela) e obter um resultado como o da imagem abaixo:

Questionamento: uma classe ou um identificador?

Simples. Um identificador faria com que essa técnica fosse usada para uma tabela exclusivamente, ao passo que uma classe permite o uso em diversas tabelas ao mesmo tempo, controlando assim o visual dos dados do seu site como um todo.  Eu poderia trocar as cores de todas as tabelas do meu site apenas com essas quatro configurações (desde que elas estivessem escritas em um arquivo .css externo, e não no mesmo arquivo, claro…).

As duas técnicas geram o mesmo resultado, com a diferença de ID ser destinado a uma região apenas. Aí vai de você definir… se será necessário aplicar a técnia em várias tabelas ao mesmo tempo (considerando mais de uma por página) ou se haverá apenas uma tabela por página. No primeiro caso a classe é o melhor modo. Já no segundo o identificador (ID) atende melhor, considerando até mesmo implantação de AJAX e menor uso de regras CSS.

É isso aí. Tópico simples de aplicar, e espero que simples de entender. Principiantes, mãos à obra! =)

Send post as PDF to

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:

1. Conjunto de marcas, produtos e serviços de uma empresa.
2. Conjunto das contas de uma agência, produtora, fornecedor ou profissional.
3. 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

Send post as PDF to