HomeJavascriptMootools 1.2 + Swf = Titulos Personalizados

03

Dez

Mootools 1.2 + Swf = Titulos Personalizados
Escrito por Gonçalo Martins   


moo sifrPara quem não sabe aqui no weblouca.com, utilizo sIFR 2.0.7 para substituir a fonte dos títulos dos artigos por outro tipo de fonte não web-standard.

No entanto esta brincadeira custa-me mais cerca de 15KB de tráfego, por visitante ao site!

Comecei a pensar e porque não programar algo com Mootools 1.2 para substituir o Javascript do sIFR. O tamanho do ficheiro resultante deverá ser menor...

Sendo assim o script será algo do género:

javascript
  1. var paginaweb = {
  2.     start: function(){
  3.         paginaweb.titulos();
  4.  
  5.     },
  6.     titulos: function(){
  7.         var titulos = $(document.body).getElements('h1,h2');
  8.  
  9.  
  10.         var valid_titulos = titulos.filter(function(elem){
  11.             return elem.get('rel')!=='skip';
  12.  
  13.         });
  14.  
  15.  
  16.         valid_titulos.each(function(title){
  17.  
  18.             var text = title.get('html');
  19.  
  20.             var dimension = title.getSize();
  21.  
  22.             var styles = title.getStyles('text-align',
  23.                                                              'padding-top',
  24.                                                              'padding-bottom',
  25.                                                              'padding-left',
  26.                                                              'padding-right',
  27.                                                              'font-size','color',
  28.                                                              'padding-left',
  29.                                                              'line-height');
  30.  
  31.  
  32.             var swf_width = dimension['x'].toInt() -
  33.                                               ( styles['padding-left'].toInt() +
  34.                                               styles['padding-right'].toInt() );
  35.  
  36.             var swf_height = dimension['y'].toInt() -
  37.                                               ( styles['padding-top'].toInt() +
  38.                                               styles['padding-bottom'].toInt() );
  39.  
  40.  
  41.             var obj = new Swiff('http://caminhoparaafonte.com/fonte.swf', {
  42.                 width: swf_width ,
  43.                 height: swf_height ,
  44.                 container:title,
  45.                 params: {
  46.                     wmode: 'transparent'
  47.                 },
  48.                 vars: {
  49.                     txt: text,
  50.                     w: swf_width ,
  51.                     h: swf_height ,
  52.                     textalign: styles['text-align'],
  53.                     textcolor: styles['color'],
  54.                     offsetTop: styles['padding-top']
  55.                 }
  56.             });
  57.  
  58.         })
  59.     }
  60. }
  61. window.addEvent('load', paginaweb.start);
  62.  

 

O código pode ser adicionado tanto no <head> do site ou no fim deste. O código realiza um scan a todo o site e  "quando este acaba de abrir", substitui todos os títulos, classes, ou divs que definiu no script.

para que uma determinada tag não seja substituída o código html terá que ser deste género:

html
  1. <h2 rel="skip">A fonte do titulo não irá mudar</h2>
  2.  

No sIFR normal você têm ainda que fazer o load de dois ficheiros CSS, com este método esses ficheiros não são necessários, o script vai buscar todos os dados que necessita ao seu CSS.

Para escolher que tags, a substituir, é só editar a seguinte linha de código:

javascript
  1. var titulos = $(document.body).getElements('h1,h2');
  2.  



Para escolher o ficheiro swf (fonte) a utilizar é só editar a seguinte linha:

javascript
  1. var obj = new Swiff('http://caminhoparaafonte.com/fonte.swf', {

Para gerar o ficheiro SWF, pode ir ao site sifrgenerator.com. Escolher wizard, realizar o upload da fonte que deseja utilizar no formato .ttf, escolher a versão 2.0.7 do Sifr e realizar o download do ficheiro .swf.



Gostou deste Artigo?
Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!
Categoria:
Se preferir, pode ainda deixar um comentário

PATROCINADORES


cometarios
Trackback(0)
Wilson
Dezembro 27, 2008
http://blog.wilson.com.pt

obrigado pela dica!
murilo
Maio 20, 2010
http://santos

gostaria de saber se desta forma aceita acentos, porque já tentei usar o sirf varias vezes e não consegui por causa dos acentos.

Escreva o seu Comentario
 
  pequeno | maior
 

busy
 

Patrocinadores do Site

Subscrever Feed

Artigos

Ultimos artigos
Como rodar imagens com javascript
jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
Crie facilmente miniaturas das suas imagens com PHP
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
Otimize as suas imagens com PunyPng
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Como redimensionar imagens com PHP
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
Links de Afiliados com Javascript - Update
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...