Nela é possível ver várias formas de utilização da pseudo-classe :target. Essa pseudo classe pode ser usada nos seus arquivos CSS quando um elemento é referenciado pela âncora lá na URL.

Ou seja, http://example.com/#isso_aqui_eh_a_ancora

Dessa forma, você pode obter alguns comportamentos dinâmicos utilizando apenas CSS. Comportamentos tipicamente feitos por JavasScript, como destacar uma foto ao clicar sobre sua imagem menor, podem ser feitos sem problemas utilizando-se esta técnica.

Ainda não ficou muito claro, né? Para facilitar as coisas, veja este exemplo funcional.

Experimente clicar nos links disponíveis abaixo da foto. Note que clicando em qualquer um deles a imagem é alterada. A “mágica”está lá no arquivo CSS:

/* esconde as imagens por padrão */
#imagens img {
	display: none;
}
#imagens #imagem-1:target,
#imagens #imagem-2:target,
#imagens #imagem-3:target,
#imagens #imagem-4:target,
#imagens #imagem-5:target,
#imagens #imagem-6:target {
	display: block;
}

Ou seja, o pseudo seletor :target só será ativado quando a âncora na URL casar com o elemento respectivo, tornando a imagem selecionada visível (e as demais invisíveis).

Em termos de compatibilidade, este exemplo foi testado e funciona em: Firefox 3.6, Chrome 5.0, Opera 10.60 e Safari 5.0.

E funciona no IE? Talvez… talvez no IE 9! (evil laugh here mwhaha!)

Porém, além desse curso, essa semana eu recebi um e-mail aqui no trabalho comentando sobre um curso oferecido pela Opera (sim, aquela do navegador Opera). Dei uma olhada geral sobre o conteúdo e parece ser bem interessante, além de abordar a maioria dos tópicos usados no dia-a-dia de quem trabalha e desenvolve interfaces web.

Sendo assim, se você está interessado num curso de desenvolvimento de front-end gratuito, esta é também uma excelente opção. Bons estudos!

A dúvida é sempre a mesma: “será que não tem nenhuma ‘tela’ que usa essas regras?”. E como a resposta nem sempre é fácil de se descobrir, deixo aqui uma dica de ferramenta que pode ajudar nessa tarefa.

Trata-se da extensão de Firefox de nome “CSS Usage“. O que ela faz, conforme o nome já sugere, é identificar quais regras na folha de estilo de um site que estão em uso e quais não estão. Com base nessas informações você pode reduzir seu arquivo CSS sem medo!

Após instalar a extensão, basta abrir o Firebug e você verá uma aba “CSS Usage“. Entrando nela você pode iniciar o processo e verificar a utilização dos seletores. Depois disso é só fazer a limpeza, conforme você achar melhor.

Para que o efeito da extensão seja o esperado, é importante que você navegue no máximo de páginas possíveis de seu site para garantir que todas as “telas” serão testadas de acordo com as regras na sua folha de estilos. E se você acha que dá muito trabalho ter de navegar em todas as páginas sempre que quiser limpar seu CSS, acho que é hora de você conhecer o Selenium!

Aqui tem uma figura de exemplo com os resultados da extensão obtidos após uma navegação no Taperás.

Via Smashing Magazine no Twitter.

Sabe quando o webdesigner desenha uma caixa de tamanho fixo (e largura variável, pra complicar um pouco), em que o texto deverá ficar contido ali dentro da caixa, e no caso do texto ser maior que o tamanho disponível, os famosos “três pontinhos” devem aparecer?

Pra ilustrar isso melhor, veja a imagem abaixo:

Caixa com dimensões fixas e conteúdo “ajustado” para caber

Um método comum de se fazer isso é contar o número de caracteres e colocar “…”, caso o número de caracteres ultrapasse o número máximo de caracteres que ficarão visíveis. Claro que esse número máximo é uma estimativa e nem sempre o resultado fica bom. Além disso, pode acontecer do “corte” no texto acontecer no meio de uma palavra, gerando um resultado estranho ao visitante, “tipo isso aq…”.

