Após muitas pesquisas na internet e conversas com desenvolvedores amigos meu, descobri uma maneira de contornar esse problema.

Então vamos lá, mãos a obra!

A técnica consiste na reescrita do código embed (incorporar) para que ele fique válido.

Geralmente quando se pega o código embed lá do YouTube, ele vem assim:

1

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/6V_rYZo9sVg&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6V_rYZo9sVg&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Um código muito grande e que não passa no teste de validação da W3C, para validá-lo basta reescreve-lo desta maneira:

1

<object type="application/x-shockwave-flash" width="250" height="195" data="http://www.youtube.com/v/6V_rYZo9sVg"><param name="movie" value="http://www.youtube.com/v/6V_rYZo9sVg"/><param name="wmode" value="transparent"/></object>

Bem mais curto e totalmente válido para os padrões da W3C, o grande lance nesse código é o seguinte: Neste novo visual do Youtube, você vai perceber que há um botão escrito “Compartilhar”, ao clicar nele vai aparecer o link do vídeo, o que é importante para nós neste link é o id do vídeo que é esse destacado na imagem abaixo:

substitua esse id em nosso código nos seguintes trechos logo após “…/v/”:

Aqui

1

data="http://www.youtube.com/v/6V_rYZo9sVg">

e aqui

1

value="http://www.youtube.com/v/6V_rYZo9sVg">

é isso, qualquer dúvida é só deixar um comentário.

Até a proxima

Mais uma vez escrevendo aqui sobre jQuery, hoje vou mostrar um efeito bem legal utilizado principalmente para ocultar e/ou exibir blocos de conteúdo, é o chamado efeito Accordion ou efeito Sanfona.

Demonstração
Download dos arquivos

Vamos lá, hora de por a mão na massa, ou melhor, no teclado!!! =D

1º Passo – Estrutura do HTML

Vamos começar montando a estrutura basica do HTML que vai ficar mais ou menos assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="geral">
	<div id="accordion">
	  <h3><a href="#">Seção 1</a></h3>
	  <div>
	  	<p>Lorem ipsum dolor sit amet, potenti libero id a vivamus fusce purus, suspendisse grjoida, ac litora, at id nec semper a. Class non cras nec, nec aenean phasellus sodales eu, vulputate urna ullamcorper quisque. Bibendum magna vitae, vulputate posuere hendrerit commodo consectetuer ac, mi ducimus pellentesque massa turpis purus faucibus. Amet vehicula enim curabitur, vitae ac aliquam justo cum, class amet sed laoreet amet, nec ac ullamco eget cursus curabitur arcu.</p>
	  </div>
	  <h3><a href="#">Seção 2</a></h3>
	  <div>
		<p>Tincidunt vestibulum lectus maecenas, quis consectetur odit do, mauris ac semper metus wisi sollicitudin ligula, proin illum urna mattis lorem donec, velit sodales. Dis ut porta, nam nulla justo, dictum purus, sed magnis eu felis donec nec netus.</p>
	  </div>
	  <h3><a href="#">Seção 3</a></h3>
	  <div>
		<p>Maecenas feugiat. Pellentesque tortor morbi, tellus cursus auctor tellus velit eleifend id, at arcu platea suspendisse facilisi, luctus sed lacinia sed magnis non. Eget ac arcu sit. Sem diam quis duis nulla aliquam nec. Condimentum feugiat at ut egestas quam dictum, amet metus duis ridiculus, dolor lectus non metus, viverra hymenaeos, sed quis sit ipsum placerat natoque.</p>
		<ul>
			<li>Um item listado</li>
			<li>Dois itens listados</li>
			<li>Tres itens listados</li>
		</ul>
	  </div>
	  <h3><a href="#">Seção 4</a></h3>
	  <div>
		<p>Sed et, ut quisque condimentum. Erat eu, amet rhoncus risus luctus in eros lorem, massa quis enim amet, ante pellentesque at praesent. Ridiculus amet, justo tellus tristique habitasse, penatibus massa malesuada porttitor integer. Sit mollis ante id sed libero in, sit diam, massa sed pellentesque vitae amet felis porttitor, eu nostra. Dui etiam lectus ac ac, imperdiet leo diam nec luctus. Lacus enim vulputate varius.</p>
	  </div>
	</div>
</div>

2º Passo – Inserindo jQuery

