Arquivo de categoria ‘Webdesign’


Out
03

Adeus, JPG, olá, WebP?

em Webdesign

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.

Sem comentários

Deixe um comentário


Este é um espaço público e moderado. Não forneça os seus dados pessoais (como telefone ou morada) nem utilize linguagem imprópria.



Set
24

Texto dividido por colunas com CSS3

em Tutoriais, Webdesign, Webdesign

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

 

  1. Fazer copy/paste deste código, num editor de texto qualquer, ou mesmo Dreamweaver ou outro software.
  2. Salvar como “css3-multi-column.js” ou outro nome à escolha, desde que tenha a extensão “.js“, sem as aspas.
  3. Anexar o código logo a seguir ao link para a vossa folha de estilo. Fica uma coisa deste género:
  4. <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type="xhtml" src="css3-multi-column.js"></script>
  5. Agora é só usar as novas propriedades de multi-colunas disponivéis na folha de estilos. Assim:

Ler o resto

1 comentário

Scancatly

2011-12-06 11:44:18


who watched the Oscars? levitra

Donnie Roloson

2011-02-05 19:29:56


some truly fantastic info , Glad I detected this.

Deixe um comentário


Este é um espaço público e moderado. Não forneça os seus dados pessoais (como telefone ou morada) nem utilize linguagem imprópria.