JQuery – Ferramenta para aumentar e reduzir o tamanho da fonte

Publicado em Publicado por gserrano

Pensando em acessibilidade e atendendo os pedidos que a Bia me fez a algum tempo, desenvolvi para a próxima versão do And After uma ferramenta de acessibilidade para aumentar e reduzir o tamanho das fontes do site.

Esta ferramenta é conhecida de quase todos, o famoso "A+" e "A-" que muitos sites exibem, dando maior liberdade para o usuário e auxiliando a adaptação do usuário a interface do site.

Para desenvolver a ferramenta utilizei a biblioteca jQuery, recomendo a utilização do Google Ajax Libraries para isso.

Primeiro vamos fazer dois botões, um para aumentar e outro para diminuir o tamanho da fonte, no HTML não identifiquei nenhuma ação, apenas setei um ID para cada botão que posteriorimente com o jQuery será utilizado para definir a ação de cada botão. O HTML ficou assim:

 


A-A+

Optei por não utilizar imagem nenhuma e fazer tudo apenas com CSS, minha folha de estilos da ferramenta ficou assim:

 

div.ferramentas_texto a{
	padding: 4px;
	border: 1px solid #666;
	font-size: 11px;
	font-weight: bold;
	margin-right: 7px;
	width: 16px;
	height: 16px;
	display: block;
	float: right;
	background: #fff;
}
div.ferramentas_texto a:hover{
	background: #666;
	border-color: #222;
	color: #fff;
	cursor: pointer;
}

 

Com os dois botões prontos falta atribuir as funções a cada um deles, agora entra o jQuery (o código está explicado abaixo):

 

//Guilherme Serrano - Ferramenta para aumentar e reduzir o tamanho da fonte (jQuery)
//www.odesenvolvedor.com.br
//andafter.org
$(document).ready(function(){
var fonte = 13;
    $(´#aumenta_fonte´).click(function(){
		if (fonte<17){
			fonte = fonte+1;
			$(´body´).css({´font-size´ : fonte+´px´});
		}
    });
    $(´#reduz_fonte´).click(function(){
		if (fonte>9){
			fonte = fonte-1;
			$(´body´).css({´font-size´ : fonte+´px´});
		}
    });
});

 

Neste caso o tamanho padrão da fonte (no CSS) é 13px, portanto minha variável fonte inicialmente tem valor 13. Ao clicar no botão #aumenta_fonte o script verifica se a fonte é menor que 17, valor que estipulei como máximo, se for menor soma 1 a variável fonte e altera o atributo font-size do body. O mesmo processo acontece quando o usuário clica no botão #reduz_fonte.

Você pode definir alterar apenas o tamanho da fonte do conteúdo e não de todo o body, para isso faça alterações como o exemplo abaixo:

 

//Guilherme Serrano - Ferramenta para aumentar e reduzir o tamanho da fonte (jQuery)
//www.odesenvolvedor.com.br
//andafter.org
$(document).ready(function(){
var fonte = 13;
    $(´#aumenta_fonte´).click(function(){
		if (fonte<17){
			fonte = fonte+1;
			$(´#content´).css({´font-size´ : fonte+´px´});
		}
    });
    $(´#reduz_fonte´).click(function(){
		if (fonte>9){
			fonte = fonte-1;
			$(´#content´).css({´font-size´ : fonte+´px´});
		}
    });
});

 

No exemplo acima a fonte alterada seria apenas do elemento com id content, supondo que esta seria a div onde está localizado o conteúdo do seu site.

É isso, uma ferramenta simples que pode melhorar a acessibilidade do seu site, espero ter ajudado.

Dúvidas críticas e sugestões nos comentários, beleza? 🙂

Validação de formulários com prototype

Publicado em Publicado por gserrano

Um dos grandes pontos positivos que eu vejo na jQuery é a quantidade absurda de plugin desenvolvidos em cima dele: menus, efeitos, requisições ajax, validações…
Sou há tempos um tipo de fanboy adepto da Prototype, mesmo sabendo que devo ser minoria. Então, fui procurar algumas coisas na web a esse respeito. Achei para validação de formulários uma biblioteca bem bacana e simples.

