Rodolfo Guedes Design

NETCARExchange

admin — Wed, 11 May 2011 23:13:36 +0000

Tive o prazer de participar na animação de apresentação/tutorial de uma nova e excelente aplicação web, focada em “leilões invertidos”, no sector automóvel, NETCARExchange.
Embaixo, deixo algumas animações que iram fazer parte da animação final.

“Linha”

admin — Tue, 19 Oct 2010 16:15:51 +0000

Criado para a disciplina de Narrativas Multimédia, este pequeno video refere-se à palavra “Linha”. O intuito desta proposta era a de explorar técnicas de edição audiovisual e estudar o software de edição.

Publiquei-o por ter algum orgulho nele, uma vez que foi o primeiro video que fiz em HD e, devo dizer, adorei fazê-lo.

Serviu tanto para explorar o software, que, apesar de já o conhecer há alguns anos, nunca o tinha usado intensamente, a não ser para um trabalho há alguns anos atrás, como para testar a minha nova DSLR, Canon EOS 550D.

Foi um prazer brincar com profundidade de campo em video HD. Acho que é um dos trunfos das DSLRs com video, a possibilidade de filmar com várias objectivas diferentes, em vez de ficarmos limitados à lente de uma camcorder convencional.

De qualquer maneira, espero publicar, em breve, mais algumas experiências com esta nova máquina, por isso, vão dando um saltinho de vez em quando.

E não se esqueçam de comentar.

Adeus, JPG, olá, WebP?

admin — Sun, 03 Oct 2010 18:08:22 +0000

A Google não pára. Browser, telemóvel, mapas e agora, um novo formato de imagem.
O WebP (pronuncia-se weppy) pode vir a substituir o Jpg como formato de imagem dominante na Web. Isto porque, segundo a Google, o WebP consegue manter a mesma qualidade de imagem, em 60% do tamanho. Ora, esta inovação deve-se à intenção de reduzir significativamente o peso do fluxo de informação existente na internet actual, sendo esta 70% composta por imagens.

Mas a coisa não se fica por aqui. O formato vídeo também vai ser abrangido, não pelo WebP, mas pelo WebM, que também poderá vir a revolucionar o video na Web.

Como funciona

Este formato usa codificação previsível (predictive coding). Não sou geek ao ponto de entender claramente este processo, mas pelo que me apercebi, basicamente, usa-se os valores dos pixels vizinhos para prever os valores do pixel em questão, codificando, depois, apenas a diferença entre os valores desse pixel e dos seus vizinhos.

O WebP também tem um novo contentor baseado em RIFF, o que possibilita novos tipos de tags na imagem.

Embora a compressão seja maior, isso não prejudica em nada a qualidade final da imagem, como poderão comprovar na galeria de comparação da Google.

Conclusão

Definitivamente, o WebP será um grande passo em frente na optimização da web e no seu fluxo, o que melhorará o desempenho dos motores de pesquisa, como o próprio Google, as páginas carregarão mais rápido e os servidores terão um alívio significativo de peso de dados. Para além disso, os dispositivos móveis benificiaram igualmente deste formato, resultando em tempos de carregamentos mais curtos, melhorando a experiência Web móvel.

Embora ainda não esteja prevista uma implementação em massa deste formato, a Google já disponibilizou uma ferramenta de conversão de Jpg para WebP para Linux, disponivel aqui. Versão para Windows está para breve. Nós, os Applenses, parece que ainda não estamos na lista de contemplados.

Texto dividido por colunas com CSS3

admin — Fri, 24 Sep 2010 10:49:21 +0000

Idealmente, uma linha de texto atinge o seu auge de legibilidade entre as 8 e 12 palavras por linha. Este conceito é vastamente usado pela indústria gráfica e jornais, dividindo o texto por várias colunas.

Com CSS3, os webdesigners deixaram de ter a necessidade de criar vários divs, dividir o texto à mão e esperar que os seus visitantes usem a mesma fonte, com o mesmo tamanho e o mesmo browser. Agora, basta um ficheiro de Javascript e tem-se acesso a esta nova propriedade.

