Testes de unidade para Javascript dentro e fora do browser

Olá pessoal. Tudo certo?! Javascript cresceu muito em importância nos últimos anos. No passado, era percebida como uma linguagem simplificada, para programação “simples” de páginas web. Hoje, é vista como uma linguagem poderosa, rodando tanto no cliente quanto no servidor. Por causa do “crescimento” do Javascript, é natural pensar em alternativas para o desenvolvimento de… [Read more…]

Melhorando a responsividade de aplicações Web com RxJS

Olá pessoal. Tudo certo?! Esse post é baseado na apresentação do Bart de Smet no MIX11 e em um post do Mart Podwysocki. Apresento, passo-a-passo, como podemos melhorar a qualidade de nossas interfaces através da adoção do RxJS. Se você não sabe nada sobre RxJS, considere ler Reactive Extensions for Javascript (RxJS Framework). Cenário Desejamos… [Read more…]

Fractals and Tiles (com html5) – Parte 8 – Julia set

Olá pessoal. Tudo certo?! Outro dia, escrevi um post mostrando como gerar fractais a partir do Mandelbrot Set. Hoje, faço o mesmo trabalho apresentando Julia set. Novamente, foco apenas na implementação em Javascript. Uma boa explicação teórica sobre Julia set pode ser encontrada na Wikipedia ou no MathWorld. Importante: Reaproveitei boa parte do código que… [Read more…]

Amazing Trees (html5)

Olá pessoal, tudo certo?! No post de hoje, mostro uma variação do fractal “tree” que apresentei há alguns dias. Basicamente, adicionei alguma “aleatoriedade” e cor. Veja alguns resultados: Bacana, não?! Outro exemplo:   Mais um … Último: Agora, vamos ver como é o código. Aliás, o código-fonte está em https://gist.github.com/1323773 e há um live demo… [Read more…]

Fractals and Tiles (com html5) – Parte 7 – Mandelbrot set

Olá pessoal, tudo certo?! Finalmente, chego ao mais famoso dos fractais. Trata-se do conjunto de Mandelbrot. Código-fonte: https://gist.github.com/1314575 Live demo: http://users.cjb.net/livedemoelemarjr/mandelbrot.htm Importante: A performance do demo é assustadoramente ruim no Internet Explorer 9. Confesso que isso me pega de surpresa e ainda acho que escrevi alguma coisa “muito errado”. Recomendo que você rode o demo… [Read more…]

Fractals and Tiles (com html5) – Parte 6 – Barnsley’s Fern

Olá pessoal, tudo certo?! No post de hoje apresento os fundamentos para geração de um fractal muito famoso. Trata-se do “Barney’s Fern”. Um dos mais belos, IMHO. Nossa demonstração permite que o usuário mude o tamanho da “viewport” alterando a posição dos marcadores. Basta selecionar o marcador que desejamos mover (com um clique), depois clicar… [Read more…]

Fractals and Tiles (com html5) – Parte 5 – Sierpinski triangle via Chaos Game

Olá pessoal, tudo certo?! No último post, mostrei uma técnica para geração do triângulo de Sierpinski através de uma curva. Agora, mostro como fazer isso com uma técnica chamada “chaos game”. Código-fonte completo: https://gist.github.com/1306848 Live demo: http://users.cjb.net/livedemoelemarjr/sierpinski_chaos.htm Como falei no início dessa série, explicar a fundamentação matemática para fractais está fora de meus objetivos. No… [Read more…]

Fractals and Tiles (com html5) –Parte 4 –Sierpinski Gasket Curve

Olá pessoal, tudo certo?! Nesse post, mostro uma técnica para geração do triângulo de Sierpinski através de uma curva. Trata-se de um método pouco usual (a prática comum é desenhar um triângulo e apagar partes sucessivamente). O código que utilizo aqui é derivado daquele que mostrei no post anterior. Por isso, nesse post, explico apenas… [Read more…]