http://tetlaw.id.au/view/javascript/really-easy-field-validation

Para utilizar, você precisa:

incluir as bibliotecas (prototype e a de validação):
<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>

escrever elementos dessa forma (required indica que é um campo a ser validado e validate-number que deve ser validado como um número)
<input class="required validate-number" id="field1" name="field1" />

ativar a validação passando o id do form
<script type="text/javascript">
     new Validation(´form-id´);
</script>

Os campos podem ser validados de diversas formas (apenas letras, apenas dígitos, como uma url, formato de endereço de e-mail, data, etc…)

Existem diversas outras opções, como usar o atributo title do input para setar a mensagem a ser exibida caso a validação do campo retorna false, dizer para a rotina parar a validação no primeiro erro ou validar todos os campos, etc…

Aqui tem um exemplo completo do autor 🙂

Menu Accordion com JQuery (sem plugin)

Publicado em Publicado por gserrano

Quanto mais estudo mais eu gosto de jQuery, e as possibilidades de uso aumentam a cada leitura. 🙂

Resolvi aplicar jQuery na base (framework, huh?) que utilizo para as intranets de meus clientes e isso foi responsável por grande parte do meu aprendizado, estou aplicando também na nova versão do And After (resultado do meu TCC sobre usabilidade: análise heurística).

Desenvolvi os wireframes navegáveis do And After para fazer testes de navegação mais próximos do real possível e para isso utilizei menu accordion.

Não gosto de utilizar *muitos* plugins por três motivos principais:

  • Aumento do carregamento
  • Possível incompatibilidade
  • Falta de controle (somente em alguns casos)

 Porém não sejamos xiita, se existe algo pronto, bom, e que não irá atrapalhar o carregamento ou o funcionamento de nada, porque não utilizar? 🙂

 

Menu accordion com jQuery

Pouco código, simples e leve.

javascript

 

$(document).ready(function(){
$(´[rel="cont_autor"]:not(:first)´).hide();
$(´[rel="nav_autor"]´).click(function(){
     $(´[rel="cont_autor"]:visible´).slideUp("normal");
     $(this).next().slideDown("normal");
          return false;
});
});

A primeira linha apenas "dá start" no código, para ele ser carregado quando o documento estiver pronto.

Depois procuro os conteúdos dentro do meu menu (usando o atributo rel="cont_autor"), como vocês podem ver no html ali em baixo. Todos os conteúdos são escondidos, menos o primeiro, que por padrão estará sempre aberto no meu menu.

Quando clicar no item com atributo rel="nav_autor" então escondo todos os conteúdos visíveis utilizando o slideUp e pego o elemento depoisdo navegador (o conteúdo que está logo abaixo) e mostro ele utilizando o slideDown.

 

html

 

Últimos artigos do autor

	

Últimos comentários do autor

	

Últimas leituras do autor

Nesse caso usei h4 para definir os títulos e linhas de navegação, o correto é utilizar definition list (dl), mas meu objetivo aqui era apenas mostrar o funcionamento do menu independente da estruturação do html.

Simples e funcional, sem carregar nada desnecessário. 🙂

dicas

Interpretando XML com Jquery

Publicado em Publicado por gserrano

Estudando jQuery para o desenvolvimento de novas ferramentas para o And After (a nova Vitrine Buscapé) resolvi publicar um artigo exemplificando como ler XML com jQuery.

Primeiro devo deixar claro que meu relacionamento com Javascript é bem tímido, o pouco que sei são aprendizados recentes mas o jQuery tem ajudado muito por facilitar bastantes as coisas. Sei que o Chris vai dizer que Prototype apresenta mais vantagens, mas testei rapidamente as duas bibliotecas sem saber quase nada de Javascript e a que teve mais efetividade no desenvolvimento foi jQuery, que optei por estudar.

"Instalando" o jQuery

O primeiro passo para utilizar a biblioteca é fazer com o que o usuário carregue ela, não baixe ela no seu servidor, o Google Ajax Libraries faz isso e traz duas vantagens principais:

  1. Economia de banda no seu servidor
  2. Maior chance de usar o cache do usuário, diminuindo o tempo e carregamento
  3.  
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
//1 - carrega bibliotecas prototype e scriptaculous 
google.load("jquery", "1.2.6");
</script>

 