Nas CSS existe uma propriedade chamada “text-overflow” que, sob certas circustâncias, adiciona automagicamente “…” ao final do texto que não coube na área visível. OK! Problema resolvido então? Não exatamente…

O problema não está resolvido por conta de duas outras questões. Uma delas é que o Firefox ainda não implementa essa propriedade (sim, o IE tem! Moderno hein? ). A outra questão é que essa propriedade não se aplica nos casos em que o texto ocuparia mais de uma linha.

Se você quiser uma explicação mais detalhada (e exemplos) sobre a propriedade “text-overflow”, acesse este texto no blog do PPK.

Voltando ao assunto original, agora precisamos resolver aquelas duas questões. Felizmente, com algum tempo de Google e mais algum tempo de pesquisa em fóruns, consegui encontrar algo capaz de ajudar nesta tarefa: o jQuery textOverflow Plugin.

O código é relativamente simples e oferece várias opções de customização. Aqui tem uma página de exemplo (exemplo 1) gerando algo similar ao que foi mostrado na imagem acima.

Caso você tenha vários elementos na página que vão receber esse tratamento, deixo uma dica: tome cuidado com a performance! Como é uma operação intensiva no DOM, a chance desse código deixar o navegador bastante lento é bastante alta.

Pra esses casos, se você realmente precisa dos “…”, acho que vale a pena tentar juntar esse código com a solução de “execução de Javascript com pausas“, proposta pelo Nicholas Zakas.

Fiz uma proposta com essa combinação. Ela pode ser vista aqui no exemplo 2 (com 100 elementos). Embora seja visualmente mais lenta, ela não trava o navegador em momento algum, mesmo no IE 6.

Bom, o texto ficou bem longo… mas acho que deu pra passar bem a ideia. Sugestões ou comentários, é só usar o formulário abaixo.

Abaixo está o vídeo com a apresentação feita (aproximadamente 1h) e na sequência algumas notas e comentários sobre os temas apresentados.

Abas separadas por processos

Este é um fato que certamente você deve conhecer. Você está lá navegando tranquilamente com uma dezena (ou mais =) de abas abertas… Daí que você resolve acessar um site com um Javascript mal escrito, com uma animação em que o Flash Player se revolta e lá foi, o navegador inteiro congela e não resta outra opção senão matar o processo. Claro que a maioria dos navegadores traz opções para restaurar a seção anterior mas não deixa de ser bastante incômodo.

A separação das abas por processos permitiria matar (encerrar) apenas a aba problemática, mantendo as outras abas isoladas. Isso por si só já seria uma grande vantagem da separação por abas mas ainda há uma segunda vantagem também bastante interessante! =)

Com a separação em diversos processos o sistema operacional pode gerenciar melhor o processamento, alocando mais recursos para as partes onde é realmente necessário, sem congelar as outras partes do navegador.

Vale notar que essa divisão em processos distintos causa um aumento do consumo do memória sim mas, como a quantidade de memória disponível nos PCs atuais (mesmo para os “PCs de prateleira”) está deixando de ser um gargalo para o desempenho dos computadores, é de se esperar que os programas passem a fazer alocações maiores de memória. Mais ou menos como o princípio da lei da oferta e da demanda.

Linearização das instruções de funções

O termo em inglês acho que permite um entendimento melhor: “‘function inlining“. Essa é uma característica que, por exemplo, C++ possui. Usando essa propriedade o compilador pode trocar a chamada de uma função pelo corpo da função, fazendo com que a execução das instruções ocorra sem o overhead de chamar uma função.

Além disso, pelo código exibido nos slides parece que, diferentemente do C++, você não precisa dar uma dica para o compilador na hora de escrever a função indicando que a função é candidata ao “inlining“.

Rede

Aqui vale destacar o aumento do número de downloads simultâneos para um mesmo domínio. Com o IE 7 ainda temos o limite de dois downloads mas, felizmente o IE 8 (beta) já tratá um limite três vezes maior, de seis downloads simultâneos para o mesmo domínio. A última versão dos demais navegadores já possui um valor de seis ou sete downloads.

Outro recurso bem legal, e este é uma boa ideia da Microsoft, é o atributo “defer” para a tag <script>. Esse atributo indica para o navegador que ele pode continuar a renderizar a página sem esperar o arquivo Javascript referenciado carregar. O atributo já funcionava no IE e vai funcionar nas novas versões do Firefox e Opera.