No topo da página acima da tag insira os seguintes códigos:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.ui.widget.js" ></script>
<script type="text/javascript" src="../../js/jquery.ui.accordion.js" ></script>
<script type="text/javascript">
	$(function() {
		$("#accordion").accordion({
			collapsible: true
		});
	});
</script>

Este código é responsável por fazer a coisa funcionar, na 1ª linha eu chamo a biblioteca jQuery, perceba que eu estou pegando ela do servidor do Google. Nas 2ª e 3ª linhas eu chamos os arquivos responsáveis pelo efeito, eles estão alocados no servidor do meu site. Da 4ª linha indiante é a função responsável por fazer a coisa funcionar, perceba que eu chamo na função o id “#accordion”, que é o id da div onde esta o conteúdo no qual querodar esse efeito.

3º Passo – Estilo

Vamo dar um pouco de estilo a nossa página com um pouco de CSS, criei um CSS bem simples para que você mesmo possa implementar conforme sua aplicação, segue o códico CSS:

1
2
3
4

.geral {width:800px; margin:0 auto;}
p {margin:0; padding:0;}
#accordion h3 {background-color:#ccc; margin:0; padding:0; border:1px solid #999; cursor:pointer; height:25px; padding:5px 0 0 10px;}
#accordion h3 a {color:#333; font-size:14px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}

Código bem simples, onde eu jogo a div com a classe “.geral” em 800px e centralizo na página, zero os atributos “margin” e “padding” dos parágrafos (p), nos títulos (h3) eu coloco uma cor de fundo, bordas e altura de “25px”, na verdade tem 30px por que dou 5px de padding superior (padding-top), o link eu mudo a cor para branco, familia de fonte e retiro o sublinhado com o “text-decoration:none”.

É isso, já esta pronto, qualquer dúvida só deixar um comentário aqui em baixo, ok
Até mais.

já faz um tempo que não posto nada aqui, bem, resolvi reativar o blog passando algumas dicas e tutoriais bem simples e de fácil implementação e modificação.

Hoje vou mostrar um efeito muito legal em jQuery, muito utilizado em Slideshows e galeria de imagens, é a transição com o plugin Cycle.

vamos lá

Primeiramente vamos acrescentar em nosso código a biblioteca jQuery, adicione a seguinte linha acima da tag no topo da página:

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

Abaixo dele vamos acrescentar o plugin cycle, você pode fazer o download dele clicando aqui

2

<script type="text/javascript" src="../../js/cycle.js" ></script>

Agora vamos montar nossa lista de imagens a serem exibidas conforme o código abaixo:

1
2
3
4
5

<ul id="roda">
  <li><img src="01.jpg" alt="" /></li>
  <li><img src="02.jpg" alt="" /></li>
  <li><img src="03.jpg" alt="" /></li>
</ul>

Eu dei uma identificação “roda” para a lista, isso é importante para o código jQuery identificar onde será realizado o efeito.

Agora vamos completar nosso código com o jQuery. Na parte de cima da página, logo abaixo do plugin cycle, entre com o seguinte código:

3
4
5
6
7
8

<script type="text/javascript">  
    $(document).ready(function() {  
        $('ul#roda').cycle({  
        });  
    });  
</script>

Esse código é o que vai fazer a transição de imagens acontecer.

O plugin cycle permite alguns efeitos diferentes, você pode incrementar o código para conseguir novas formas de transições e velocidade das mesmas.

Em um exemplo pratico e rápido, eu inclui apenas 2 linhas ao código, substitua o codigo acima por este:

3
4
5
6
7
8
9
10

<script type="text/javascript">  
    $(document).ready(function() {  
        $('ul#roda').cycle({  
            fx:'shuffle',  
            speed: 1000  
        });  
    });  
</script>

Aqui eu acrescentei 2 linhas, a linha “fx:’shuffle’” que muda o efeito de transição das imagens e a linha “speed:1000″ que muda a velocidade desta transição.

Eu disponibilizei um exemplo do efeito aqui

Para saber mais sobre este plugin, acesse o site oficial aqui

Qualquer dúvida é só deixar um comentário abaixo, ok?
Um abraço a todos.

A idéia deste post é dar algumas dicas de como montar um site otimizado para que possa ter um bom desempenho e agradar o maior número de pessoas possível, são dicas simples onde procuro esclarecer alguns pontos que com certeza irá tornar seu site mais agradável a quem o está visitando.

Vamos lá

Crie um código (x)HTML válido