Biblioteca colocada na página, podemos agora passar para o próximo passo.

 

XML

Aqui está a estrutura do XML que utilizei para o exemplo, utilizei este feed, que exibe os resultados da busca no Twitter pelo meu username (@gserrano), mas poderia ser resultados do Flickr, do Google, do feed do seu blog ou de um relatório de um aplicativo web.

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns:google="http://base.google.com/ns/1.0" xml:lang="en-US" xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/" xmlns="http://www.w3.org/2005/Atom" xmlns:twitter="http://api.twitter.com/">
  <id>tag:search.twitter.com,2005:search/gserrano</id>
  <link type="text/html" rel="alternate" href="http://search.twitter.com/search?q=gserrano"/>
  <link type="application/atom+xml" rel="self" href="http://search.twitter.com/search.atom?q=gserrano"/>
  <title>gserrano - Twitter Search</title>
  <link type="application/opensearchdescription+xml" rel="search" href="http://search.twitter.com/opensearch.xml"/>
  <link type="application/atom+xml" rel="refresh" href="http://search.twitter.com/search.atom?q=gserrano&amp;since_id=1011974184"/>
  <updated>2008-11-18T23:30:00Z</updated>
  <openSearch:itemsPerPage>15</openSearch:itemsPerPage>
  <link type="application/atom+xml" rel="next" href="http://search.twitter.com/search.atom?max_id=1011974184&amp;page=2&amp;q=gserrano"/>
  <entry>
    <id>tag:search.twitter.com,2005:1011974184</id>
    <published>2008-11-18T23:30:00Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011974184"/>
    <title>@chrisloki parab&#233;ns pra ti, #odesenvolvedor com um crescimento de 50% na visita&#231;&#227;o no &#250;tlimo m&#234;s! :D</title>
    <content type="html">&lt;a href="http://twitter.com/chrisloki"&gt;@chrisloki&lt;/a&gt; parab&#233;ns pra ti, &lt;a href="/search?q=%23odesenvolvedor"&gt;#odesenvolvedor&lt;/a&gt; com um crescimento de 50% na visita&#231;&#227;o no &#250;tlimo m&#234;s! :D</content>
    <updated>2008-11-18T23:30:00Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011974184.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011941353</id>
    <published>2008-11-18T23:06:02Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/chrisloki/statuses/1011941353"/>
    <title>@gserrano parab&#233;ns o/ uhu!</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; parab&#233;ns o/ uhu!</content>
    <updated>2008-11-18T23:06:02Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/61066338/ble_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011941353.atom"/>
    <author>
      <name>chrisloki (Chris Benseler)</name>
      <uri>http://twitter.com/chrisloki</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011934314</id>
    <published>2008-11-18T23:01:16Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011934314"/>
    <title>a natureza &#233; fascinante, animais disfar&#231;ados de folha. ah, sapecas! http://tinyurl.com/5q8c88</title>
    <content type="html">a natureza &#233; fascinante, animais disfar&#231;ados de folha. ah, sapecas! &lt;a href="http://tinyurl.com/5q8c88"&gt;http://tinyurl.com/5q8c88&lt;/a&gt;</content>
    <updated>2008-11-18T23:01:16Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011925155</id>
    <published>2008-11-18T22:54:46Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011925155"/>
    <title>um culto ao ego, #andafter teve um crescimento de 15% nas visitas no &#250;ltimo m&#234;s. (olhando as novidades do google analyctics).</title>
    <content type="html">um culto ao ego, &lt;a href="/search?q=%23andafter"&gt;#andafter&lt;/a&gt; teve um crescimento de 15% nas visitas no &#250;ltimo m&#234;s. (olhando as novidades do google analyctics).</content>
    <updated>2008-11-18T22:54:46Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011912798</id>
    <published>2008-11-18T22:46:14Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/bpinaud/statuses/1011912798"/>
    <title>@gserrano Voc&#234; foi um dos pioneiros a falar das buscas no iSofa.tv. Por isso te adicionei. Obrigado. Abra&#231;os.</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; Voc&#234; foi um dos pioneiros a falar das buscas no iSofa.tv. Por isso te adicionei. Obrigado. Abra&#231;os.</content>
    <updated>2008-11-18T22:46:14Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/52836833/BPeoLeao_normal.JPG"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011912798.atom"/>
    <author>
      <name>bpinaud (Bruno Pinaud)</name>
      <uri>http://twitter.com/bpinaud</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011871230</id>
    <published>2008-11-18T22:17:19Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/bpinaud/statuses/1011871230"/>
    <title>@gserrano Obrigado, cara, muito legal saber que voc&#234; est&#225; curtindo. Tem mais de 300 canais aguardando pra entrar no menu novo. Avise qqc.</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; Obrigado, cara, muito legal saber que voc&#234; est&#225; curtindo. Tem mais de 300 canais aguardando pra entrar no menu novo. Avise qqc.</content>
    <updated>2008-11-18T22:17:19Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/52836833/BPeoLeao_normal.JPG"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011871230.atom"/>
    <author>
      <name>bpinaud (Bruno Pinaud)</name>
      <uri>http://twitter.com/bpinaud</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011868941</id>
    <published>2008-11-18T22:15:50Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/oPadreVoador/statuses/1011868941"/>
    <title>@gserrano hahaha, tomara o/ que melhore ai e que eu descanse aqui ;D</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; hahaha, tomara o/ que melhore ai e que eu descanse aqui ;D</content>
    <updated>2008-11-18T22:15:50Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/60831933/opvlogovp0_normal.png"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011868941.atom"/>
    <author>
      <name>oPadreVoador (oPadreVoador)</name>
      <uri>http://twitter.com/oPadreVoador</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011861566</id>
    <published>2008-11-18T22:10:40Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011861566"/>
    <title>que acharam do photobucket do wall-e? eu adoro os backrounds do photobucket.</title>
    <content type="html">que acharam do photobucket do wall-e? eu adoro os backrounds do photobucket.</content>
    <updated>2008-11-18T22:10:40Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011857210</id>
    <published>2008-11-18T22:07:39Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011857210"/>
    <title>@oPadreVoador que assim seja! mas eu nem deveria descansar. &#233; que simplesmente n&#227;o rolou produ&#231;&#227;o, vamos ver se a noite melhora. :D</title>
    <content type="html">&lt;a href="http://twitter.com/oPadreVoador"&gt;@oPadreVoador&lt;/a&gt; que assim seja! mas eu nem deveria descansar. &#233; que simplesmente n&#227;o rolou produ&#231;&#227;o, vamos ver se a noite melhora. :D</content>
    <updated>2008-11-18T22:07:39Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011857210.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011847664</id>
    <published>2008-11-18T22:01:28Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011847664"/>
    <title>@bpinaud bem vindo! e parabens pelo isofa, &#243;tima alternativa para minhas madrugadas. :D</title>
    <content type="html">&lt;a href="http://twitter.com/bpinaud"&gt;@bpinaud&lt;/a&gt; bem vindo! e parabens pelo isofa, &#243;tima alternativa para minhas madrugadas. :D</content>
    <updated>2008-11-18T22:01:28Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011847664.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011843370</id>
    <published>2008-11-18T21:58:46Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011843370"/>
    <title>Acho mto ruim quando algu&#233;m tenta promover uma coisa pr&#243;pria sem dizer que tem liga&#231;&#227;o com aquilo. S&#243; passa desconfian&#231;a.</title>
    <content type="html">Acho mto ruim quando algu&#233;m tenta promover uma coisa pr&#243;pria sem dizer que tem liga&#231;&#227;o com aquilo. S&#243; passa desconfian&#231;a.</content>
    <updated>2008-11-18T21:58:46Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011820041</id>
    <published>2008-11-18T21:43:32Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/oPadreVoador/statuses/1011820041"/>
    <title>@gserrano hoje foi meu dia de correria, ser&#225; que amanh&#227; eu descanso? *-*</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; hoje foi meu dia de correria, ser&#225; que amanh&#227; eu descanso? *-*</content>
    <updated>2008-11-18T21:43:32Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/60831933/opvlogovp0_normal.png"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011820041.atom"/>
    <author>
      <name>oPadreVoador (oPadreVoador)</name>
      <uri>http://twitter.com/oPadreVoador</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011815993</id>
    <published>2008-11-18T21:40:49Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011815993"/>
    <title>Ontem o dia foi uma correria do capeta, a&#237; pra compensar hj eu n&#227;o fiz NADA.</title>
    <content type="html">Ontem o dia foi uma correria do capeta, a&#237; pra compensar hj eu n&#227;o fiz NADA.</content>
    <updated>2008-11-18T21:40:49Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011776936</id>
    <published>2008-11-18T21:15:30Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011776936"/>
    <title>que tal servir aperitivo num ralo pra banheiro? http://tinyurl.com/5obmlo</title>
    <content type="html">que tal servir aperitivo num ralo pra banheiro? &lt;a href="http://tinyurl.com/5obmlo"&gt;http://tinyurl.com/5obmlo&lt;/a&gt;</content>
    <updated>2008-11-18T21:15:30Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011521172</id>
    <published>2008-11-18T18:32:52Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011521172"/>
    <title>@chrisloki "eu sei que n&#227;o, mas vou fazer" &#233; o que diferencia homens de meninos. gogo! :D</title>
    <content type="html">&lt;a href="http://twitter.com/chrisloki"&gt;@chrisloki&lt;/a&gt; &amp;quot;eu sei que n&#227;o, mas vou fazer&amp;quot; &#233; o que diferencia homens de meninos. gogo! :D</content>
    <updated>2008-11-18T18:32:52Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011521172.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
