DNA do meu Blog

Postado por: Pedro Rogério em

DNA do Blog

A imagem que você está vendo acima é o DNA do meu blog, é uma aplicação que pega o endereço do seu site, faz uma análise e o converte em um gráfico como se fosse o DNA humano. Um site semânticamente rico (uso de DIVs, XHTML, tags atualizadas), com certeza terá uma imagem com mais brilho do que um site com tags desatualizadas.

Veja o DNA do seu site em WEB2DNA Art Project.

Introdução a marcação semântica

Postado por: Pedro Rogério em

Muitas vezes quando estamos fazendo um site, acabamos ficando preocupados somente com os títulos e os textos, é onde acabamos esquecendo da semântica, por exemplo, quando queremos indicar um código em nosso site, devemos usar a tag <code>, mas muita gente acaba esquecendo disso.

Abaixo você pode ver uma lista de tags semânticos:

  • cite: Destina-se a marcar textos que citem ou façam referências a outras fontes
  • code: Destinado a marcar trechos código
  • dfn: Destina-se a marcar um termo cuja definição foi dada no documento
  • em: Destinado a marcar texto com ênfase
  • kbd: Destina-se a marcar texto que define uma ação do usuário no teclado
  • samp: Destinado a marcar textos que são mostrados como exemplo de saída de um software
  • strong: Destinado a marcar textos em negrito
  • sub: Destinado a deixar o texto subescrito
  • sup: Destinado a deixar o texto superescrito
  • var: Destina-se a indicar que trata-se do nome de uma variável ou de um argumento de um programa

<update> Depois do comentário do Marcos Danilo, vou deixar aqui um exemplo de como usar a tag dfn, ela indica basicamente a definição de uma palavra, em geral apresenta o texto em itálico: CERN: Centre d’Éstudes et Recherches Nucleaires </update>

GetWebkit – Safari para Windows

Postado por: Pedro Rogério em

GetWebKit é um navegador para Windows desenvolvido a partir do Webkit da Apple, o mesmo motor do Safari. Para você instalá-lo, você necessita ter instalado previamente o vcredist_x86. Por enquanto ele não oferece total suporte a páginas codificadas com UTF-8, ISO-8859-1 e Windows-1252, o que pode resultar em caracteres estranhos.

Barra de rolagem com overflow

Postado por: Pedro Rogério em

Se você precisa fazer uma barra de rolagem em uma div, existe uma maneira muito simples de se obter esse efeito, usaremos a propriedade overflow do CSS. Reparem no código abaixo:


#scroll {
  width:300px;
  height:170px;
  background-color:#F2F2F2;
  overflow:auto;
}

Agora no HTML criaremos uma div chamada scroll onde colocare-mos o nosso conteúdo que queremos que tenha a barra de rolagem:


<div id="scroll">
  <p>Aqui vai o conteúdo da div</p>
</div>

O que o overflow:auto faz é o seguinte, reparem que foi definido uma altura pra nossa div de 170px, quando o conteúdo ultrapassar essa altura, ele cria uma barra de rolagem automaticamente, interessante não, então veja um exemplo em funcionamento.

Páginas:«1...103104105106107108109...119»