É importante que o site possua um código (X)HTML válido, organize seu código de maneira que facilite a leitura tanto de máquinas quanto de humanos, ter um site bem estruturado e organizado é muito importante e ajudará muito a deixar seu conteúdo mais acessível nas buscas pela web, isso nada mais é que Web Semântica. Você pode conferir se seu site é válido ou não, verificar e acertar os possíveis erros através do serviço de validação oferecido pela W3C.

Folhas de Estilo

São importantíssimas, elas definem o layout do site, procure criar todos os estilos em um arquivo separado de extensão “css”, evite também criar várias folhas, o ideal é criar apenas uma para todo o site

Páginas Splash

Alguns webdesigners costumam criar uma página de “entrada” para o site, chamada de página splash, geralmente com uma mensagem de boas vindas ou com um botão estilo “clique aqui para entrar”, bem, eu aconselho evitar esse tipo de página, isso pode acabar confundindo o usuário que pode simplesmente deixar seu site sem nem mesmo acessá-lo e também criar confusão nos Robots de rastreio de conteúdo, eles podem entender que aquela é uma página de “Site em construção” e acabar não indexando seu conteúdo.

Navegação

Preocupe-se com a navegação que o usuário terá ao acessar o seu site, as páginas que vai percorrer, crie uma navegação clara e fácil, com botões para voltar á página anterior, o caminho da página atual, em alguns casos com sites que possuem muitas páginas é importante criar uma página com o mapa do site, isso facilita muito e evita que o usuário se perca dentro do site e acabe saindo para procurar o que deseja em outro site.

 Menus

Minha dica quanto a menus é: crie menus simples e diretos, se for o caso pode utilizar flash, mais se controle nos efeitos, evite efeitos mirabolantes, evite também aqueles menus com vários sub-menus que vão se abrindo conforme você vai passando o mouse sobre algum item, menus suspensos, enfim, em usuários com pouca experiência em internet isso pode acabar causando confusão o que vai fatalmente fazer esse usuário abandonar seu site e ir para outro por que simplesmente não conseguiu entender seu menu.

Conteúdos claros

Exponha de maneira clara e direta o assunto no qual se trata seu site, seja produtos ou serviços, procure sempre deixar claro ao usuário do que se trata seu site, o que você está vendendo, destaque os principais produtos ou serviços oferecidos e deixe de maneira acessível os demais para que o usuário ache mais facilmente o que procura e obtenha as informações que esta buscando.

Exemplo de imagem esticada

Imagens

Coloque as imagens do tamanho certo, evite esticar as imagens isso acaba distorcendo-as e deixando o site com um aspecto feio e pouco profissional.

Banners publicitários

 Procure evitar banners publicitários em seu site a menos que você tenha um e-commerce ou algum tipo de revista eletrônica ou portal, mesmo assim procure usar com moderação, o excesso pode acabar ocasionando confusão no visual e acaba tirando o foco do usuário para o que realmente interessa, o conteúdo. Utilize esses espaços com algum conteúdo relevante ou links para outras sessões relacionadas, enfim, procure aproveitar o máximo os espaços do seu site com informações úteis ao usuário.

Músicas

Bem, esta questão de músicas no site é complicado, dependendo do caso em um primeiro momento é até legal, mais quando você voltar no site outras vezes vai acabar se enchendo daquela musiquinha e abandonando o site, enfim, o que sugiro é evitar musicas no site, isso acaba incomodando seus usuários fazendo com que eles deixem o site e não voltem mais, porém, em casos onde não tem jeito o que eu aconselho é colocar controles para desligar o som e controles de volume também.

Bem galera essas são algumas dicas que estou passando aqui para vocês e espero que possa ajudá-los.

Até a próxima pessoal.  

Bem galera essas são algumas dicas que estou passando aqui para vocês e espero que possa ajudá-los.

Até a próxima pessoal.

Bem pessoal desta vez vou escrever sobre navegadores, o que causa dor de cabeça em muito webdesigner e programadores que trabalham com CSS por aí…

Antes de mais nada quero informar que isso é uma analise pessoal, o sentimento que tenho quanto aos navegadores web que existem hoje e que costumo usar. Por tanto isso não é regra, é apenas uma opinião pessoal, ok?

Nos dias de hoje com o crescimento e popularização da internet no mundo e principalmente aqui no Brasil, segundo estudos da UOL (www.amidiaquemaiscresce.com.br), é muito comum a existência de diversos browsers para navegação, atualizações de versões, criação de ferramentas novas e tal. Bem, em que isso afeta os webdesigners? Simples, há alguns anos atrás reinava quase que absoluto o famoso IE (Internet Explorer) do Windows, praticamente quase todos utilizavam este navegador, era raro se encontrar alguém utilizando Mozilla Firefox ou Mac com seu Apple Safari.

