Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Hoje iremos ver o Microformato rel=”tag”, destinado a marcar os links com uma tag em concreto. Com toda essa onda de Web 2.0, Folksonomia, as tags ganharam uma forma bonita de catalogar conteúdo. Por isso sugre o Microformato rel=”tag”.

Para se usar esse Microformato, deve-se usar algumas regras:

• O link deve ser coerente com a tag em questão.
• A página que estamos linkando deve ser a página que mostra as informações referente
  a essa tag.
• A URL deve ter, em última instância, a tag que estamos marcando.

Seguindo essas diretrizes, podemos marcar nossos links com rel=”tag”. Mas atenção: Por ser um elemento visível, por exemplo, não poderíamos marcar um elemento link do head com esse microformato. Para uma melhor compreensão, vamos ver um exemplo: No meu Flickr eu usei a tag coreldraw onde eu guardo algumas fotos categorizadas sobre esse assunto. Veja abaixo como ficaria o link:

<a href="http://www.flickr.com/photos/pedroassis/tags/coreldraw/" title="Página com as fotos
marcadas com a tag: coreldraw" rel="tag">coreldraw</a>

Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte:

Aqui o CSS:

h1 {
    height:200px;
    background:url("logotipo.jpg") no-repeat;
    }
h1 span { display:none; }

Aqui só é necessário colocar a altura da imagem e colocar normalmente o “no-repeat” para que não haja repetição alguma da imagem, por que nós não queremos isso. O que entra depois é o “span” com “display:none” para que ele desapareça com o nosso texto.

Aqui o HTML:

<h1><span>Pinceladas da Web</span></h1>

Para que haja uma melhor interação com o tutorial, dê uma olhada nesse exemplo, experimente desabilitar o CSS para ver o resultado.

Quando você começa a lhe dar com WebStandards, você acaba descobrindo que a tag <center> caiu em desuso, mas se eu preciso centrar meu layout horizontalmente, de que forma eu vou fazer isso? Através de CSS isso é possível, o que ele faz é o seguinte: Você diz ao browser para colocar uma margem “auto” em ambos os lados do objeto. O valor para “auto” transforma-se na largura da tela menos a largura do objeto dividido por 2. Isto centra o objeto horizontalmente. O código HTML fica da seguinte forma:

<div id="container">
<!-- Conteúdo do site -->
</div>

Esta div “container” deve ser a primeira a ser aberta depois do body e a última a ser fechada, por que é dentro dela que ficará todo o conteúdo do nosso site. Agora observe como fica o código CSS:

body {
  text-align:center;
  margin: 0;
  padding: 0;
}

#container {
  text-align:left;
  margin: 0 auto;
  width:760px;
}

É importante remover o margin e padding de body de modo que nossa div container não seja deslocada por essa margem. Pronto, agora você tem um layout centralizado. Essa técnica visa as pessoas que estão aprendendo WebStandards. Um exemplo de uso dessa técnica é o layout do meu blog, está centrado horizontalmente.

Muitas vezes, as pessoas que usam leitores de tela acabam se queixando de que não conseguem literalmente “ler” o que está escrito em uma página por que, em certas imagens, como o logo do site, por exemplo, não foi usada nenhuma técnica de Image Replacement. Mas no que consite essa técnica?

O objetivo dela é o seguinte: manter o texto “visível” ao browser, mas escondido do usuário. O texto está escondido do usuário que está vendo o site, mas ele ainda está lá. Vamos citar um exemplo, eu quero colocar um logo em meu site, mas quero usar a técnica de Image Replacement, então faça o seguinte:

Aqui o CSS:

h1 {
text-indent:-9000px;
background:url(replacement.jpg) no-repeat;
width:500px;
height:214px;
}

O que isso faz é movimentar o texto a 9000 px a esquerda, o texto ainda está lá, porém, você não o está vendo. Em background você coloca a imagem que deseja usar e deve também definir para não repetir. E width e height são as dimensões da imagem usada.