</feed>
 

 

Interpretar XML com jQuery

 Aqui está o código que ao carregar a página identifica qual XML será lido, busca pelos dados "entry" no XML e gera um loop entre eles, exibindo a mensagem que está no XML.

 

<script type="text/javascript">
        $(function(){
        $("#tweets").fadeOut("fast");
            $.ajax({
                 type: "GET",
                 url: "search.xml",
                 dataType: "xml",
                 success: function(xml) {
                 
                    $(xml).find("entry").each(function(){
                         var link =  $(this).find("link").attr("href");
                         var texto = $(this).find("content").text();
                         $("<li></li>")
                             .html(texto + " <a href=´" + link + "´>Ver tweet</a>")
                             .appendTo("#tweets");
                     }); //close each(
                    $("#tweets").fadeIn("slow");
                }
             }); //close $.ajax(
        });
</script>

 

Neste caso utilizei a requesição utilizando a função ".ajax" do jQuery, em meus testes não consegui fazer retornar direto da busca, portanto seria necessário utilizar programação server-side como ASP ou PHP para gerar o XML para o Javascript. Não é a melhor solução se você precisa ler XML externo. Uma forma melhor de fazer isto é utilizar seu servidor como Proxy através do Isapi Rewrite (para quem utiliza IIS) e acredito que deve ser possível com htaccess. Se alguém tem alguma dica melhor, estou aqui mais para aprender do que para ensinar, comenta aí! 🙂

