A versão estável 8.10 do Ubuntu, chamada de Intrepid Ibex, foi lançada essa semana. Ainda não atualizei a minha por total falta de tempo, mas já vi que para quem vai fazer a atualização a partir do 8.04 é necessário mudar algumas coisas na configuração dos canais de software. Isso ocorre porque o a versão 8.10 não é uma versão Long Term Suport (LST).
O que é necessário fazer, então, para habilitar a atualização?
Habilitar nos Canais de Software (Sistema -> Administração) a atualização por Versão Normal, na aba Atualizações
Feito isso, o Gerenciador de Aplicações automaticamente vai habilitar a opção de atualizar a versão do Ubuntu para a 8.10.
Vai uma dica rápida de CSS para uma questão que acontece no Firefox: quando você tem dentro de um elemento block (uma div, por exemplo) outro elemento com float, esse elemento que flutua não força automaticamente a altura do elemento container; ou seja, ele não empurra a borda inferior para baixo.
Isso acontece porque nesse momento o elemento que está flutuando deixa de ter o container como pai dele.
O que se faz mais comumente por aí é colocar um elemento com clear:both antes do final do elemento container; o clear:both força que a borda inferior vá para baixo.
O ruim dessa técnica é que o seu html fica sujo, com um elemento a mais, como pode ser visto aqui:
<div>
<div style="float:left; width:30%;">Algum conteúdo</div>
<p>Texto que não flutua</p>
<div style="clear:both;"></div>
</div>
Uma outra técnica, mais bonita, é fazer isso por CSS. Há tempos foi encontrada uma solução que se popularizou chamada de clearfix
Ela é uma classe CSS, como pode ser vista abaixo, que deve ser adicionada ao elemento container:
É usada essa propriedade :after para inserir um conteúdo via CSS no final do elemento que recebe essa classe. Nesse caso, é inserido um texto blocado e invisível. O elemento block, por si só, já é um elemento com clear:both.
As outras 3 linhas do código são para que o código de cima não afete os demais browsers.
<div class="clearfix">
<div style="float:left; width:30%;">Algum conteúdo</div>
<p>Texto que não flutua</p>
</div>
[WARNING] se você é um fanático por validação de código nos engines do W3C, nem precisa testar esse aqui, que ele não passa mesmo. Mais explicações aqui, ó, bem como um texto mais explicadinho sobre toda essa solução.[/WARNING]
Quanto eu estava em São Paulo semana passada aconteceu pela primeira vez algo que eu sabia que cedo ou tarde aconteceria: excedi meus 25gb mensais no Photobucket.
A primeira coisa que pensei foi em pagar e manter uma conta pro, mas se eu já tenho um ótimo serviço de hospedagem não existia motivo real para eu pagar alguém para manter minhas imagens. Bom, existia um único motivo: o comodismo. Mas uma coisa que aprendi com minha pouca experiência de vida é que quando se trata de programação, cliente,design e servidor o comodismo é um senhor tiro no pé e que logo trará problemas.
Estou pensando no desenvolvimento de um álbum de imagens no And After e ter as imagens no servidor não so agilizará o processo como também me dará segurança e eficiência para fazer backups, alterações e gerenciamento desse novo sisteminha que pretendo implementar.
Ótimo, fiz transferência de parte das imagens (foi bem menos doloroso do que parece) e fui ativar a proteção hotlink¹ e descobri que não existia proteção hotlink para a minha conta.
Sabendo da disponibilidade do Isapi Rewrite no meu servidor (utilizo para as urls amigáveis do And After) fui pesquisar sobre o assunto, finalmente a resposta:
Proteção de hotlink com ISAPI Rewrite
No seu arquivo httpd.ini adicione essas quatro linhas:
Neste caso os formatos protegidos em todo o site são: gif, jpg e png. Você pode proteger outros formatos adicionando-os na última linha do código.
¹ Hotlink é quando um site "rouba" suas imagens. Utiliza suas imagens, flashs ou outro tipo de conteúdo no site sem baixar o arquivo e enviar para outro servidor. Quando o usuário visualiza a imagen dentro do outro site, ela é requisitada do seu servidor, causando consumo para você.
Semântica, meus amigos, é a base de qualquer html escrito. E não existe uma regra rígida, um certo ou errado; html é uma linguagem, e existem muitas formas de se falar a mesma coisa em uma linguagem.
Desde a forma mais formal e polida, até aquela mais esdrúxula. Mas, de qualquer forma, todo mundo vai entender o contexto global.
Acontece que, para não deixar dúvida sobre o que você está expressando, quanto mais formal se usa uma linguagem, menor a margem que se dá para mal-entendidos.
Passei algumas horas numa reunião na última sexta-f discutindo sobre a semântica que foi usada na escrita de um html para um projeto no qual vou me envolver. O html estava todo validado pelo W3C, sem tabelas, bonitinho. Bonitinho, sim, mas ordinário. Não havia semântica; olhava pro html e não sabia o que era tpitulo, o que era texto de conteúdo, se as imagens usadas eram de layout ou de conteúdo, etc…
Vou usar um exemplo de um grande portal da web para exemplificar. Veja o trecho do layout:
O código usado foi esse:
<div id="noticias">
<div id="imagem">
<p>
<a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra" width="163" height="200"></a>
</p>
<h5><a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a></h5>
</div>
<ul>
<li class="red"><a href="#" rel="101" >Votação</a></li>
<li class="prin1t"><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></li>
<li class="prin1p">· <a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
<li class="prin1p">· <a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
<li class="prin1p">· <a href="" rel="104" ></a /><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</strong /></a> </a></li>
<li class="prin1p">· <a href="" rel="105" ></a /><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</strong></a> </a></li>
<div class="linha"></div>
<li class="red"><a href="#" rel="1010" >Blog das Eleições</a></li>
<li class="prin1b"><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></li>
<div class="linha"></div>
<li class="red"><a href="#" rel="1020" >Notícias</a></li>
<li class="prin1b"><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></li>
<li class="prin1p">· <a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
<li class="prin1p">· <a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
</ul>
</div>
Vou, de cara, me abster a comentar sobre essas divs perdidas no meio da lista (ul) usada. Um erro grosseiro.
Mas, quando se olha para esse layout, o que se percebe? Há uma imagem de destaque na lateral esquerda, com uma legenda, e na lateral direita uma série de retrancas com títulos, uma com subtítulo e links para as matérias. Existem milt maneiras de se escrever o html para isso, mas, analisando o código escrito originalmente:
– não faz sentido usar um h5 para a legenda da imagem, ainda maais porque não foi usado nenhum outro título nas demais áreas;
– não tem o porque colocar um parágrafo (p) para a imagem;
– não foram usadas tags de títulos (h1 a h6) para os títulos e subtítulos das retrancas.
– uso de atributos deprecados para definir layout inline (width, height)
– bullet usado nas listas (uls) deveria estar no CSS e não no html
Como eu escreveria esse html:
<div id="noticias">
<div id="imagem">
<a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra"></a>
<a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a>
</div>
<div>
<h5><a href="#" rel="101" >Votação</a></h5>
<h6><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></H6>
<ul>
<li><a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
<li><a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
<li><a href="" rel="104" ><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</a></li>
<li><a href="" rel="105" ><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</a></li>
</ul>
<h5><a href="#" rel="1010" >Blog das Eleições</a></h5>
<h6><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></h6>
<h5><a href="#" rel="1020" >Notícias</a></h5>
<h6><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></h6>
<ul>
<li><a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
<li><a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
</ul>
</div>
</div>
É lógico que alguns pontos podem ser discutidos, alterados, etc… mas, vendo esse html aqui, quem vê o código entende qual parte do conteúdo tem a sua devida importância: o que é titulo, é título, o que é lista de menu é lista de menu, o que é link é link.
E qual a vantagem?
Leitores de busca e indexação funcionam seguindo a semântica do seu código. Se você tem um título e um texto simples envoltos ambos com uma div, o buscador vai entender que ambos tem a mesma importância; quando você uma um h1 (ou até h7) num título e coloca o texto num parágrafo (p), o buscador entenderá que o título é mais relevante. E isso ajudará e muito na indexação, pode apostar.
Isso, sem contar que escrever o código dessa maneira acelera o processo de manutenção do html – principalmente quando ele é trabalhado por equipes – e diminui o peso do html final (com isso, gera menos consumo no tráfego de dados do seu servidor).
Ou seja, todo mundo ganha!
Um dos grandes benefícios da colaboração e troca de conteúdos que a web 2.0 nos proporciona são os mashups.
Para quem não sabe, mashup é o ato de misturar dados de serviços diferentes através das APIs disponibilizadas, criando um outro serviço. Um exemplo clássico é tern uma lista de endereços de um sistema próprio, e integrá-lo com o Google Maps (veja um exemplo de como usar a API do Google Maps).
O mundo dos mashups vêm crescendo muito, e descobri um site muito bacana, que tem por objetivo listar tanto APIs quanto mashups já prontos.
No ProgramamableWeb são quase mil APIs e mais de 3400 mashups. Dá pra fazer buscas abertas, ou por áreas e ainda ver quais as mais acessadas.
Crescimento da quantidade de mashups no site
Vale, e muito, como referência para tanto ter novas idéias quanto estudar, e ver o que o pessoal está fazendo por aí.