Aqui o HTML:

<h1>Pinceladas da Web - Onde ser simples é ser Inteligente!</h1>

Com isso, todo h1 será substituído por uma imagem. Aqui você pode ver um exemplo dessa técnica, em seu navegador, procure desabilitar o CSS que você verá que o texto aparecerá, ou então dê uma olhada no código fonte.

Com o uso de AJAX, as aplicações agora vão além do desktop, e um aprova disso são os editores de texto. Você não precisa mais ter o Office instalado em sua máquina para poder escrever um texto, basta ter um browser e uma conexão com a internet. Abaixo você vai conhecer 7 editores que dão muito bem conta do recado:

AjaxWrite

Seu visual é semelhante ao Wordpad do Windows. Com ele, você pode criar textos e salvar um arquivo DOC direto no computador. Inclui recursos básicos como alinhamento, fontes, impressão, tabelas, links, listas de números e marcador texto. O ponto negativo é o fato de o ajaxWrite não salvar o arquivo online.

gOFFICE

Com os aplicativos oferecidos pelo gOFFICE é possível criar cartões de visita, cartões de aniversário e natal, cardápios de restaurante, currículos, apresentações e planilhas. Além dos recursos básicos presentes nos processadores de textos, o gOFFICE salva seus arquivos direto no servidor, além de oferecer a opção de exportar seus trabalhos em PDF ou HTML.

Continuar lendo »

Se você tem vontade de experimentar o Opera, mas está com preguiça de instalá-lo, está aqui a solução. Existe uma versão dele para você usar em Pen-drives, isso mesmo, você não precisa instalar nada, é só baixar o arquivo, descompactar o mesmo e começar a usar, já estou usando aqui e você?

Depois do ISBN, agora é a vez do IBSN (Internet Blog Serial Number). Abaixo você pode ver o meu:

Quer colocar um no seu blog? Então gere o seu aqui.

A maior dor de cabeça de todos os desenvolvedores com certeza é o uso de hacks em CSS, por culpa de um navegador que não interpreta o código de forma correta (vulgo IE). Uma das dores de cabeça mais conhecidas são as Margens duplicadas, e em certas ocasiões você tem que usar padding ao ínvés de margin, sem nehuma razão, tudo por causa do nosso amigo IE.

Hoje em dia existem muitos hacks, é só você dar uma procurada no Position Is Everything, que você vai encontrar muitos deles, e quem saber uma solução para o seu problema não pode estar lá. Mas vamos dizer que você já tentou de tudo e ainda não encontrou a solução para o seu problema. Ainda resta um último recurso: O Hack do seletor universal.

* html

Continuar lendo »

A cada dia eu me surpreendo com o que as CSS são capazes de fazer, dando uma olhadinha por aí, descobri um efeito de raio-x com CSS, é usado basicamente a propriedade background-attachment do CSS2. Basicamente são usadas 3 imagens na mesma posição, e as CSS se encarregam de fazer a mágica. Você pode dar uma conferida no efeito aqui.

Atenção: No IE o efeito não fica correto, agora no Opera, Firefox e Safari ele fica OK

Você acabou de construir o seu site inteirinho no bloco de notas, o código está todo uma beleza, lindo de se ver, as tags estão todas aninhadas corretamente, mas você vai fazer um teste no seu browser e a página não fica como você queria, e agora? Meu deus, não precisa sair arrancando os cabelos ou enviando e-mails desesperadamente para aquele seu amigo me manja bastante de HTML, você pode ter simplesmente esquecido de colocar um DOCTYPE válido na sua página.

Mas a troco de que eu vou usar isso na minha página?

De acordo com as especificações do W3C, um DOCTYPE informa ao validador qual é a versã do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página. Eles são elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do seu site não será válido sem eles. Eles também são essenciais para uma correta renderização da sua página.

Continuar lendo »