Stoa :: Lucas De Marchi :: Blog :: Fix the web[2]

novembro 07, 2008

default user icon
Postado por Lucas De Marchi

Esse é o segundo post dos 3 que pretendo fazer sobre o tema "Fix the web". O primeiro falava da extensão Firebug do Firefox, a qual usaremos neste post. Portanto, não o deixe de ler também.

Depois que comecei a escrever esse post, resolvi procurar no Stoa e achei um post do Everton falando dessa mesma extensão há 1 ano. Como vi que já tinha alguma coisa sobre isso no stoa, mudei um pouco a abordagem de forma a ser complementar ao que ele escreveu.

Motivação

Um dos sites que visito com certa freqüência é o Biblia Online. Porém sempre achei um desperdício de espaço deixar duas barras brancas nas laterais e o texto espremido no meio (principalmente quando se usa duas traduções simultaneamente) como pode ser visto na figura abaixo - pelo o que eu me lembre, quando o usei as barras brancas eram maiores do que agora.

Mão na massa

 

Para consertarmos isso vamos primeiramente usar o Firebug. Com a opção inspect ligada é fácil achar, depois de alguns minutos navegando pelo HTML/CSS, as propriedades que devemos mudar: as tags DIV com id iguais a "body" e "content" têm propriedades width marcadas com um número fixo de pixels; como eu quero ocupar todo o espaço disponível, nada melhor do que mudar esses valores para "auto". Apenas mudando essas duas propriedades, veja como chegamos a um bom resultado abaixo.

As duas propriedades que mudamos:

#body {
width:auto !important;
}
#content {
width:auto !important;
}

Eu me contento com a visualização obtida acima, mas você poderia ganhar ainda mais aquele espaço em branco na esquerda. Novamente, mais 30 segundos no Firebug e descobrimos que o div da esquerda (com os capítulos) é flutuante; logo, basta tirar essa propriedade e o div content "cai" logo abaixo. De quebra, podemos lembrar da propriedade visibility do CSS e fazer aquela propaganda do google desaparecer sem precisar recorrer a outras extensões pra isso. É claro que nesse caso a propaganda não está atrapalhando nada e está, digamos, bem-comportada; mas só usei para fazer um exemplo. O resultado final vou mostrar após o utilizo do Stylish.

Usando o Stylish

Depois de toda essa introdução, vamos tornar as nossas alterações permanentes para esse site. Instale-o a partir do site de addons do firefox e note o ícone dessa extensão no canto direito da barra de status:

 

Clique sobre esse ícone e vá em "Manage Styles...". Ali você poderá ver todos os seus estilos (que agora estará vazio, já que você ainda não criou nenhum). Clique no botão "Write..." para adicionar um novo. Abaixo, o que acabamos de criar:

@namespace url(<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>);
@-moz-document domain("www.bibliaonline.com.br") {
#body {
width:auto !important;
}
#content {
width:auto !important;
}

/*

Comentei essa parte, já que a propaganda é muito bem comportada e o site

depende disso pra "sobreviver". Use isso em outros sites que abusem dos anúncios.

#header div.ad { visibility:hidden !important; }

*/ #sidebar { float: none !important; } }

UPDATE:

Comentei a parte que tira os anúncios da parte superior do site, embora a figura ilustrativa continue sem esses anúncios. Leia o comentário e pense duas vezes antes de ativá-lo.

Algumas coisas importantes para lembrar:

  1. A linha "@-moz-document domain("www.bibliaonline.com.br")" diz que essa folha de estilos CSS será aplicada para os sites dentro de www.bibliaonline.com.br
  2. Veja que na frente das propriedades tem a marcação "!important". Sem isso as suas modificações não vão funcionar. Explicação: o Stylish vai fazer um merge das folhas de estilos - a que veio com o site e a que você escreveu; se você não marcar com "!important" ele simplesmente vai dar prioridade maior para a que veio com o site e suas alterações não vão funcionar.

Abaixo, duas figuras: a primeira com a janela de edição do estilo aberta e a segunda com o resultado final das alterações no site.

Conclusão

Como o Tom falou no post dele, existe o site  http://userstyles.org/ com milhares de folhas de estilo para os sites mais comuns. Tentei dar uma ênfase diferente aqui, alguma coisa como "faça você mesmo", mas não deixe de verificar antes se já tem pronto nesse site o que você pretende fazer.

 