window.postMessage

O método window.postMessage me chamou a atenção. Com ele será possível a comunicação entre páginas de domínios distintos de forma bem simples. O princípio é o seguinte: a página remetente da mensagem irá tentar enviar a mensagem para, por exemplo, um iframe destinatário. Este iframe irá verificar se o remetente é alguém que ele conhece para então aceitar a mensagem e executar alguma ação.

A página que receberá as mensagens pode “ouvir” os eventos de mensagens usando o tradicional método addEventListener. Verificando a propriedade origin, a página receptora pode descobrir pelo domínio se a mensagem está vindo de um destinatário conhecido ou não.

Ajax entre domínios diferentes

Aquele sonho de fazer requisições Ajax entre os N domínios da sua aplicação está prestes a se realizar.

Adicionando um cabeçalho (header) na resposta da requisição Ajax é possível especificar uma origem (além do próprio domínio) de onde aquela requisição pode ser atendida com segurança. O nome deste cabeçalho é “Access-Control-Allow-Origin” e está melhor descrito nesta página.

document.querySelectorAll

Se você já usou a jQuery sabe como é prático encontrar os elementos da página usando a sintaxe de CSS. Melhor ainda se encontrar esses elementos usando a sintaxe de CSS seja possível de ser feito usando um método nativo do navegador. É isso que o método document.querySelectorAll permitirá. O melhor de tudo é que as próximas versões do IE, Firefox, Opera e Safari já trarão este método disponível.

Visual e CSS

Adoradas por 10 em cada 10 webdesigners, as bordas redondas vieram pra ficar. =) Apesar de os navegadores trazerem implementações com nomes diferentes, todas as implementações funcionam bem. Ou seja, juntando essas propriedades: -moz-border-radius, -webkit-border-radius, -khtml-border-radius e border-radius as bordas redondas saem com facilidade.

Sombras também estarão disponíveis. Nesta página há vários exemplos de uso da propriedade text-shadow.

Outro recurso que certamente vai ser muito usado (e provavelmente muito mal usado também ) é a possibilidade de se usar fontes personalizadas na página. Por fontes personalizadas entenda fontes que não estão instaladas na sua máquina. Coisa que já era possível de se fazer no Flash, agora também com CSS.

Além disso, há uma série de animações que estarão disponíveis, por enquanto, para Firefox e Safari.

Desenho

O objeto Canvas permite a renderização de elementos numa superfície 2D usando retas, curvas, arcos e/ou círculos. No MDC tem um tutorial bem bacana sobre Canvas. Até me arrisquei a fazer uma “arte”: =)

// <canvas id="draw-area" width="150" height="150"></canvas> no HTML
var canvas = document.getElementById( "draw-area" );
if( !canvas.getContext )
{
  return;
}
var context = canvas.getContext( "2d" );

context.beginPath();
var side = 150;
var offset = -4;
var i = 0;
while( true )
{
  if( i % 4 == 0 )
  {
    var x = offset + 4;
    context.lineTo( x, offset );
    offset = x;
    if( offset + 4 > 78 ) // hard-coded mesmo ;P
    {
      break;
    }
  }
  else if( i % 4 == 1 )
  {
    context.lineTo( offset, side - offset );
  }
  else if( i % 4 == 2 )
  {
    context.lineTo( side - offset, side - offset );
  }
  else if( i % 4 == 3 )
  {
    context.lineTo( side - offset, offset );
  }
  i++;
}
//context.closePath();
context.stroke();

Outro detalhe importante é que o Canvas permitirá também a inserção de vídeos dentro dele.

JSON nativo

Atualmente, ao receber uma string em JSON você precisa usar um eval para recuperar o objeto original. O eval é conhecidamente lento, até pelo fato de ser um método genérico, mas era a melhor saída para se ter acesso às informações contidas na string JSON mas, isso vai mudar!

Agora teremos métodos nativos para codificação e decodificação no formato JSON. A única dúvida que me restou é sobre o nome dos métodos. Nos slides os métodos se chamam encode e decode, já na página do MDC e no wiki do ECMAScript os métodos se chamam parse e stringify, respectivamente.