Hoje a coisa é bem diferente, o Microsoft Internet Explorer que atualizou sua versão 6.0 para 7.0 e recentemente para a versão 8.0 perdeu muito mercado com o crescimento do Mozilla FireFox que hoje está na sua versão 3.5, com a chegada do Google Chrome, a “popularização” dos Macs que vem com seu navegador Apple Safari e outros browsers como o Opera por exemplo, ou seja, antes o webdesigner precisava se preocupar mais com a adequação do site para o IE 6.0, já que ele era o que reinava quase que absoluto, hoje ele tem que se virar para colocar o site para rodar em IE, Firefox, Safari, Chrome, Opera, Netscape… :/

Como sou um webdesigner também tenho que passar por essa situação, hoje tenho instalado em minha maquina o IE6.0 e 7.0, Firefox, Safari, Chrome, Opera e Netscape, por esse motivo acabo utilizando os mesmos para testar o correto funcionamento dos sites que desenvolvo, a acabo também utilizando-os para navegação. O que vou fazer aqui é uma analise pessoal sobre o comportamento desses navegadores.

Na minha opinião:

IE 6.0 – É, ainda tem muita gente que utiliza esse navegador, acho que é o causador de boa parte da dor de cabeça dos webdesigners, falo isso por experiência própria, existe na internet até campanhas para as pessoas atualizarem seu Browser para pelo menos a versão 7.0. Na minha opinião, é um navegador que ficou ultrapassado, não sei, mas acredito que a Microsoft não faz mais atualizações para esse navegador.

IE7.0 – É fácil você ouvir ou até mesmo fazer criticas a este browser, realmente, a impressão que me passa na sua utilização é de instabilidade, com muitos travamentos, acredito que seu sistema de Abas não funcione individualmente, pois sempre que trava uma aba trava tudo, a saída quase sempre é finalizar tarefa, os prós são: de uma maneira geral consome pouca memória e é bem rápido para iniciar.

FireFox – Instalei a nova versão 3.5 e realmente achei bem mais rápida que a anterior, possui diversos plugin que facilita bastante em determinadas tarefas, percebi também uma melhora nas cores para a versão anterior, é bastante estável e não costuma travar, o que tenho a reclamar desse navegador é que consome muita memória, menos que a versão anterior, porém, ainda mais que o IE 7.0 e a demora na inicialização.

Chrome – Apesar de não utilizá-lo tanto quanto o IE e o FireFox, eu o acho bem rápido tanto para navegar quanto para iniciar, não consome muita memória, é bem leve, só sinto falta de alguns detalhes como por exemplo a barra de ferramentas do Google (Meio controverso isso).

Safari – Fiz uma atualização recente para a versão 4.0, não utilizei muito ainda nessa nova versão, porém minha impressão quanto a versão anterior é de um bom navegador, rápido para iniciar, rápido também para navegar, não tanto quanto o FF e o Chrome e é também bem estável.

Opera – Utilizo muito pouco, mesmo para testar os sites, quase não utilizo para navegação, mesmo assim achei bastante interessante algumas ferramentas, principalmente os modos de exibição dos sites.

Netscape – Parece mentira, mas me surpreendi quando fui atender um cliente e o cara usava esse navegador como browser principal, particularmente eu nunca tinha utilizado este browser, mais tive que instalá-lo para conhecer e também testar o site dele para ver se não ia “dar pau” e o site ficar todo torto, enfim, o site ficou legal, certinho, porém essa foi a única vez que o utilizei, não tenho nem como falar nada por esse motivo.

Bem galerinha, esses são os browsers que eu utilizo aqui, alguns só para teste, outros para navegar mesmo, outros nem tanto…

Quanto ao IE 8.0 eu o instalei mais não gostei muito, achei até que estava pior que o IE 7.0, como poucas pessoas, pelo menos aqui no Brasil, não o estão utilizando muito, e o 7.0 é o que tem mais usuários, vou esperar um tempo até substituir meu 7.0 pelo 8.0 ou encontrar alguma ferramenta que faça com que eu utilize os dois em simultâneo.

É isso, como falei no inicio tudo aí é apenas minha opinião, minha impressão na utilização dos mesmos, sinta-se a vontade para concordar, discordar ou dar sua opinião.

Ate a próxima galera.