Essa foi a segunda parte da série. Não deixe de ver em breve a última parte, em que falarei sobre o Greasemonkey; para os alunos da Poli que têm raiva daquelae porcaria de webmail webmail com falta de recursos, talvez sirva para mais alguma coisa ;-).

Palavras-chave: Firefox, Stylish

Postado por Lucas De Marchi | 3 usuários votaram. 3 votos

Comentários

  1. Jose Peleteiro escreveu:

    A versão anterior tinha o largura elástica, embora eu gostasse, o número de reclamações era enorme por isso mudei.Talvez em uma nova versão  eu posso colocar isso como opcional, com a perda de criar mais uma opção/configuração em um site que deseja ser simples.Achei a ideia do Userstyle muito boa, mas confesso que achei o fato de vc remover as propagandas leviano, uma vez que o site se sustenta com o mesmo e carateriza um pouco mais do que mudar o style do site, mudando o conteúdo. Um abraço,Jose Peleteiro 

    default user iconJose Peleteiro ‒ sábado, 15 novembro 2008, 10:21 -02 # Link |

  2. Visitante exemplo escreveu:

    E daí que o sítio se sustenta com propagandas? É a mesma coisa de dizer que se você não comprar os produtos que ele anuncia você o estará prejudicando. A diferença aqui é que você não só está dizendo explicitamente que não vai comprar, você arrumou um jeito automático de nem ver a chamada -- afinal, são bytes que iriam para o seu computador e você não quer. É totalmente seu direito ignorar de variadas formas o que a web tenta lhe impor.

    default user iconVisitante exemplo ‒ sábado, 15 novembro 2008, 13:03 -02 # Link |

  3. Lucas De Marchi escreveu:

    José Peleteiro:

    A versão anterior tinha o largura elástica, embora eu gostasse, o número de reclamações era enorme por isso mudei.Talvez em uma nova versão  eu posso colocar isso como opcional, (...)

    O que eu quis mostrar é exatamente que "se você não gosta da aparência de um site, você não é obrigado a visualizá-lo daquela forma". Particularmente não acho que você deva colocar uma opção de formatação lá se a maioria está contente com a atual. Tinha comentado com o Mateus Del Bianco sobre o fato de o texto ficar concentrado no meio e ele já tinha me falado que, da maneira como eu queria ficava ruim para "pessoas com telas widescreen grandes"; por isso nem coloquei uma reclamação/sugestão lá no site a respeito do formato.  No mais, pode-se ver na web que ter uma formatação fixa em pixels é comum (como você pode ver, o meu blog também é assim). Reitero que não acho que "o jeito que eu gosto de visualizar o site X seja o jeito que todo mundo deva visualizá-lo" - e é aí que entram as ferramentas que apresentei.

    (...) mas confesso que achei o fato de vc remover as propagandas leviano, (...)

    Como disse no próprio post "nesse caso a propaganda não está atrapalhando nada e está, digamos, bem-comportada; mas só usei para fazer um exemplo". Existem outros sites na web que isso poderia ser aplicado de uma forma prática, mas, como disse, não é o caso do seu site: foi apenas um exemplo.

    No mais, creio que a referência que fiz ao Biblia Online vai trazer mais novos leitores em potencial do que o número de leitores atuais que vão tirar a propaganda dele. Como vi que você usa o google analytics, você poderia ver quantos foram lá linkados por aqui e depois me mandar pra eu saber. Gosto do Bíblia Online e espero que a citação aqui seja mais benéfica do que maléfica.

    Abraço

    Lucas

    PS: Depois que estava escrevendo a resposta que pensei: muitas pessoas vão dar um ctrl+c/ctrl+v no quote do CSS  (sem ler o resto) e vão acabar tirando a propaganda "sem querer". Porém precisaria mudar um pouco a estrutura do post para poder tirar o "visibility:hidden !important;" de lá: vou ter que deixar pra semana que vem.

    Lucas De MarchiLucas De Marchi ‒ sábado, 15 novembro 2008, 13:27 -02 # Link |

  4. home loans escreveu:

    It's great that people can receive the credit loans and that opens completely new chances.

    default user iconhome loans ‒ sexta, 08 julho 2011, 17:21 -03 # Link |

Você deve entrar no sistema para escrever um comentário.

Termo de Responsabilidade

Todo o conteúdo desta página é de inteira responsabilidade do usuário. O Stoa, assim como a Universidade de São Paulo, não necessariamente corroboram as opiniões aqui contidas.