Pedro Rogério » Pinceladas da Web - HTML5 Hard Coding and Bullet Proof CSS

A semântica e o elemento HTML q

Postado por: Pedro Rogério em 20 de setembro de 2006

20 set
8

Provavelmente você nunca deve ter usado o elemento <q> do HTML, eu particularmente também não tinha conhecimento de sua importância, que serve para marcar o texto com citações, outros preferem usar entidades de caracteres para citar o texto, mas isso com certeza fere a semântica. Usar o <q> ao invés das entidades de caracteres nos permite também que você aplique estilos CSS, como alterações da cor, tamanho, etc.

Exemplo:


<q>Nunca devemos esquecer que arte não é uma forma de propaganda, é uma forma de verdade</q>, disse John Kennedy.

Que seria renderizado dessa forma: “Nunca devemos esquecer que arte não é uma forma de propaganda, é uma forma de verdade”, disse John Kennedy.

Truque CSS desconhecido

Postado por: Pedro Rogério em 18 de setembro de 2006

18 set
17

A um mesmo elemento podemos designar distintas classes da seguinte maneira:


<div class="primeira segunda terceira">…</div>

As classes devem ser declaradas dessa forma, separadando com espaço os nomes dos seletores podemos aplicar quantas classes quisermos ao mesmo elemento. Você conhecia esse truque? Conte-me aqui a sua experiência!

13 elementos que deveriam conter em sua página

Postado por: Pedro Rogério em 15 de setembro de 2006

15 set
9

1- Buscador interno amigável e eficaz.
2- Mapa do site.
3- Links internos com URI absoluta.
4- Conteúdo significativo no início da página.
5- Desenvolver com as últimas tecnologias.
6- Validar o HTML, XHTML e o CSS.
7- Comprovar que não existem links quebrados.
8- Uso limitado de tabelas.
9- Uso limitado de Flash.
10- Arquivos externos para folhas de estilo e javascript.
11- Incorporar sempre atributos de identificação (alt, title).
12- Incluir informação de contato.
13- Uso moderado de imagens. Sempre justificadas e com valor não superior a 12KB

8 CLICHÊS DA WEB 2.0

Postado por: Pedro Rogério em 14 de setembro de 2006

14 set
2

1- Estética da gradação e difuminação nos logotipos. Exemplo: Blinksale
2- Nomes raros e pontos perdidos no meio dos nomes. Exemplo: Flickr e del.icio.us.
3- Diagonais no background. Exemplo: StumbleUpon.
4- Fontes grandes. Exemplo: Blogger.
5- Fundos brancos, claros e neutros. Exemplo: Google.
6- Efeito “wet floor”(a imagem aparece refletida em sua parte inferior, como se estivesse sob um piso úmido). Exemplo: Web 2.0 Logo Creator
7- Fontes pixeladas. Exemplos aqui.
8- Tags y folksonomía

Via Modern life is rubbish.

Estou atacando de colunista

Postado por: Pedro Rogério em 13 de setembro de 2006

13 set
6

É gente, além de escrever para esse humilde blog, agora também vou começar a escrever para o site Oficina da Net, um portal direcionado aos desenvolvedores web. Estou escrevendo na coluna XHTML, que pode ser acessada aqui. Nesse 1° artigo eu publiquei uma matéria que havia colocado aqui no meu blog, que se chama: Uma vez programando errado, sempre dará errado. Eu acho importante isso, manter o código sempre organizado que para uma eventual manutenção, não ocorra problemas.

Os pseudo-elementos :after e :before

Postado por: Pedro Rogério em 13 de setembro de 2006

13 set
10

Os pseudo elementos :after e :before servem para inserir conteúdo gerado depois ou antes de cada elemento. Um exemplo de uso seria se quisessemos inserir conteúdo depois e antes dos links. Veja o código:


<div id="link1">
   <a href="#">Contato</a>
</div>
<div id="link2">
    <a href="#">Sobre</a>
</div>

E o nosso CSS fica da seguinte forma:


#link1:after { content: "Exemplo de After"; }
#link2:before { content: "Exemplo de Before"; }

Veja um exemplo em funcionamento, mas se você usa o IE como browser, não vai conseguir ver essa propriedade em funcionamento, eu aconselho você então a usar um outro browser como o Opera, ou o Firefox.

Guia CSS – 10ª parte: Propriedade font em CSS

Postado por: Pedro Rogério em 12 de setembro de 2006

12 set
2

Font

Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.


font: italic bold normal small/1.4em Verdana, sans-serif;

o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.

Font-family

Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:

Nome da Família
Família Genérica

Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.