Web Louca

Home scripts Mootools 1.2 + Swf = Titulos Personalizados

Mootools 1.2 + Swf = Titulos Personalizados

03 Dezembro 2008 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:

var paginaweb = {
    start: function(){
        paginaweb.titulos();
    },
    titulos: function(){
        var titulos = $(document.body).getElements('h1,h2');
 
        var valid_titulos = titulos.filter(function(elem){
            return elem.get('rel')!=='skip';
        });
 
        valid_titulos.each(function(title){
 
            var text = title.get('html');
            var dimension = title.getSize();
            var styles = title.getStyles('text-align',
                                                             'padding-top',
                                                             'padding-bottom',
                                                             'padding-left',
                                                             'padding-right',
                                                             'font-size','color',
                                                             'padding-left',
                                                             'line-height');
 
            var swf_width = dimension['x'].toInt() -
                                              ( styles['padding-left'].toInt() +
                                              styles['padding-right'].toInt() );
            var swf_height = dimension['y'].toInt() -
                                              ( styles['padding-top'].toInt() +
                                              styles['padding-bottom'].toInt() );
 
            var obj = new Swiff('http://caminhoparaafonte.com/fonte.swf', {
                width: swf_width ,
                height: swf_height ,
                container:title,
                params: {
                    wmode: 'transparent'
                },
                vars: {
                    txt: text,
                    w: swf_width ,
                    h: swf_height ,
                    textalign: styles['text-align'],
                    textcolor: styles['color'],
                    offsetTop: styles['padding-top']
                }
            });
        })
    }
}
window.addEvent('load', paginaweb.start);

 

 

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:

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

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:

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



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

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.


Trackback(0)
Wilson
Dezembro 27, 2008

obrigado pela dica!
murilo
Maio 20, 2010

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
Subscreve a newsletter gratuita e começa hoje mesmo a criar websites e a ganhar dinheiro na internet!


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...

Nuvem de Tags

exemplo script site mootools opera javascript download firefox