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

Muitas vezes quando clicamos em algum link, costuma ficar em volta do mesmo uma linha pontilhada, como você pode ver na imagem acima, pelos testes que fiz, isso só acontece no Firefox, pelo menos no IE 6 e no Opera 9, tudo fica normal, mas existe uma maneira muito fácil de fazer com que isso não aconteça, nas tags a do seu CSS, basta você aplicar o seguinte código:

a { outline:0; }

Mais simples impossível!!!

Os seletores de classe permitem que você determine diversos estilos dentro de um mesmo elemento (x)HTML. Ele é similar aos estilos inline. As classes podem seu usadas diversas vezes dentro de um arquivo (x)HTML, diferentemente do ID, que só pode ser usado uma vez, mas isso veremos em um próximo artigo. Para um melhor entendimento vamos a um exemplo, eu gerei uma definição para um parágrafo:

p {
   font-size:1.6em;
   color:#F00;
}

Tudo bem, mas eu quero que uma parte do meu parágrafo fique em verde e negrito, aí é que iremos usar uma classe, então, vamos criar a mesma:

.boldgreen {
  color: #008080;
  font-weight: bold;
}

Para uma melhor compreensão, veja um exemplo em funcionamento. Como você pode reparar, os seletores de classe começam com (.), e quanto ao nome das mesmas, elas ficam ao seu critério.

Tradução do artigo original de: CSS Basics.

A partir de agora você não precisa mais correr pra frente do PC para ler as novidades do meu site, basta você apontar o browser do seu celular para http://litefeeds.com/m e instalar a aplicação necessária. A partir daí é só digitar o endereço do meu FEED e ficar por dentro das novidades onde quer que você esteja.

Esse serviço é disponibilizado por LiteFeeds.

Dentre as várias especificações dos Microformats, uma outra especificação que podemos destacar é o atributo rel=”license”, que tem como função marcar os links das páginas com a licença que se está utilizando, seja uma licença de um blog, ou de um software desenvolvido por outras pessoas.

Dentro do site Microformats.org essa é a especificação mais simples que se pode encontrar, e podemos resumí-la da seguinte forma: Colocamos o atributo rel com o valor “license” em qualquer link que faça referência com a licença da página atual. Abaixo você pode ver um exemplo:

<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" title="Licença deste Blog" rel="license"><abbr title="Attribuição-Não-Commercial" xml:lang="pt-br">by-nc-sa</abbr> 2.5</a>

Exemplo de licença referente a software:

<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="license">Apache 2.0</a>

Implementações

• Dreamweaver Extension suite: Extensão para o dreamweaver para a implementação de rel-license
• Creative Commons (cc) license chooser
• Yahoo! (cc) search
• Google “Usage Rights” search

Sempre que possível eu gosto de testar novas tecnologias, a algum tempo atrás fiquei conhecendo o EyeOS, um sistema operacional todo desenvolvido em Ajax. O funcionamento dele é muito interessante, você pode instalar novos aplicativos nele, como editor de texto, MP3 Player, e outros plug-ins disponíveis na comunidade on-line.

Veja alguns screenshots do programa rodando:

Instalação

Fazer a instalação do EyeOS em seu servidor é muito fácil, você não precisa de MySQL ou qualquer banco de dados desse tipo, por que todas as informações ficam guardadas e criptografadas em arquivos XML e PHP.

Continuar lendo »

Dando uma garimpada aqui nos meus favoritos, acabei achando 2 links interessantes sobre CSS e desenvolvimento para a Web. Um deles é o CSS Help Pile, onde você pode encontrar links para vários sites sobre desenvolvimento de layouts, bugs em browsers, guias para iniciantes, e o outro, é o The Web Developer’s Handbook, onde você pode encontrar além de vários links sobre CSS, links sobre: banco de imagens, SEO Tools, Tipografia, Color Tools, Acessibilidade, Usabilidade e outros assuntos. Vale a pena dar uma conferida.

As facilidades que os ambientes CMS nos proporcionam são inúmeras, uma delas é a troca de layout, seja você desenvolvendo o seu próprio ou pegando um já pronto. Como eu já estava meio cansado do meu layout antigo, resolvi baixar um layout já pronto, que com certeza é 10 vezes mais elegante que o anterior. Ainda faltam alguns acertos, mas com o tempo eu faço isso. O que acharam?

Continuando o guia sobre CSS, hoje iremos ver a Sintaxe CSS, ela é um pouco diferente da sintaxe (x)HTML, mas é bem fácil, ela consiste em 3 partes:

seletor { propriedade:valor }

Onde: O seletor é o elemento (x)HTML que você deseja denominar, a propriedade é o valor real da propriedade, e o valor é o estilo que se aplica a essa prorpiedade. Cada seletor pode ter propriedades múltiplas, e cada propriedade dentro desse seletor pode ter valores independentes. A propriedade e o valor são separados por dois pontos e ficam contidos dentro de 2 colchetes. As propriedades múltiplas são separadas por ponto e vírgula. Os valores múltiplos dentro de uma propriedade são separados por vírgula, e se um valor individual contiver mais de uma palavra, você deve colocá-lo dentro de uma citação. Abaixo você pode ver um exemplo:

body {
     background:#cccccc;
     font-family:"Trebuchet MS", Verdana, Arial, serif;
}

Como podem ver acima, eu separei o valor da propriedade font-family por vírgula, e coloquei a fonte Trebuchet MS dentro de uma citação. O resultado no navegador seria que o corpo da página teria a cor cinza e as fontes seriam as que eu defini alí, pelo menos as que a grande maioria dos usuários tem instaladas no computador.

Continuar lendo »

Se você quiser mostrar em seus links os idiomas dos mesmos, existe um método muito simples, que usa a propriedade :after do CSS, seus links teriam a seguinte aparência: Aqui o link [pt-br].

O método consiste da seguinte forma:

<a href="url-do-link" hreflang="idioma">Texto do link</a>

O idioma será o da página em questão, por exemplo:

<a href="http://www.pinceladasdaweb.com.br" hreflang="pt-br">Pinceladas da Web</a>

O seu CSS fica da seguinte forma:

a[hreflang]:after {
   content: " ["attr(hreflang)"]";
   }

O que ocorre é que essa regra seleciona todo os links que tem o atributo hreflang e mostra para você o idioma dos mesmos. Veja aqui um exemplo dessa propriedade em ação. Ela não funciona no IE.

Com as CSS é possível fazer alterações radicais no visual do nosso site. Você pode simplesmente fazer alterações em todo o seu site, ou apenas estar “estilizando” uma tag. Hoje vamos aprender a como efetuar alterações no título de nossa página. Para isso vamos usar a tag <h1>. Nosso código (x)HTML fica da seguinte forma:

<h1>Título da Página</h1>

Agora vamos mexer no nosso CSS, vamos definir o tipo de fonte:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
</style>

Só que o nosso título não tem cor alguma, vamos agora definir uma cor para a fonte e também para o background:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
</style>

Vamos agora definir uma margem para o título para que o texto que venha a seguir não fique colado no mesmo:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
</style>

Para uma melhor performance, vamos definir também o padding:

<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
padding:15px;
</style>

Pronto, viu como é fácil, veja aqui um exemplo.