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>

<!--[if lte IE6]>

<link rel="stylesheet" type="text/stylesheet" href="css.css">

<!--[endif]-->

<link rel="stylesheet" type="text/stylesheet" href="css_7.css">

</head>

No código acima, o site estará utilizando um arquivo CSS para as versões 6 e anteriores e um outro para o IE7 e para outros navegadores também.

Agora vamos ver como funciona para apenas uma parte do código. Vale lembrar que esse código deve ser escrito no seu arquivo html:

<head>

<!--[if gte IE5]-->

<style>

.teste{

text-align:center;

margin:0 0 0 23px;

}

</style>

<!--[endif]-->

</head>

E é isso aí pessoal!!! Qualquer dúvida ou sugestão, estamos aí!! =)

Um grande abraço!!!

Centralizando blocos horizontalmente

Só editando o modelo do blog já me deparei com uma famosa buxa. Resolvi colocar uma div com um fundo branco para juntar todas os elementos da página, separando o site do fundo. No Internet Explorer funcionou direitinho, mas adivinha se o Firefox quis ser legal!? O layout ficou todo posicionado à esquerda e não adiantou colocar text-align:center; nem na div e nem no body.

Como o nosso amigável align="center" foi depreciado no HTML 4 e no XHTML strict, tive de usar o seguinte método:

-No código CSS da div que eu precisei centralizar, coloquei os atributos margin-left:auto; margin-right:auto;.

-Veja como ficou o código:

Só tem um pequeno problema, as versões anteriores ao Internet Explorer 6 não reconhecem os atributos. Mas como o meu problema estava só no Firefox, não precisei me preocupar com esse detalhe.

Se quiser informações mais detalhadas, visite o link: http://www.mhavila.com.br/topicos/web/css_center.html

Abração pra todos!!

aula1 - Alô Mundo!!

Oláááá, seja bem-vindo ou bem vinda à este humilde blog.

Durante minha experiência como webdesigner tive que enfrentar várias "buxas" que me faziam passar o dia, às vezes até dois, atrás de soluções. Como sei que muitas pessoas também passam por isso, resolvi reunir aqui todas as soluções que eu já encontrei.

Além disso, também vou utilizar esse espaço para compartilhar meus estudos em programação e outros assuntos relacionados à TI.

Ok. Você está imaginando o que o nome do blog tem a ver com tudo isso? Quem já é programador ou quem já parou pra estudar um pouco sobre, já passou pela primeira aula, quando aprendemos como fazer para aparecer algo escrito na tela. Em todos os livros, tutoriais, apostilas a frase usada para ensinar é a famosa "Alô Mundo", isso para quem não escreve o próprio nome. E quando aprendemos variáveis, que nunca conseguimos pensar em outro nome para ela que não seja "teste"? E também temos o nome do arquivo, que também não vem outro na cabeça que não seja "aula1". Tá certo, existem as exceções, mas vai me dizer que nunca fez isso?? XD

Então espero poder contribuir em alguma coisa nos seus estudos, trabalhos e conhecimento.

Um grande abraço!!!