Fractals and Tiles (com html5) – Parte 3 – Hilbert curves

Olá pessoal, tudo certo? Depois de um “passeio nas estrelas”, volto a tratar de fractais com HTML5. Na parte 2, mostrei uma implementação simples para snowflakes. Na parte 1, mostrei como desenhar trees. Hoje, mostro como desenhar Hilbert curves. Live demo: http://users.cjb.net/livedemoelemarjr/hilbert.htm Código-fonte completo: https://gist.github.com/1306034 Um pouco mais sobre Hilbert “Space-filling” curve Space-filling fractals, como… [Read more…]

Fractals and Tiles (com html5) – Parte 2 – Snowflakes

Olá pessoal, tudo certo?! No post anterior, apresentei uma definição, não rigorosa, para fractal. Além disso, mostrei um exemplo simples de Tree (um exemplo simples de fractal). Hoje, mostro a implementação para Snowflakes. Código-fonte completo: https://gist.github.com/1302765 Live demo: http://users.cjb.net/livedemoelemarjr/snowflake.htm O que é snowflake? Um snowflake é uma curva geométrica e um dos primeiros “fractais” a… [Read more…]

Fractals and Tiles (com html5) – Parte 1 – Trees

Olá pessoal, tudo certo?! Nessa série que estamos começando, vou demonstrar como gerar imagens incríveis através de fractais e tiles. Nos posts que seguem, explicarei um pouco da matemática necessária para trabalhar com fractais e tiles. Entretanto, vou me concentrar mais na “mecânica” do desenho do que na matemática envolvida. Live demo: http://users.cjb.net/livedemoelemarjr/tree.htm (funciona no… [Read more…]

Criando animações bacanas com o Canvas do HTML5

Olá pessoal, tudo certo? Há algum tempo, escrevi um post sobre animações com HTML5. O post de hoje é uma “revisão”. Aproveito para adicionar alguns conceitos mais sólidos que “puxei” do XNA. O código completo pode ser obtido nesse endereço: https://gist.github.com/1290398. Se preferir, pode ver o código no jsFiddle, em http://jsfiddle.net/ElemarJR/G7h6T/. Live demo: http://users.cjb.net/livedemoelemarjr/spheres.htm. Primeiro,… [Read more…]

Efeitos básicos e Color balancing usando HTML5

Olá pessoal, tudo certo?! No post de hoje, continuo mostrando algumas possibilidades para manipulação de imagens usando Canvas do HTML5. De certa forma, esse post é uma continuação para Image Pixelation com Canvas do HTML5. Há outros posts sobre HTML5. Tons de cinza Vamos começar nossos trabalhos através dos mais básicos dos efeitos. Apresentação de… [Read more…]

Image Pixelation com Canvas do HTML5

Olá pessoal, tudo certo?! Você já viu aquelas reportagens onde o rosto de uma pessoa aparece “quadriculado”? Este é um grande efeito, chamado pixelation, que torna uma imagem “irreconhecível” sem necessidade de manter um “fundo preto”. No post de hoje, mostro como aplicar esse efeito usando o elemento canvas do html5. Começando – desenhando uma… [Read more…]

Construindo Widgets em jQuery (UI)

Olá pessoal, tudo certo? Da mesma forma que jQuery oferece o método fn.extend() para criar plugins, jQuery UI provê mecanismos para criação de novos plugins. No post de hoje, mostro como criar esses plugins. Criando nosso primeiro widget (dummy) Para começar, criamos um arquivo de script para nosso plugin. Nesse arquivo, adicionamos o seguinte código:… [Read more…]

Olá pessoal, tudo certo?! Vez ou outra, vou adicionar uns posts mais “levinhos” aqui no blog, ok!? No post de hoje, mostro como construir um “contador de caracteres restantes”, em uma página Web, semelhante ao mostrado na página do Twitter, usando JQuery. It’s fun time! Nosso HTML Simples, não!? O código jQuery (JavaScript) Agora, vamos…