Leonardo Moreira

Fala galera, tudo certo? Primeiro quero pedir desculpas pela demora na publicação da parte 2 da série falando sobre o elemento canvas, estou com bastante projetos em desenvolvimento, mas aqui estamos. Se você ainda não leu a primeira parte, clique aqui.

Nesse post vou falar sobre os métodos bezierCurveTo, quadraticCurveTo, arc e como aplicar tudo isso no elemento canvas, vamos lá?

arc

Para desenhar arcos e círculos, usamos o método arc. Esse método tem cinco parâmetros: X e Y são as coordenadas central do nosso desenho, radius é a metade do diâmetro da nossa circunferência (nem preciso explicar ), startAngle e o endAngle são os parâmetros que define o ponto inicial e final a partir do eixo X e finalmente o parâmetro anticlockwise que recebe um valor booleano, se esse valor for true define o sentido anti-horário para iniciar o nosso desenho, caso contrário, inicia o desenho no sentido horário.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Observação: Os ângulos no método arc são calculados em radiano, não em graus. Para converter graus em radiano, use:

var radiano = (Math.PI/180)*graus

Continue Lendo

Oi Pessoal, belezinha? Resolvi criar esse post e mostrar que o HTML5 pode ser usado agora, seja combinado com Flash ou não, cada tecnologia tem seu foco, isso é fato. Não vou escrever nenhum código ou cookbook de como fazer sites usando HTML5, quem acompanha o blog sabe que estou escrevendo uma série de artigos sobre HTML5, então só ficar de olho.

Antes de colocar alguns sites de grandes empresas brasileiras e outros grandes projetos fora do Brasil que já usam HTML5, seja combinado com Flash ou não, quero deixar aqui um trecho que escrevi para a matéria “Influências do HTML5 no Design de Interfaces” da Revista Webdesign, edição 76.

“O maior obstáculo para o desenvolvimento com HTML5 é, com certeza, o suporte de navegadores para a interpretação da linguagem e suas marcações. Alguns estão dando esse suporte de forma parcial; outros ainda estão trabalhando em novas versões, com promessas de atender os padrões, porém isso não nos impede de comerçarmos a testar as novidades e colocar em prática, seja de forma experimental ou criando alternativas para funcionalidades que ainda não são suportadas em alguns navegadores.”

Coloquei esse trecho da matéria justamente para mostrar que já podemos usar o HTML5 em vários projetos, e como disse, podemos usar alternativas para algumas funcionalidades ou apenas combinar o uso do HTML5 com o Flash, se for o caso. A grande questão, que todo mundo esquece, é que o HTML5 não veio somente para substituir players de vídeos em flash ou criar animações e efeitos com canvas, mas também para melhorar a semântica e entregar um conteúdo segmentado para o usuário, ou seja, não existem motivos para sentar e esperar, ou fazer previsões para 2022.

Chega de blá, blá, blá. Separei alguns bons sites que já utilizam HTML5, combinado com Flash ou não, segue a lista:
Continue Lendo

Oi pessoal, tudo certo? Tivemos, recentemente, o lançamento do iPad no mercado e agora com todo o alvoroço gerado pelo dispositivo, está na hora de começar a criar versões dos nossos sites e aplicativos que rodam via Browser, para o iPad.

Básicamente, o que vamos fazer é detectar o userAgent e encaminhar a resposta para o usuário.

userAgent

O userAgent fornecido pela Apple para o iPad, gerado pelo simulador é:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko)  Version/4.0.4 Mobile/7B334b Safari/531.21.10

no modo iPhone:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g

Com o userAgent em “mãos”, agora podemos reconhecer se o usuário está usando o iPad e dizer o que fazer.

Continue Lendo

Oi pessoal, tudo bem? Hoje quero mostrar o HTML 5 na prática, nada de teorias sobre novas funcionalidades e especifícações, vamos ao que interessa.

INTRODUÇÃO

canvas é um novo e poderoso elemento entre as inúmeras novas funcionalidades do HTML 5. Com o canvas você consegue de maneira fácil criar gráficos, composições de fotos e animações usando JavaScript. Pense em um bloco de notas, cada folha é um elemento canvas onde você pode usar um contexto diferente, utilizando ou não API’s para fornecer funcionalidades de desenho.

Nesse tutorial vou tentar passar um pouco de como implementar um contexto de canvas 2D em seu código HTML, é requisito que você conheça o básico de JavaScript.

Com a chegada do Internet Explorer 9, todos os grandes navegadores já tem suporte para canvas em suas versões mais atuais, se o seu navegador está desatualizado, aproveite agora para atualizar.

Continue Lendo