Sorteio do livro: jQuery Mobile

Estamos divulgando mais uma ação em parceria com a novatec.

Trata-se de DOIS sorteios do livro jQuery Mobile lançado nesta semana. Para quem não conhece, o livro foi escrito por Maurício Samy Silva, mais conhecido como Maujor.

Site oficial do livro: http://www.jqmovel.com.br/

Como participar no Twitter?

O participante deverá seguir o @jquerybr e dar um RT na mensagem abaixo:

Estou participando do sorteio do livro jQuery Mobile escrito pelo @maujor e organizado pelo @jquerybr e @novateceditora http://kingo.to/YKg

Os comentários só serão aceitos até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte!

Como participar no Facebook?

O participante deverá:

• curtir a página do jQuery Brasil.
• compartilhar esta postagem.
• clicar na aba de Promoções e solicitar a participação

As participações só serão aceitas até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte!

Resultado

Promoção Twitter: @AlineFernandes1

Promoção Facebook: /flavioricardo91

Resenha do livro

jQuery Mobile é um framework para o desenvolvimento de aplicações web para dispositivos móveis. Adota um sistema unificado de interface de usuário, com base em HTML5 e CSS3 e, com uso de JavaScript de alto nível, gera um código compatível com uma ampla variedade de plataformas. Tem como base de construção as bibliotecas jQuery e jQuery UI, o que garante uma curva de aprendizado rápido, possibilitando desenvolver com facilidade interfaces de usuário de alta qualidade e com código extremamente otimizado para os principais navegadores desktop, smartphones e tablets, como iPad, iPhone, Android, Blackberry, Windows Phone e Nokia.

Utiliza um sistema de navegação entre as páginas da aplicação, baseado em AJAX, que proporciona o carregamento rápido das páginas, com economia de banda, além de oferecer várias opções de animação na transição entre páginas. Fornece widgets pré-configurados e estilizados, prontos para uso, que atendem à maioria das necessidades do layout de uma aplicação web, tais como barras de navegação, páginas, janelas modais, botões e listas, entre outros, todos criados por mecanismos internos do framework, a partir de marcação HTML5 simples. Além de disponibilizar uma folha de estilos CSS padrão, com cinco paletas de cores, também permite a criação de paletas personalizadas, a partir da folha de estilo padrão ou com o uso da ferramenta ThemeRoller.

Maujor, em mais um livro pioneiro em língua portuguesa, se propõe a difundir o uso desse fantástico framework, abordando as funcionalidades do jQuery Mobile de forma clara, em linguagem didática, com muitos exemplos práticos. No site do livro (http://jqmovel.com.br) você poderá ver esses exemplos em funcionamento.

O livro tem os seguintes objetivos:

• Apresentar o framework jQuery Mobile relatando as motivações e o histórico de seu desenvolvimento.
• Estudar a aplicação de barras de ferramentas e botões nativos do framework.
• Explicar os fundamentos da navegação AJAX do framework.
• Demonstrar os mecanismos para formatação de conteúdos a serem apresentados em dispositivos móveis.
• Detalhar as técnicas de construção de listas ordenadas e não ordenadas, simples e aninhadas para apresentação de conteúdos.
• Entender a criação de formulários com seus diferentes controles.
• Aplicar temas e paletas, bem como criar paletas personalizadas com uso da ferramenta ThemeRoller.
• Estudar as propriedades, os eventos e métodos da API da jQuery Mobile.

jQueryBrasilCast 004 – Micro.JS

jQueryBrasilCast 004 [ 26:49 | 36.83 MB ] Play Now | Play in Popup | Download (242)

Olá pessoal,

Apesar da demora, finalmente lançamos o nosso 4º podcast.

Desta vez, contamos com a participação especial do Wilker Lúcio (pela segunda vez) e do Davidson Fellipe.

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante!

Links

• MicroJS (site com alguns micro plugins)
• SizzleJS (Motor de javascript puro baseado em seletores CSS)
• Site com alguns pequenos scripts
• 90% do jQuery com 30% do tamanho.
• Biblioteca de template

Participantes:

• Luiz Tiago (@luiztiago)
• Ruan Carlos (@ruanltbg)
• Neto (@sputinyk)
• Wilker Lucio (@wilkerlucio)
• Davidson Fellipe (@davidsonfellipe)

Espero que gostem!

Cya!

Lançado o jQuery 1.7 Beta 1

Olá pessoas,

Se você não estava sabendo, a jQuery Conference 2011 irá acontecer em Boston no final desta semana. Assim como marcado antes, foi lançado hoje a versão 1.7 beta 1 do jQuery com alguns novos recursos, além da correção de vários bugs, como mencionaram no post oficial, que chega a mais de 50.

Você pode baixar a versão no CDN do jQuery:
http://code.jquery.com/jquery-1.7b1.js

Mais uma vez o team pede a colaboração para reportar qualquer bug que aconteça, tanto nas novas implementações como o não-funcionamento de algo antigo. Iremos explorar os novos recursos para adquirir mais prática nas novas implementações.

Vamos às mudanças…

Novas APIs de eventos: $.on() e $.off

Ao longo do tempo, o jQuery evoluiu três maneiras para anexar eventos aos elementos do DOM. São eles: bind(), live() e delegate(). Analisando o código das três APIs, consegue-se descobrir coisas engraçadas. Por exemplo, $(document).unbind('click') irá remover todos os eventos de click (live('click'), bind('click'), entre outros), uma vez que esses eventos estão ligados ao documento.

Para resolver algumas destas inconsistências, foi introduzido um novo par de métodos simples que pode fazer o papel de todos os três métodos utilizados anteriormente.

$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);

