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 .
TweetRank.It
18/07/11
Hoje a Grifo lançou um novo app para o Twitter, o TweetRank.It. Através do app, você pode rankear palavras positiva ou negativamente. Atualmente a ferramenta funciona com uma pontuação geral. A princípio, na nova versão terão filtros periódicos (diários, semanais, mensais…) e gráficos para que você possa acompanhar as estatísticas mais detalhadamente.
Para utilizar a ferramenta você precisa enviar um tweet com a hashtag #TweetRankIt ou um mention ao @TweetRankIt. Depois de Tweetar, o @TweetRankIt irá seguí-lo e você estará participando do app.
Nesse momento o TweetRankIt pegará todos seus tweets com as marcas ++ e — (ex.: I love TweetRankIt++) e dará os devidos pontos à palavra rankeada. Sua palavra poderá entrar na lista dos #winning ou #fail no site ou seu usuário pode entrar na lista dos Top users. Participe!
GrifoCast 03 parte 3 – Dicas de Design para web
14/01/11
Final do GrifoCast com as Dicas de Design para web.
GrifoCast 03 parte 2 – Dicas de Design para web
03/01/11
Continuação do GrifoCast com as Dicas de Design para web.
GrifoCast 03 – Dicas de Design para web
24/12/10
O GrifoCast de hoje ficou tão grande, mas tão grande que vai ser dividido em três partes, mas o assunto é muito interessante e importante para todos os webdesigners e diretores de arte de web.
E claro o nosso Feliz Natal para todos vocês!
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 >
Gradientes no Internet Explorer 9
08/11/10
Aqui na Grifo já estamos preparando nossos projetos para o IE9, usando o Beta/Platform Preview. É muito bom poder usar seletores CSS3, border-radius, shadow e tudo o mais.
Mas ainda falta uma peça crucial: background gradients. Não há menção pela Microsoft de suporte futuro a essa funcionalidade no IE9, o que nos preocupa bastante. Estamos usando o CSS3Pie em alguns projetos, que nos permite definir sombras, border radius e gradientes no CSS, que são renderizados via VML no IE 6, 7 e 8. Como o IE9 não suporta mais VML, ficamos de mão abanando.
Sorte nossa é que a versão 9 suporta SVG. A solução que encontramos utiliza CSS, SVG e um script server-side: geramos um gradiente dinamicamente a partir de parâmetros passados no CSS. O resultado no CSS é meio gordo mas funciona em praticamente todos os browsers, do IE6 ao Opera. Veja o código abaixo:
(gradient.php)
<?php
header( 'Content-type: image/svg+xml' );
function _get($k){ echo $_GET[$k] ? $_GET[$k] : 'fff'; }
?>
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#<?php _get('from') ?>; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#<?php _get('to') ?>; stop-opacity:1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
</svg>
CSS:
#xis {
background: #dbdbdb; // fallback para browsers sem suporte
background: url(gradient.php?from=ededed&to=d8d8d8); // IE9, Opera
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#d8d8d8)); //Chrome, Safari, Mobile Webkit
background: -moz-linear-gradient(top, #ededed, #d8d8d8); // Firefox
-pie-background: linear-gradient(#ededed, #d8d8d8); // IE 6-8
behavior: url(../js/PIE.php);
}
Uma baita mão escrever tudo isso só pra um gradiente, não? Por isso usamos o less.js no desenvolvimento. Com esse mixin:
.gradient(@from, @to){
background: (@from+@to)/2;
@svgG: e(%('url(gradient.php?from=%d&to=%d)', @from, @to));
@svgGradient: e(`this.svgG.toJS().replace(/#/g, '')`); //svg IE9
background: @svgGradient;
background: e(%('-webkit-gradient(linear, 0% 0%, 0% 100%, from(%d), to(%d))', @from, @to));
background: e(%('-moz-linear-gradient(top, %d, %d)', @from, @to));
-pie-background: e(%('linear-gradient(%d, %d)', @from, @to));
.pie();
}
Só precisamos escrever isso no CSS:
#xis {
.gradient(#fcfcfc, #999999);
}
Exemplo aqui.
A limitação no momento é que só funcionam gradientes lineares verticais, mas é só alterar o código server-side que dá pra gerar qualquer tipo de gradiente.
Esperamos que a dica seja útil 
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.
Input File – Formulários personalizados
23/08/10
Vamos para o último post da série formulários personalizados. Já mostramos como personalizar o campos de radio e checkbox e também as combobox. Hoje iremos mostrar como personalizar um campo de arquivo que é o mais simples.
As duas grandes sacadas para a personalização do input file são as seguintes:
- Utilizaremos o campo com opacidade 0 por cima do campo falso, assim como nos outros casos de personalização de formulário;
- Se você já tentou fazer esse teste, provavelmente teve problemas para aumentar o tamanho do campo conforme o layout que está trabalhando. A forma de fazer isto é aumentando o tamanho da fonte.
Vamos montar um exemplo passo a passo e no final disponibilizaremos o link com o exemplo completo. Não trapaceie, monte o exemplo com suas próprias mãos e depois veja o link.
Começamos pelo HTML:
<div class="inputFile"> <span>Selecione um arquivo</span> <input type="file" name="arquivo" id="arquivo" /> </div>
O span será utilizado para mostrar o nome do arquivo selecionado.
Agora através do CSS vamos posicionar o input sobre o span e ocultá-lo com opacidade. Desta forma, quando o usuário clicar no span (que é o que estará visível), na verdade estará clicando no input.
.inputFile {
width: 185px;
height:40px;
position: relative;
overflow: hidden;
background: red;
}
.inputFile span {
display: block;
position: absolute;
}
.inputFile input {
position: absolute;
right: 0;
z-index: 2;
font-size: 100px; /* Aumenta tamanho do campo */
opacity: 0;
filter: alpha(opacity=0);
}
Note a propriedade font-size: 100px no input. Isto é utilizado para aumentar o tamanho do campo que não respeita as propriedades width e height em alguns browsers.
Agora só falta exibir no span o valor selecionado no input. Isto é feito com poucas linhas utilizando jquery:
$("#arquivo").change(function() {
$(this).prev().html($(this).val());
});
E está pronto. Simples não? Conseguiu se segurar e montar antes de abrir o link de exemplo? Então agora acesse personalização de input file
As técnicas mostradas foram testadas em IE6 e superiores, Firefox 3.6, Chrome e Safari. Qualquer problema que encontrarem em outras versões de browser, mobile ou outros do gênero nos avisem para tentarmos aprimorar a técnica. Sugestões de melhoria também são bem-vindas.
Abraços e até a próxima!