E por fim…

… fico na torcida pra que as novas versões desses navegadores tenham uma rápida adoção por parte dos usuários.

A oficina terá duração de 30 horas, no período da manhã. É uma pena que apenas alunos do Senac possam participar. =(

Como conteúdo pretendo mostrar os conceitos básicos da linguagem Javascript, mostrar suas estruturas e funcionamento. Daí vou partir para a parte de eventos e interação com o browser. E no final, se tudo correr bem =), Ajax!

Mas como nem tudo são flores, o semestre letivo ainda não acabou. Amanhã tenho a prova final de Linguagens Formais e Autômatos. Uma disciplina bem legal, devo concordar, mas que está consumindo mais alguns dos meus já escassos cabelos.

Atualização: Consegui! Fechei a disciplina com 7,5. Foi minha pior média do semestre mas… “bota na conta do Papa”.

Na parte de Javascript e Ajax, há links para páginas de ótimas bibliotecas como a jQuery e o script.aculo.us. Além de boas referências sobre a linguagem como: QuirksMode.org e o DevGuru.

A listagem sobre CSS é boa, mas eu senti falta de alguns sites importantes como o Position is Everything e também dos Layouts Gala.

Em Tools (ferramentas), além das boas dicas sobre editores, duas adições interessantes seriam os editores SciTE e o jEdit. Tenho usado bastante o jEdit nos últimos tempos e ele tem se mostrado um editor bem versátil, principalmente com o suporte a snippets.

Para PHP, embora faça um bom tempo que eu não trabalho com a linguagem, continuo vendo alguns lançamentos e notícias relacionados à linguagem. O framework Akelos, que não está na lista, segue a mesma linha de funcionamento do Rails (Ruby on Rails), sendo uma boa opção para desenvolvimento ágil.

Nos links de Rails, recomendo ainda o Railscasts que possui uma grande variedade de screencasts, todos voltados para Rails e explicando vários truques interessantes do framework.

Ufa! Quantos links! Agora é a sua vez, tem algum site que você usa e acha interessante que ficou faltando nas listas?

Um caso bastante típico é quando usamos float apenas para poder colocar altura, largura ou margens verticais num elemento. Como o float força um display: block, podemos aplicar height, width e padding (vertical) neste elemento.

Num segundo cenário, já encontrei casos em que tenho um elemento de largura variável e não previsível e, que tenho também de deixá-lo centralizado na página ou em relação a um outro elemento pai. Este é um dos casos onde precisamos centralizar floats.

Eu já conhecia esta técnica aqui do Stu Nicholls em seu site CSSplay. Já usei este método e sei que ele funciona bem. Tudo bem que ele usa uma tag del (pode ser uma ins também) sem necessidade… mas, com comentários condicionais podemos esconder ela dos navegadores atualizados e deixá-la visível apenas para o Internet Explorer (sim, como já era de se imaginar, a tag é necessária apenas para o IE).

Lendo o doggdot.us hoje, achei uma referência para outro artigo que descreve uma segunda técnica, mais simples e objetiva. Testei o exemplo disponível e funcionou no Firefox, IE 7 e 6. Apenas no IE 7 é que surgiu a barra de rolagem horizontal. Nada muito complicado de se resolver.

O IE 7 tem um bug (certo, muitos bugs, mas vamos falar só desse) que um elemento pai com overflow: hidden e um filho com position: relative, faz com que o efeito do overflow não funcione. Se você adicionar position: relative no pai também, terá o resultado esperado. Acabei de deixar um comentário ao autor sobre esta correção. Veja mais sobre este bug.

Ficam aí as dicas para quando você precisa centralizar elementos com float ou se deparar com este bug do IE 7, bom proveito! =)

Referências

Centralizando floats – Método simples

Centralizando floats – Método do Stu Nicholls

Comentários condicionais (conditional comments)

Bug do IE 7 com overflow e position

O que há de errado com a margem padrão?