Não vou entrar em grandes detalhes técnicos, aliás, até porque aqui têm disponivel toda a informação sobre esta nova propriedade. Vou apenas guiar-vos através do processo de implementação desta propriedade e o seu uso correcto.

Implementação

Fazer copy/paste deste código, num editor de texto qualquer, ou mesmo Dreamweaver ou outro software.
Salvar como “css3-multi-column.js” ou outro nome à escolha, desde que tenha a extensão “.js“, sem as aspas.
Anexar o código logo a seguir ao link para a vossa folha de estilo. Fica uma coisa deste género:

Agora é só usar as novas propriedades de multi-colunas disponivéis na folha de estilos. Assim:

.nome_da_classe{
column-count:2;/*número de colunas*/
column-width:200px; /*largura de cada coluna, em pixels*/
column-gap:20px;/*distância entre colunas, em pixels*/
column-rule: 1px solid #FFF; /*linha separadora de colunas (opcional).Trata-se como uma border*/

Ficaria, basicamente, uma coisa deste género:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum sem et mi interdum sed rutrum arcu venenatis. Pellentesque scelerisque elementum dolor, sed semper tellus tincidunt a. Aenean varius vestibulum lacus vel venenatis. Maecenas nec leo urna. In ornare sagittis augue a pharetra. Phasellus tristique risus urna, quis faucibus lorem. Morbi porttitor purus libero. Integer pulvinar elit ut turpis consequat ornare. Donec ut erat purus. Vestibulum erat leo, vulputate at dictum at, vestibulum quis tortor. Donec dictum nisl quis lectus sodales tempus. Morbi accumsan, eros non pellentesque sodales, enim est interdum sapien, at consectetur nibh mauris eget libero. Nulla ac lacus in augue tincidunt pellentesque. Pellentesque a odio vel arcu mollis euismod. Sed eleifend hendrerit vehicula.

Advertências

Os valores de largura (column-width) e de espaçamento (column-gap) só funcionam em pixels.

As 3 primeiras propriedades (column-width, column-count e column-gap) têm de estar presentes na mesma classe e não separadas.

Com a implementação do Javascript, é possivel que ocorram alguns conflitos com outro código Javascript presente.

Compatibilidade entre browsers

Para o Firefox e o Safari conseguirem aplicar esta propriedade, basta adicionar -moz- ou -webkit- antes de cada propriedade, ficando mais ou menos assim:


.nome_da_classe{

column-count:2px;

-moz-column-count:2;/*Firefox*/

-webkit-column-count:2;/*Safari*/

}

Pelos vistos, o Google Chrome já vem preparado para o CSS3.

Caso queiram aprofundar mais sobre isto, deixo alguns links utéis.

Mozilla Developer Center: CSS3 Columns

CSS Multi-column Layout Mode – W3C

Olá, Mundo!

admin — Wed, 22 Sep 2010 10:25:37 +0000

Passados três meses, finalmente está concluído o site. Ufa!
Sim, três meses para fazer um site deste tipo é muito tempo, mas a verdade é que queria que isto saísse o melhor possivel. Afinal, este é um projecto pessoal, o que quer dizer que não tinha prazos a cumprir, por isso, dei-me ao luxo de desenhar, redesenhar e redesenhar outra vez, cometer erros atrás de erros, bater muitas vezes na parede, experimentar, etc.
Mas cá está o produto final.

No decorrer dos próximos tempos, possivelmente, ainda haverão algumas alterações, melhoramentos, reorganizações. Para isto, conto com as vossas opiniões, comentários e críticas de maneira a tornar este site o mais agradável e inspirador possivel aos visitantes.

Relativamente ao que poderão encontrar neste blog / portfólio, postarei qualquer trabalho que ache digno de atenção, seja profissional ou pessoal. Conto, também em escrever alguns tutoriais á lá carte ou algum que ache que precise de ser tornado público, e alguns devaneios, opiniões e qualquer coisa que me der na gana…

Para concluir, quero agradecer a todos os que me ajudaram nesta demanda, nomeadamente, Bruno Mesquita, Hugo Baeta ( ~~administrador~~ moderador do fórum wordpress.pt ) e Tiago Pedras.

Um grande abraço a todos e não se esqueçam de dar um saltinho de vez em quando e comentar.