Talvez uma estudada em XML-RPC resolva este problema para ler o XML externo, se não me engano eu já fiz isso só com jQuery, mas acho que estava utilizando JSON e não XML como resposta.

A função .ajax carrega o arquivo search.xml (o xml que utilizei no exemplo) e chama a função para a leitura. Chamei um loop para cada "entry" encontrado no meu XML, portanto "entry" é cada linha que eu gostaria de ler (no caso, cada tweet retornado pela busca).

Busquei apenas duas variáveis, o link para o tweet original:

var link =  $(this).find("link").attr("href");

Que no XML está como o atributo href, na linha abaixo:

<link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011776936"/>

E recuperei também o texto do tweet, que são as duas únicas variáveis que utilizei para o exemplo. Dentro do loop eu criei elementos de lista <li></li>, onde adicionei as variáveis e no final utilizei o .appendTo para inserir cada elemento da lista dentro do elemento com ID tweets que deve estar no HTML.

 A função fade é opcional, utilizei apenas porque sou designer para suavizar a visualização no carregamento da lista.

HTML

Como explicado acima, depois de montar a lista o script procura o elemento com o id tweets, portanto a única coisa necessária no HTML do documento é uma lista <ul> ou <ol> com o id correto.

<ol id="tweets"></ol>

É isso, qualquer sugestão ou dúvida comente, como eu disse: estou muito mais apto a aprender do que a ensinar por aqui, mas espero ter ajudado. 🙂

