BlogAlex, sed Alex

Icon

quem faz yoga não bloga

Abril 24, 2009 • 10:40 pm 0

Aardvark e como redirecionar para outra página usando refresh content

O Aardvark  é uma ideia interessante: alguém posta uma pergunta e usuários que escolheram responder sobre aquele tema recebem um aviso por comunicador instantâneo  ou outro widget – eu recebo pelo msn. Após quase uma semana, hoje enviei minha primeira resposta. Como me pareceu uma dúvida pertinente (eu mesmo já a tive), resolvi compartilhar aqui no blog. 

Apenas a título de curiosidade, a primeira pergunta que recebi era sobre bandas novíssimas em Estocolmo. Evidente que eu resolvi pular esta (ninguém é obrigado a responder, claro). No Aardvark é assim. Ainda em fase de testes, só é possível participar recebendo convite de algum usuário. Quem convida já escolhe três assuntos que o convidado domina, tem interesse ou simplesmente está disposto a responder. Ao preencher o cadastro – e em outras visitas ao site -, o novo usuário pode escolher novos temas. 

A pergunta de hoje era assim: “como posso redirecionar www.meusite.com.br/blog para o meu blog (é um blog do WordPress)?“

Para ser bem sincero, eu levei um tempinho para entender a pergunta.

Mas é assim: o perguntador comprou um domínio, mas não quer instalar o plug-in e blogar direto em seu novo site; ele quer apenas redirecionar para o blog já existente (caro/a leitor/a, não ofenda o sujeito: procedendo assim, ele pode manter todos os posts já existentes. Eu começaria outro, claro, mas vamos respeitar a opinião alheia).

Existe mais de uma maneira de fazer isso, eu propus o seguinte. Entre as tags <head> e </head>, inserir o seguinte código no index.html (.php, .asp etc):

<meta http-equiv=”refresh” content=”1;url=http://seublog.wordpress.com”>

Com isso, redireciona-se o navegador do/a visitante para a url http://seublog.wordpress.com após um segundo.

Arquivado como:informática, webdesign

Janeiro 20, 2009 • 11:20 pm 0

CSS: Layout centralizado. Como centralizar todo o conteúdo do layout com CSS

 Se você faz parte do que o ex-ministro Magri chamaria de imensa minoria e usa a internet além do MSN, YouTube, Orkut e chats, já deve ter notado que os layouts alinhados à esquerda saíram de moda. 

Notadamente sites adeptos da metodologia CSS-XHTML usam designs centralizados. Por quê? Simples: imagina que o sujeito (webdesigners, ao contrário do que eles próprios pensam, são sujeitos, não são adjetivos!) faz um site baseado num monitor com resolução de 800×600. Se alinhado à esquerda, o conteúdo parecerá uma coluna de jornal em forma de tira caso o visitante tenha um monitor supermaneiro de 21 polegadas e resolução de 8.000×6.000!

Exagerei, claro; nesse caso, até mesmo o layout centralizado teria a aparência de tira vertical. A razão de centralizar o layout é harmonizar a proporção, os espaços. 

Pois bem. Usando CSS é possível centralizar o layout sem apelar para <center> … </center>. 

Basta definir os atributos text-align e margin em três DIVs. Aproveitando HTML e BODY, é só criar uma nova DIV, geralzona, e pronto. Essa DIV geral vai se chamar container – nome bem popular, aliás. As duas primeiras DIVs vão usar text-align: center e margin: 0 auto. A terceira, margin: 0 e text-align: left (do contrário todos os elementos ficarão centralizados; aí só falta setar o fundo cinza e a fonte como Times New Roman para voltarmos à época da web 0.001!). 

Assim, nosso CSS será parecido com isso:

 

html {
margin: 0 auto;
text-align: center;
}

body {
text-align: center;
background: url(i/centralbackao.jpg) repeat-x;
margin: 0 auto;
}

#container {
text-align: left;
background: url(i/centralback.png) repeat-y;
width: 880px;
height: 600px;
margin: auto;
}

#h2texto {
font-family: Georgia, Garamond, "Lucida Sans", Verdana;
font-size: 1.9em;
color: #fcb;
}

E o nosso HTML:

<div id=”container”>

                           <div id=”h2texto”>

                            Ahá!      Aqui vai o seu maravilhoso texto:

                           …..

                           </div>

</div>

 
Pronto! Se você seguiu tudo certinho, seu navegador exibirá uma tela bem parecida com a figura abaixo.

 

preview do layout

preview do layout

 

Ficou bem diferente? Calma. Respira. E deixa o livro de HTML quieto lá na estante. Aproveitando o ensejo, setei dois fundos para o nosso exemplo. Para o fundo de BODY, criei um arquivo de 1200×5 pixels (no Fireworks mesmo) e abusei do gradiente; salvei como .jpg e, no CSS, repeti horizontalmente (repeat-x). Já em #container, embora tenha usado uma cor só, usei gradiente na transparência. Salvei como .png, para aproveitar a transparência, e repeti o arquivo de fundo verticalmente (repeat-y).

É bom lembrar que nem a transparência e nem o fundo em .png funciona no digníssimo IE6. Então aproveite e diga adeus a esse vovozinho internético (tem mais de sete anos!). 

