HTML5
Rede Infinita
31/10/11
Hoje foi ao ar o projeto Rede Infinita baseado no conceito da Unisinos: Infinitas Possibilidades. O projeto criado pela agência Escala e desenvolvido pela Grifo.
O aplicativo tem como objetivo agrupar pessoas com interesses semelhantes – quanto mais próximo você estiver de pessoas como você, mais fácil será se comunicar e trocar informações para criar novas possibilidades para o mundo.
Esse projeto foi desenvolvido em HTML5, onde a funcionalidade mais interessante é a visualização da rede (http://redeinfinita.unisinos.br/user/renatho). Quando iniciamos o projeto, começamos a avaliar qual seria a melhor tecnologia, pois a ferramenta precisa suportar um número muito grande de usuários. A performance dessa visualização era um ponto crítico, devido à lógica envolvida que requer uma série de cálculos em tempo real no cliente.
Iniciamos os testes utilizando SVG e VML, onde teríamos um amplo suporte dos navegadores. Mas quando começamos a cadastrar usuários vimos que a performance ia por água abaixo, pois com VML são criados muitos elementos no DOM. Com mil usuários o navegador já começava a travar.
Nossa próxima tentativa seria utilizar tags <div> para fazer as bolinhas, como muitas ferramentas fazem em gráficos semelhantes a esse. Mas apesar de nada elegante também teríamos muitos elementos no DOM, então nossa segunda tentativa foi testar com canvas, mesmo sem ter bem definido qual seria a solução para o IE7 e 8 que não possuem suporte. Com o canvas ainda enfrentamos certa lentidão por estarmos desenhando as bolinhas com gradient.
Para começar a melhorar a perfomance, resolvemos desenhar as bolinhas como imagem, pois temos uma variação de 6 cores. Dessa forma não precisaríamos montar um objeto para o gradiente a cada usuário cadastrado. Isso melhorou muito a situação. Também fizemos um carregamento “faseado” em 6 tipos de usuários: cada tipo carregando em seu tempo, o que aliviou bastante as iterações do loop que monta o gráfico.
Mas e agora? E o IE? Começamos testando o ExplorerCanvas (que transforma o canvas para VML), mas assim voltávamos à estaca zero não resolvendo o problema. Então resolvemos testar o FlashCanvas e nos surpreendemos com a performance obtida, porém com uma série de bugs. Depois de muito tentar resolver os bugs, nosso desenvolvedor @jcemer resolveu testar a verão PRO e como num passe de mágica todos problemas estavam resolvidos! Valor da versão PRO: US$ 31. A justificativa do valor: “IE” ao contrário.
Este projeto, como todos os projetos da Grifo, contou com a colaboração de todos os desenvolvedores com opiniões e ótimas soluções. Parabéns ao @jcemer, @ricardobeat, @askoth, @vitor42, @mutly, @filipemedina e não menos importante: eu (@renatho) =P .
GrifoCast 02 – HTML5
17/11/10
Chegamos ao 2º episódio do GrifoCast. Hoje falaremos sobre HTML5 e a forma que utilizamos ele no nosso dia-a-dia. Falaremos também de CSS3Pie e Less.
Agora contamos com melhores equipamentos e a edição está mais direta e com menos cortes. Mas, é claro, ainda temos muito a melhorar! Portanto continuem nos enviando críticas, sugestões, dúvidas, sua opinião e é claro, temas que você acha importantes para serem discutidos nos próximos episódios.
E por favor, compartilhem com seus amigos e colegas de trabalho o GrifoCast para melhorarmos cada vez mais.
Edição:
Filipe Medina – @filipemedina
Participantes:
Renatho Rosa – @renatho
Ricardo Tomasi – @ricardobeat
Marcelo Oliveira – @askoth Mais >
GrifoCast 01 – Semântica nas Listas
29/10/10
Seja bem-vindo ao mais novo canal de comunicação e entretenimento da Grifo. Esse, é nosso episódio piloto, portanto está bem amador ainda, mas nossa proposta é que ele seja semanal (espero que a gente possa cumprir essa meta) e que vá evoluindo a cada semana, seja em pauta, em equipamento de gravação e captação de áudio, enfim, em tudo.
Seus comentários (desde que sejam construtivos) serão muito valiosos para nós.
Comentem, repassem e nos mandem assuntos a serem discutidos ou questões para serem respondidas, que a gente lê e responde.
Bom, vamos ao que interessa, os tópicos do primeiro GrifoCast são:
1) A W3C documentou que no HTML5 a dl chama-se “description list” e não mais “definition list”, então agora ele pode ser usado para definir pares de valores e não mais somente dicionário de dados.
2) Sobre uso de ul ou ol em formulários: Qual o mais semântico? Qual o mais vantajoso?
Apresentação / Edição:
Filipe Medina – @filipemedina
Participantes:
Renatho Rosa – @renatho
Ricardo Tomasi – @ricardobeat
Marcelo Oliveira – @askoth Mais >
HTML5 não é Flash
14/09/10
Estou muito feliz com o espaço que o HTML5 vem ganhando ultimamente. Através dele as pessoas estão COMEÇANDO dar o devido valor ao client-side. Vejo muitos tweets com artigos e novidades do HTML5, mas ainda vejo muitas pessoas confusas sobre o que realmente é o HTML5. A maioria desses tweets são comparações como se o HTML5 fosse o novo Flash, o que não é verdade.
O HTML5 pode sim fazer muita coisa que hoje é feito erroneamente com o Flash, mas tem muitas outras funcionalidades interessantes e as pessoas devem ver isso. Antes de seguir o post, gostaria de desabafar um pouco explicando o porque mencionei a palavra “erroneamente”:
Na minha visão o Flash foi feito para rodar aplicações isoladas e independentes, como por exemplo uma calculadora ou banners – para isto ele é muito bom, mas para sites inteiros como é usado em alguns casos hoje em dia não faz sentido nenhum. Ele é muito limitado em diversas questões como acessibilidade, SEO, usabilidade – O Flash não foi preparado para a evolução e para provar isso veja palavras do visionário Jobs falando sobre aparelhos touch:
O Flash foi desenvolvido para computadores que usam mouse, não para telas sensíveis que usam dedos. Por exemplo, muitos sites em Flash dependem do “rollover”, que abrem menus ou outros elementos quando a seta do mouse passa sobre um local específico. A interface revolucionária multitoque da Apple não utiliza um mouse, e não há conceito de rollover (rolamento). A maioria dos sites Flash precisará ser reescrita para suportar aparelhos baseados em tecnologia touch. Se os desenvolvedores precisam reescrever seus sites Flash, por que não usar tecnologias modernas como HTML5, CSS e JavaScript?
(Jobs, se você ler este artigo gostaria de dizer que concordo contigo, mas o iPhone rodar Flash cairia bem nesse momento)
Bom, mas voltando ao HTML5… Há muitas features maravilhosas além de canvas e animações. Vou citar algumas:
- Código mais semântico e organizado (muito mais tags com significado);
- Diversos tipos de campo em formulário (data, e-mail, numérico…)
- Autofocus (foco automático nos campos)
- Placeholder (descrição do campo no próprio valor)
- Vídeo
- Áudio
Infelizmente não existe um momento “o HTML5 foi lançado e todos podem utilizá-lo à vontade”, mas algumas dessas features já podemos aplicar mesmo com os browsers mais antigos não dando suporte, pois não sofrerão impacto caso a funcionalidade não exista. Por exemplo: podemos definir um campo do tipo e-mail e quando ele não tiver suporte simplesmente assumirá o tipo texto.
Caso você seja desenvolvedor (ou não) e queira queira começar se aprofundar logo, segue a dica: http://diveintohtml5.org/
O HTML5 com suas diversas novas features, juntamente com o CSS3, obviamente vai dar uma alavancada no client-side dando espaço para novas profissões. Imaginando uns anos pra frente acredito que no client-side teremos programadores só de javascript (já existe hoje), programadores só de HTML (profissionais com foco em conteúdo e semântica), programadores CSS (quem sabe os próprios designers), animadores de CSS (Os animadores de flash de hoje); e também as muitas outras profissões especializadas que já surgiram como profissionais de SEO, acessibilidade, performance, entre outras.
Espero que tenham gostado do Post. Deixem suas opiniões nos comentários e vamos trocar experiências.