A questão aqui é muito simples: ela é inconsistente entre alguns navegadores. Alguns elementos aparecem com padding num navegador, outros usam margin, em alguns o valor é X, em outros o valor é Y… Aí já viu, bobeou e é um festival de pequenas diferenças nos seus layouts.

A solução para este problema é bastante simples, para não dizer óbvia:

* {
margin: 0;
padding: 0;
}

Usando o seletor universal “*” zeramos os valores de margin e padding em todos os elementos da página

Desta forma, um elemento só vai ter margem (interna ou externa) se você especificar, o que no final das contas facilita sua vida pois você não vai precisar ficar lembrando onde estão as inconsistências de cada elemento em cada navegador.

Não gostei desse seletor universal aí…

É, nem todo mundo se sente confortável com um seletor universal na página. Se você preferir, o Tantek Çelik tem uma solução alternativa também muito boa. É o undohtml.css. Coloquei abaixo uma cópia do original:

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let’s get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary… */

Um CSS com seletores básicos, bem fácil de ser entendido.

Faça o teste!

Experimente começar um novo projeto usando umas das duas formas propostas acima. Posso te garantir que você não vai se arrepender!

Já há algum tempo que eu tenho feito vários códigos usando uma biblioteca leve e poderosa chamada jQuery. Ela é uma ferramenta muito versátil, que vai te ajudar a se concentrar mais no que realmente importa: a lógica para implementar a solução.

E como essa jQuery, basicamente, funciona?

Um dos grandes trunfos, e talvez o principal, é o modo com que você consegue acessar os elementos da sua página. Usando seletores CSS e/ou seleção por XPath você consegue alcançar quaisquer combinações de elementos, ou elementos isolados, em sua página.

Feita a seleção dos elementos, a jQuery vai, digamos, encapsular cada um dos elementos e te dar um leque grande, realmente grande, de métodos diversos extremamente úteis.

Como os métodos estão todos concentrados na jQuery e já possuem os devidos tratamentos para um suporte amplo cross-browser, sua única preocupação será implementar a lógica do código. Muito bom!

Selecionando

OK, até agora muita teoria e entusiasmo mas nenhum código. Que tal uns exemplos?

Primeiramente, vamos selecionar todos os elementos “p” de nossa página. Não vamos fazer nada com eles, ainda:

$( "p" );

Só isso! Agora imagine que você gostaria de esconder todos esses elementos “p” que selecionamos. Nosso código ficaria:

$( "p" ).hide();

Fácil, não? Porém, suponha que esconder todos os “p”‘s não é o que queremos realmente, seria bom esconder apenas os “p”‘s de uma “div#menu”. Veja:

$( "p", "div#menu" ).hide();

Adicionando e modificando conteúdo na página

Modificar o conteúdo de um elemento já é, de certa forma, fácil se você usar o innerHTML comum. Mas, como você já deve imaginar, com jQuery é muito mais:

$( "p#exemplo" ).html( "<strong>Novo</strong> conteúdo!" );

O pequeno código acima vai acessar um “p#exemplo” e alterar seu markup interno por aquele outro, passado como parâmetro à função. Se você quiser apenas saber qual o markup atual do elemento:

$( "p#exemplo" ).html();

E que tal adicionar um novo elemento após nosso “p” de exemplo? Veja:

$( "p#exemplo" ).after( "<p>Um elemento depois!</p>" );

Ou seja, usando o método intuitivo after conseguimos adicionar elementos após o nosso elemento original. Se você está pensando que podemos inserir elementos antes usando o método análogo before:

$( "p#exemplo" ).before( "<p>Um elemento antes!</p>" );

Acertou! Simples e intuitivo, não? =)

E o que mais?

Acesse a página com uma visão geral dos métodos e veja quantas outras coisas o jQuery ainda pode fazer por você. AJAX, animações, tratamento de eventos, só pra citar algumas delas.

Além disso, a jQuery possui uma boa documentação e uma comunidade ativa, que pode interagir diretamente com a biblioteca através de plugins. Ah sim, você pode adicionar novos comportamentos com plugins. =)

Referências

jQuery

15 dias de jQuery – Uma visão geral sobre o poder da jQuery

Seletores CSS

Seleção por XPath

Métodos diversos da jQuery

Documentação da jQuery