Se um seletor é fornecido, é um evento de delegate. Caso contrário, ele é diretamente vinculado. Todos os recursos das APIs antigas estão lá, por exemplo, pode ser utilizado vários eventos separados por espaço em uma única string.

Melhorias nos efeitos/animações

Antes da versão 1.7, se você paralisasse uma animação antes de completá-la, era criada uma situação onde o elemento que estava animando não poderia retornar ao tamanho original. As dimensões originais são armazenadas, antes que comece a animação, para que possa ser utilizada posteriormente. Isto elimina alguns problemas que existiam antes com accordion, por exemplo.

Melhor suporte ao HTML5

Se você já faz uso das novas tags HTML, poderá testar a nova versão que está preparada para criar e clonar elementos nestas tags.

And more…

Para a lista completa de novidades, veja o post oficial, alternativamente Anddy Osmani comenta novidades mais avançadas sobre a versão.

Ajax não obstrutivo com preventDefault

Olá pessoal,

Antes de tudo, peço desculpas pelo tempo em que passei um pouco afastado. Projetos pessoais, trabalho, mudanças, enfim, vamos dar início e perder menos tempo com xurumelas =P

Todos nós já sabemos que 99,9% dos browsers possuem suporte ao bom e velho Javascript. Mas o que custa trabalharmos um pouco melhor e ter um código bem feito e dando suporte a todos? Até porque o mundo mobile cresce cada vez mais e, infelizmente, ainda existem alguns aparelhos que não dão todo o suporte.

Outro motivo que precisamos nos preocupar é que se tiver algum erro de execução no seu Javascript, por um simples erro de sintaxe, o seu código pode não ser todo interpretado e, por exemplo, estourar um JSON sem CSS na tela do usuário não é nada agradável.

E como evitar esse tipo de coisa?

Imagine que você tem um form que vai ser enviado assíncronamente. Como poderíamos fazer da melhor forma?

Existe um método que não é tão conhecido chamado preventDefault(). Ele vai nos ajudar bastante nos nossos exemplos. Ele previne a execução padrão do evento. No caso de um formulário, ele não vai submetê-lo, nem levar o usuário para a action do form. Se fosse um link, ele não levaria o usuário para a página do link, e assim sucessivamente.
Vamos pôr a mão na massa!

<form action="/users/" method="post" id="newUser">
	<input type="text" name="title" />
	<input type="submit" value="Enviar" />
</form>

$('form#newUser').submit(function(event){
	event.preventDefault(); //Este é o cara!
	var actionUrl = $(this).attr('action'),
		params = $(this).serializeArray();
	$.post(
		actionUrl,
		params,
		function(){
			alert('Formulário enviado com sucesso!');
		}
	);
 });
 

Algumas boas práticas podem ser vistas nesse código.

• A url que é enviada via ajax é igual a do html;
• Os parâmetros são carregados pelo serialize(), ou seja, se incluir novos parâmetros no form, estes também serão enviados na requisição ajax;
• Se o JavaScript estiver desabilitado, o envio será feito da mesma forma. O ideal é ter um tratamento no back-end para fazer retornos agradáveis ao usuário.

Para completar, tente desabilitar o javascript do browser e fazer um teste no seu formulário.

preventDefault() vs return false

Alguns desenvolvedores preferem utilizar o return false; no corpo do método. Pode ser utilizado também. A diferença é que o return false executa o preventDefault() e o stopPropagation(), não permitindo que nenhum outro manipulador seja notificado do evento.

Uso dos métodos .parent(), .parents() ou .closest()

Bem pessoal, nunca é demais falar de coisas simples, mas que ajudam muito a manutenção do código desenvolvido. Algumas vezes que acessei o código escrito por terceiros, me deparei com algumas coisas que são bastante utilizadas, porém não é nem de longe a melhor forma de trabalhar. Irei citar alguns exemplos agora:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Se você estiver com o objeto $('li.item-1') e quiser ir para a primeira ul da árvore, neste caso $('ul#one'), quais as formas que podemos chegar até ela se esse conteúdo não é estático e este id é flexível?

Primeira opção – uso do parent()

Essa é a opção que utiliza o método parent() infinitamente. Por incrível que pareça, é a que eu mais vejo.

var item1 = $('li.item-1'),
    primeira_ul = item1.parent().parent().parent().parent();