Veja o exemplo funcionando.

SWFObject – inserindo flash na sua página sem complicações

Publicado em Publicado por gserrano

Há aproximadamente 2 anos, os desenvolvedores web tiveram uma grande (ou não) dor de cabeça quando a Microsoft perdeu uma disputa judicial contra uma empresa americana, chamada Eolas, a qual patenteou – simplificando o assunto – o carregamento de um plugin em um documento hipertexto. Com isso, as versões atualizadas do IE7 de lá pra cá pedem para que o usuário clique no flash para que ele comece a ser reproduzido, causando umd esconforto na experiência do usuário.

De lá pra cá, muito já se discutiu sobre como contornar essa questão, e muitas soluções já foram expostas. As mais conhecidas se baseiam em inserir o flash via javascript (e não mais escrevendo diretamente no html as tags object e embed), e com isso a tal questão do "Clique aqui para ativar" é contornada.

No começo, usava-se muito uma biblioteca javascript chamada dynActiveX.js. Depois, uma outra chamada SWFObject ficou conhecida e foi adotada pela maior parte da comunidade de desenvolvedores (vejo por aí alguns projetos que usam um plugin da jQuery para isso. Me parece uma boa também).

Uma outra vantagem de utilizar essa forma de inserir flash no seu html é que você não precisa se preocupar com todas as formalidades que a tag object necessita, nem ter que ficara duplicando todo o código dentro da tag embed (para que os browsers gecko entendem). Ou seja, write once, work always 🙂

A versão 2.0 da SWFObject foi lançada alguns meses atrás; se você usava a 1.x, terá que mudar a forma de escrever seu código. Você pode fazer o download direto do Google Code aqui.
*aproveito e deixo a dica de ler um pouco a respeito do Google Code e da Ajax Libraries aqui

Como utilizar?

Depois de fazer download do arquivo, você pode usar esse código mínimo como exemplo:

<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="flashcontent">
  Esse btexto é substituído pelo Flash
</div>
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "meuflashvideo", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>
</body>
</html>

O que é feito, basicamente, é que o javascript insere dentro da div com id="flashcontent" o código necessário para inserir o flash troca a div com o id="flashcontent" pelo código necessário para inserir o flash (obrigado @rulico pela correção, na 1.x é que funcionava dessa outra forma!).
Segundo a documentação do SWFObject, você pode parametrizar o flash da seguinte forma:

var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl]);

 

Onde:

  • swf: é o caminho do arquivo .swf
  • id: id do objeto, para tratamento javascript
  • width: largura do swf
  • height: altura do swf
  • version: versão necessária do Flash Player necessária (ver a documentação oficial para mais detalhes)
  • background-color: cor de fundo do Flash, em hexadecimal

 

Existem ainda os parâmetros opcionais:

  • quality: a qualidade que deve ser usada. Por padrão, é usado o valor high
  • xiRedirectUrl: url para onde o usuário que fez o download do flash player pelo Expressinstall
  • redirectUrl: use se você quise redirecionar o usuário que não tem a versão correta do flash player para alguma página

 

Definindo outros atributos e passando variáveis

Caso seja necessário, você pode definir outros atributos usando o método setAttribute. A sintaze é a seguinte:

so.setAttribute("parametro", "valor");

Você pode passar quantos atributos quiser, é só replicar esse código.
Pode ser necessário também passar variáveis para o seu flash. Siga o seguinte código como base:

so.addVariable("nome da variável", "valor");

Qualquer coisa, vejam na documentação oficial um how-to com todos os detalhes e um FAQ bem completo a respeito 🙂

[update]Gerador de código para inserir o SWFObject (by @rulico): http://www.swffix.org/swfobject/generator/[/update]