Também setei o conteúdo de #h2texto em uma DIV para controlar melhor margens etc. 

 

PS: repare que eu não mencionei o rodapé. E talvez você tenha alguma dificuldade em diagramá-lo neste layout centralizado. Voltaremos ao assunto!

Arquivado como:informática, web 2.0, webdesign , , , ,

Julho 9, 2008 • 4:29 pm 1

Colocando links em DIVs com fundo PNG transparente

Se o título do post lhe parece grego, não entre em pânico; leia os outros – sobre economia, futebol etc. Ou faça um dos quizzes, ou divirta-se com as frases e momentos José Simão.

Uma das coqueluches atuais no webdesign é usar imagens de fundo com bordas arredondadas. Dá um ar de modernidade.

O problema é que navegadores mais antigos, como o Internet Explorer 6 (e seus primos mais arcaicos ainda), só aceitam transparência em arquivos GIF. Sim, eu ouço o seu pensamento, você que está sentado aí na última fila. Por que usar transparência? Imagina que o site tem o azul como cor de fundo. Mesmo usando o fundo com código RGB hexa idêntico no Fireworks (ou Photoshop, Illustrator etc.), dá uma diferença no browser. Então, para sites que não têm fundo branco, é necessária a transparência.

(Espero que nenhum de vocês, meus leitores e minhas leitoras, tenha perdido noites de sono nem deixado de ver capítulos de novela, ou finais de Libertadores, tentando aplicar transparência em sites com fundo branco!)

Usar JPG em vez de GIF, além de aumentar significativamente o tamanho do arquivo, não resolve o problema da visualização em navegadores antigos. A alternativa então é usar um filtro da própria Microsoft em imagens PNG.

Class ou id?

Não há diferença significativa entre class ou id para este caso, de modo que usarei id nos exemplos.

CSS:

#fundo {
float: left;
margin-bottom: 3px;
background-image:url(‘imagemdefundo.png’);
background-repeat:no-repeat center center;
_background:none!important;
width:400px;
height:400px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’imagemdefundo.png’,sizingMethod=’scale’);
}

HTML:

<div id=”fundo”>
…
</div>
</code>

É importante que a DIV do fundo transparente não tenha sua position definida se a mesma tiver links. Links?

Links

Tudo muito bom, tudo muito certo. A não ser que haja links na DIV de fundo transparente. Funciona de forma correta no Firefox e demais geckos -aqueles navegadores que usam a tecnologia do Firefox e do Opera-, mas, adivinhe, dá problema no Explorer. Qualquer um deles. O navegador do tio Bill interpreta os links como uma camada abaixo do fundo, de forma que o mouse não os alcança devido a uma barreira. Isso explica muita coisa, inclusive um filme com o nome “Kill Bill”!

Para tornar clicáveis os links, é preciso acrescentar uma DIV com posição relativa. Vamos lá:

a.fundo {
position: relative;
}

Agora fica evidente a importância de não se colocar position:relative na DIV da imagem de fundo.

Arquivado como:informática, web 2.0, webdesign

Junho 20, 2008 • 10:04 am 0

(X)HTML?

Se você é mais um entusiasta da web semântica, XHTML estrito (?!),  core CSS… ok, estou inventando, mas você entendeu. Voltando, se és daqueles que acham coom (o cúmulo do cool) ter uma div chamada container, sugiro a leitura deste artigo.

Aliás, há atualmente uma saudável discussão na webosphera sobre o radicalismo na adoção ou no abandono de certas ferramentas e tecnologias (como o uso, ou não, do Photoshop).

Via www.jeffcroft.com

Arquivado como:design, informática, web 2.0, webdesign

Abril 15, 2006 • 9:02 pm 0

Editor HTML

Muitas vezes, a inveja acaba sendo a mola propulsora para grandes mudanças.

Ontem, vendo uma vídeo-aula no site Tableless, tomei conhecimento de um novo editor de HTML. Para falar a verdade, o EditPlus edita muitas outras coisas, mas esse tipo de software ficou conhecido assim.

Baixei hoje a versão 2.21 e já comecei a usar. Por enquanto, nenhuma reclamação. Ele até mesmo atualiza o site via ftp, o que em muitos casos é uma mão na roda. Com a popularização da banda larga no Brasil, não compensa, por exemplo, instalar o Personal WebServer no próprio comp. É muito mais cômodo ver o resultado diretamente no site — e também mais rápido, se levarmos em conta que o server, mais o php e o MySQL, demora para carregar no startup da máquina.

Eu costumava usar o 1stPage, da Evrsoft. Favor não confundir com o FrontPage, pelo amor de deus! Um reclamação minha a respeito do 1st era ter sempre que clicar no no-wrap quando alternava os arquivos abertos. Tudo bem, pode ser que seja apenas burrice minha e exista uma forma de se desabilitar, ou habilitar, isso. Mas no EditPlus é muito mais fácil.

 Em tempo: o 1st tem uma versão nova, a 3.0, que eu, ao menos até agora, só instalei no notebook. Ha, ha, ha, logo lá, com 190Mb de memória (o programa recomenda pelo menos 512).

Arquivado como:webdesign

SocialVibe


 

Novembro 2009
S T Q Q S S D
« Jul    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Meta

Blogroll