Fazendo seu HTML ficar por cima do FLASH

Oláá pessoal!! Venho por meio deste post compartilhar o que talvez tenha sido a minha melhor descoberta.

O Problema

Acho que o mais comum é ter um menu horizontal com submenus e logo abaixo dele, vem um banner em flash. Quando tenta-se abrir um dos submenus, ele fica por baixo do flash, sendo impossível de ser clicado. Veja um exemplo:



E aí, o que fazer? A maioria de nós opta por refazer o menu inteiro em flash, mas calma, isso não é necessário. Na verdade, é mais simples do que você imagina!!

A única coisa que temos que fazer é deixar o flash transparente. Como? Vá no código gerado para o objeto em flash e adicione a seguinte tag: <param name="wmode" value="transparent"> e no último embed, junto com os parâmetros width, height, src, type e o que mais tiver ali, adicione wmode="transparent". Veja:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="100">
<param name="movie" value="banner_post.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="banner_post.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="100" wmode="transparent">

Veja como fica depois de implantados os códigos:



Para quem está usando as versões mais atualizadas do Dreamweaver, ele gera um código em javascript, creio eu que seja para contornar aquele problema do Internet Explorer, que é necessário dar um clique no flash antes de poder utilizá-lo. Basta colocar o wmode também no javascript para que esse método funcione:

AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '1000',
'height', '768',
'src', 'teste',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'teste',
'bgcolor', '#000000',
'name', 'teste',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'teste',
'salign', '',
'wmode', 'transparent'

); //end AC code

Voilá, está pronto!!!

Um grande abraço para todos!!

Dificuldades de um desenvolvimento de software e o método JAD

O desenvolvimento de um software não é uma tarefa simples, tanto que cada vez mais é visto como uma disciplina de engenharia, envolvendo várias técnicas e processos de planejamento e formalismo. Diante disso, um mal comprometimento das pessoas envolvidas pode acarretar em vários problemas.

Uma das grandes dificuldades é transformar o conhecimento tácito do cliente em um conhecimento explícito, ou seja, transformar o conhecimento que o usuário do sistema adquiriu com sua experiência e estudos em sua função, e que, por essa razão, só ele o detém, em algo que qualquer um possa entender. Não dedicar tempo para coletar os dados necessários para o entendimento do processo, torna isso ainda mais difícil.

Quando o levantamento de requisitos não foi bem feito, obviamente o sistema será prejudicado e sua qualidade fica comprometida, gerando uma insatisfação do cliente com o produto final, o que o leva à falta de confiança nos serviços de quem contratou.

O Joint Application Design - JAD é um método de desenvolvimento de softwares que, segundo relatos de quem o utiliza, aumenta a produtividade, minimizando os eventuais problemas, se não os eliminam.

Esse método foi desenvolvido pela IBM do Canadá em 1977 e utiliza-se de reuniões conduzidas por um líder neutro que orienta os analistas e os clientes a trabalharem juntos no desenvolvimento do sistema. Dessa forma, eles se tornam co-responsáveis pelo sucesso ou pelo fracasso do projeto.

São vários os benefícios trazidos pelo método. Estudos mostram um aumento de 20% a 60% na produtividade em relação a outros métodos.

Poderia-se dizer que o maior benefício do método é a maior qualidade do projeto, afinal, as informações produzidas pelo trabalho em equipe dos desenvolvedores do sistema e do cliente, são apoiadas no conhecimento de cada um deste grupo, e como há essa maior participação de quem requisitou o sistema, o resultado final é o que realmente era-se esperado dele, o que gera uma redução dos custos de desenvolvimento e manutenção, pois a necessidade de correção do produto final é menor, se não nula.

Para entender mais sobre os processos do JAD acesse: http://en.wikipedia.org/wiki/Joint_application_development

Baseado no texto: O Desenvolvimento de Software Aplicando a Técnica Joint Application Design

Entendendo a tecnologia computacional

Uma perfeita analogia de como funciona um sistema de computação:

Mostrando códigos html no post

Para fazer o post anterior, precisei mostrar nele próprio alguns códigos em html, porém, mesmo digitando-os no modo "Escrever" do blogger, os códigos continuam sendo interpretados pelo navegador, então, o que fazer?

É simples. Troque o caracter ' < ' que inicia uma tag pelo código html que a representa: &lt , em seguida, troque o caracter ' > ' , que fecha uma tag, pelo seu código html: &gt .

Dá trabalho? E como!!! Mas não se preocupe, existe um formatador automático, onde você digita o cógido html a ser colocado no post e ele já faz todo o trabalho por você:

http://alexestudos.eti.br/formatador/

Abraçoooos =)

Desenvolvendo seu site para diferentes browsers

Diferentes browsers renderizam os códigos de uma maneira ligeiramente diferente. Fato! Algo que traz uma grande dor de cabeça para um desenvolvedor web. Uma div fica totalmente à esquerda no Firefox, mas no Internet Explorer ela fica alguns pixels mais à direita. Uma célula de uma tabela dá um espaçamento entre sua borda e seu conteúdo no Internet Explorer, no Firefox, o conteúdo fica grudado. Esses são apenas alguns exemplos do problema, mas não se preocupe, existe uma maneira fácil de resolver.

No código CSS, você pode utilizar um caracter de escape que diferencia os códigos para os diferentes browsers. Quando você quiser diferenciar uma propriedade de algum elemento para o Internet Explorer, basta colocar na frente dela o caracter underline ( _ ), a propriedade que não tiver nenhum caracter de escape funcionará para o Firefox. Veja um exemplo:


div{

margin:10 px 0 0 8px;
_margin: 0 0 0 20px;

}

No Firefox, a margem de cima da div terá 10 pixels e a margem da esquerda, 8 pixels. Já no Internet Explorer, essa mesma div terá apenas 20 pixels para a margem da esquerda.

As diferentes versões de algum browser também trazem esse tipo de problema. Com a chegada do Internet Explorer 7, vários sites tiveram que ser refeitos pois muitas das "gambias" feitas nos códigos CSS para contornar eventuais problemas das versões anteriores já não funcionavam mais na nova versão do navegador e as diferenças com outros navegadores continuaram a existir. Felizmente, existe um caracter de escape para o IE7 também, que é o asterisco ( * ) (não é asterísTIcooo!!!).

div{

margin:10 px 0 0 8px;
_margin: 0 0 0 20px;
*margin:10px 0 0 0;

}

Agora, no Internet Explorer 7 a margem de cima da div terá 10 pixels.

Como dito anteriormente, vários desenvolvedores tiveram que reescrever seus códigos CSS para que seu site pudesse ser visualizado corretamente no IE7. Mas e aí? Nos outros browsers eles deixariam de funcionar? Não necessariamente. Para que isto não fosse um problema, foram desenvolvidos os Comentários Condicionais. Utilizando esta técnica, você pode tanto importar um arquivo CSS inteiro, como editar apenas uma parte do código. Veja:

-Se for IE faça:

<!--[if IE]>

<!--[endif]-->

-Se for superior ao IE5 faça:

<!--[if gt IE5]>

<!--[endif]-->

-Se for IE5 ou superior faça:

<!--[if gte IE5]>

<!--[endif]-->

-Se for anterior ao IE 5.5 faça:

<!--[if lt IE5.5]>

<!--[endif]-->

-Se for IE6 ou anterior faça:

<!--[if lte IE6]>

<!--[endif]-->

Vamos importar um arquivo CSS para a versão 6 ou anterior:

<head>