O maior problema desta opção, além do código repetido que está meio óbvio, é que se o código html for modificado acrescentando ou removendo algum elemento, este javascript precisará ser alterado também.

Segunda opção – uso do parents()

Essa é a opção que utiliza o método parents(). É uma solução válida, porém o código não fica muito elegante.

var item1 = $('li.item-1'),
    primeira_ul = item1.parents('ul.level-1:eq(0)');

Por que utilizar o eq(0)?

Desta forma ele irá retornar o objeto da primeiro ul pai com a classe .level-1 que ele encontrar.

Terceira – uso do closest()

Essa é a opção que utiliza o método closest(). Na minha opinião é a opção mais elegante.

var item1 = $('li.item-1'),
    primeira_ul = item1.closest('ul.level-1');

Esta forma é idêntica a segunda opção, porém acho que o código fica mais elegante.

E o que isso tem haver com flexibilidade no código?

Imagine que você precisa incluir outros elementos dentro desses nós, como um link ou um span. Da primeira forma você precisará dar manutenção no JS, acrescentando ou retirando a quantidade de métodos parent() que existir. Utilizando o parents() ou o closest(), não precisa se preocupar com isso. Ele se preocupa por você!

jQueryBrasilCast 003 – Ajax, Ajaj, Ajas

jQueryBrasilCast 003 - Ajax [ 48:58 | 0.01 MB ] Play Now | Play in Popup | Download (2475)

Olá pessoal,

Apesar da demora, finalmente lançamos o nosso terceiro podcast. Aconteceram alguns problemas técnicos na gravação, mas o principal aconteceu. Está divulgado!

Desta vez, contamos com a participação especial do Wilker:

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante!

Links

• Loop infinito em PHP
• Indexando !# ajax

Participantes:

• Luiz Tiago (@luiztiago)
• Ruan Carlos (@ruanltbg)
• Jean Nascimento Suissa (@osuissa)
• Djalma Araújo (@djalmaaraujo)
• Neto (@sputinyk)
• Wilker Lucio (@wilkerlucio)

Espero que gostem!

Cya!

Lançado jQuery 1.6.2 RC1

Ontem foi o dia de lançamento do primeiro Release Candidate do jQuery 1.6.2. Pelo que verifiquei rapidamente, não existem grandes mudanças, além da correção de alguns bugs.

Link do CDN jQuery:

• http://code.jquery.com/jquery-1.6.2rc1.js
• http://code.jquery.com/jquery-1.6.2rc1.min.js

Changelog:

• http://blog.jquery.com/2011/06/14/jquery-162rc1-released/

Ainda iremos fazer alguns testes, mas de acordo com o post oficial do jQuery, as mudanças foram mais evidentes na correção de bugs, principalmente no IE (blaaah!) como mencionado no post oficial do lançamento do jQuery 1.6.2 RC1.

Cya!

jQueryBrasilCast 002 – jQuery vs Outras bibliotecas + noConflict()

002 - jQuery vs Outras bibliotecas + noConflict() [ 54.06 MB ] Play Now | Play in Popup | Download (1534)

Olá pessoal!

Está no ar o segundo podcast. Espero que gostem mais do que o primeiro e menos do que o próximo!

Comentem, curtam e falem de tudo o que vocês acharam.

Ao contrário do áudio do primeiro, este já está com um pouco mais de qualidade graças à todos os participantes!

Você pode adicionar o podcast ao seu iTunes clicando aqui.

É isso aí. Comentem bastante!

Links

• Ext Js
• Mootools

Participantes:

• Luiz Tiago (@luiztiago)
• Ruan Carlos (@ruanltbg)
• Jean Nascimento Suissa (@osuissa)
• Jaydson Gomes (@jaydson)
• Neto (sputinyk)

Espero que gostem!

Cya!

Início do processo de tradução da documentação do jQuery

Olá pessoal,

Como já informamos no nosso Twitter há alguns dias, estamos organizando o processo para a tradução da documentação do jQuery.

A explicação do processo para colaboração está todo detalhado no repositório da documentação no Github.

Caso você não tenha prática com o GitHub, ou prefira traduzir por fora, você pode baixar toda a documentação atualizada e nos enviar os arquivos .html da documentação (que fica dentro da pasta docs) que for traduzindo, de acordo com o os métodos que você desejar participar. Antes de traduzir qualquer método, procure saber se ele encontra-se disponível ou se ele não já está traduzido.

Como marcar um conteúdo para traduzir?

Envie um email para jquerybrasil@gmail.com informando qual ou quais métodos pretende traduzir e aguarde a resposta.

Para termos um controle maior dos métodos e dar a chance para participação de todos, estamos limitando a apenas 3 métodos em andamento por colaborador.

Você pode acompanhar o andamento das traduções, bem como as traduções restantes e os responsáveis, que está disponível neste documento.

Contamos com a colaboração de todos para ajudar a comunidade jQuery. Como explicado, todos os colaboradores terão seus créditos mantidos e divulgados na apresentação da versão final da documentação.