Entrelinhas e espaçamento de letra com CSS

Postado por Autodidatt 20 de julho de 2011 15:11 0 comentários
Em , , ,

Recursos com processos fáceis que estão sendo muito usados no web design são os espaçamentos entre letras e o espaçamento entre linhas (entrelinhas).

Dando espaço às linhas
Usamos a propriedade line-height seguida do valor para determinar as entrelinhas; seja o valor positivo (espaço maior) ou negativo (espaço menor).
Lembrando que o navegador aplica 100% de espaçamento entre as linhas.

 - Espaço maior entre linhas
Segue o código:

     p {line-height:8px;}
Neste código estamos determinando por CSS que no meu documento, meu texto dentro da sintaxe P deverá ter 8 pixels de espaçamento entre suas linhas.

 - Espaço menor entre linhas
Segue o código:
     p {line-height:2px;}
Neste código estamos determinando por CSS que no meu documento, meu texto dentro da sintaxe P deverá ter 2 pixels negativos de espaçamento entre suas linhas.

Importante lembrar que o valor padrão é 100% (aplicado pelos browsers) de espaçamento, sendo uma dica válida ao querer duas vezes o tamanho padrão a utilização de 200% e à metade, 50%.

Dando espaço às letras
Para trabalharmos com o espaçamento entre letras usamos a propriedade letter-spacing seguida do valor, seja ele positivo (espaço maior) ou negativo (espaço menor).

- Espaço maior entre letras
Segue o código:
     h1 {letter-spacing:10px;}
Neste código estamos determinando por CSS que no meu documento, meu título H1 deverá ter 10 pixels de espaçamento entre as letras.

 - Espaço menor entre letras
Segue o código:
      h1 {letter-spacing:-5px;}
Neste código estamos determinando por CSS que no meu documento, meu título H1 deverá ter 5 pixels negativos de espaçamento entre as letras.

Lembrando que você pode definir todas essas medidas em px, %, em, cm, in, entre outros que definem comprimentos no CSS, podendo ser até simplesmente números.

A diferença entre HTML, XHTML e DHTML

Postado por Autodidatt 17 de julho de 2011 19:50 1 comentários
Em , , , ,

Uma das coisas que todo web designer deveria não apenas usar como explicar e saber, é a diferença entre HTML, XHTML e DHTML.
Chega de falar que são "derivações com apenas uma letra à mais" ou "o HTML com D", "HTML com X", pois afinal, são sim diferentes e possuem suas funções, mesmo que a linguagem continue sendo a mesma dentro do web design.
Primeiro, um conceito básico do web design: entender (pelo menos o significado dos acrônimos).
HTML: HyperText Markup Language (Linguagem de Marcação de Hipertexto)
XHTML: eXtensible HyperText Markup Language (Linguagem de Marcação de Hipertexto Extensível)
DHTML: Dynamic HyperText Markup Language (Linguagem de Marcação de Hipertexto Dinâmica)

No algoritmo abaixo, criado por mim, ficam claras as diferenças entre os três.


(A flecha que vem do HTML ficou meio pequena, eu sei)
E claro, como eu não poderia simplesmente finalizar o post sem mais nenhuma observação, coloquei um * no "OTIMIZADO?", o qual vou explicar agora.
Considero a "otimização" uma melhoria do que já foi feito, adicionando e/ou subtraindo funções e objetos, dentro do web design. No XHTML, não funciona diferente: O HTML otimizado é o XHTML.

Como seria essa otimização?
Não sei se estou tecnicamente-totalmente-correta, mas o XHTML originou-se do XML, e isso o tornou sensível aos mínimos detalhes: em um documento deve-se fechar todos os elementos e usar letras mínusculas ao escrever suas sintaxes.
Com essa otimização no código, você manterá um padrão em diversos dispositivos e aplicativos que utilizam a web (tudo).

Por que?
Por acessibilidade, já que XHTML seria uma "expansão" do HTML. A qual podemos chamar de otimização, já que é um conjunto de melhorias para a web, respeitando um padrão de acessibilidade.
"[...]você manterá um padrão em diversos dispositivos e aplicativos que utilizam a web (tudo)."

E para finalizar: XHTML e DHTML trabalham para o HTML. Como por exemplo, o jQuery, trabalhando para o Javascript; assim como ele tem seu objetivo simplificar a navegação criando animações, aplicações, transições e eventos, eles também possuem suas funções. Sendo:
{HTML: linguagem; XHTML: expansão; DHTML: união de Javascript + folha de estilo (como o CSS);}

Mostrar e ocultar objeto com jQuery

Postado por Autodidatt 16 de julho de 2011 10:10 0 comentários
Em , , , ,

Usando o jQuery, podemos realizar muitas transições. Entre elas, o show e hide com objetos ou elementos atribuídos com ID, class, input (podendo ser divisórias, tabelas, input) com efeito, recurso que utilizei no desenvolvimento de meu portfolio.

Entenda
Vamos supôr que em nosso projeto, na página de contato, queremos que o formulário seja exibido se desejado. Ao clicar em "abrir formulário" o formulário vai ser mostrado em efeito, podendo ser fechado ao clicar em "fechar formulário".

Exemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- AUTODIDATT -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/gzc3jvh.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">    
   $(document).ready(function(){  $('#contato').hide();      $('a#abrir').click(function(){ $('#contato').show('slow');      });      $('a#fechar').click(function(){
    $('#contato').hide('slow');
      })
});
</script>
<!-- AUTODIDATT -->
<title>Autodidatt</title>
</head>

<body>
<h1>Contato</h1>
Telefone: (01) 9876-5432<br />
Endereço: Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
<h2><a id="abrir" href="#">Abrir formulário de contato</a></h2>
<div id="contato">
<b>Contato</b><br />
Nome:
  <label for="textfield"></label>
  <input type="text" name="textfield" id="textfield" />
  <br />
  E-mail:
<input type="text" name="textfield2" id="textfield2" />
  <br />
  Mensagem:<br />
  <label for="textarea"></label>
  <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
  <br />
  <input type="submit" name="Enviar" id="Enviar" value="Enviar" />
  <br />
<a id="fechar" href="#">Fechar</a>
</div>
</body>
</html>


Os elementos em vermelho devem ser alterados (e seu conteúdo também, óbvio).
Os elementos em verde devem ser baixados. Baixe o arquivo jquery-1.6.2.min.js em: http://docs.jquery.com/Downloading_jQuery. Caso a versão for alterada e for baixado um arquivo com nome diferente, altere o nome do arquivo no documento conforme o baixado.

Lembrando também que este formulário disponibilizado no código não está em funcionamento, está funcionando somente como exemplo.

Código jQuery:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/gzc3jvh.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">    

   $(document).ready(function(){

  $('#nomedoobjeto').hide();

      $('a#abrir').click(function(){

$('#nomedoobjeto').show('slow');
       });
      $('a#fechar').click(function(){
    $('#nomedoobjeto').hide('slow');
      })
});
</script>
Para abrir o objeto:
  <a id="abrir" href="#">Abrir objeto</a>


O objeto:
  <div id="nomedoobjeto">Conteúdo do objeto</div>

Para fechar o formulário:
  <a id="fechar" href="#">Fechar objeto</a>


Sendo o código jQuery para colocar antes de </head> e o código para abrir, o código do objeto e o código para fechar para colocar dentro de <body>.
Lembrando que o objeto está para ser exibido em div, usando ID, por isso está com #. Você pode usar com class, mudando de #nomedoobjeto para .nomedoobjeto e usando o objeto com class.

Qual a diferença entre nerd, geek e CDF?

Postado por Autodidatt 15 de julho de 2011 20:38 5 comentários
Em , , , , ,

Procurei isso no Google só por conveniência e não vi resultado algum. Ruim ter que realizar três pesquisas e ainda compará-las para entender uma coisa tão simples. E ainda: o único artigo cabível foi o da Wikipédia.
Mas definitivamente, quais são as diferenças entre nerd, geek e "cabeça-de-ferro" (CDF)?

O nerd
Nerd é aquela pessoa que consegue desmontar um computador (literalmente ou não) e não possui habilidade social o suficiente nem para comprar um pão na padaria.
O verdadeiro amante da tecnologia, da computação, programação, superior à muitas pessoas de sua idade, se for compará-las pelo seu grau intelectual.
Sempre buscando novos conhecimentos e geralmente autodidata no que faz, sua maioria não pratica esportes e quando sai do computador se atrapalha ao praticar qualquer tipo de atividade relacionada aos humanos  (sério),  não sabendo o que fazer na maior parte do tempo.
Quase que excluído e ignorado pela sociedade, o nerd definitivamente NÃO é o colecionador que respira filmes, séries e quadrinhos.

O cabeça-de-ferro (ou simplesmente CDF)
Confundido com o nerd, o cabeça-de-ferro é um estereótipo usado com os "cadeira da frente". Esses alunos, diferentes por se dedicarem integralmente aos estudos, frequentemente são rotulados de CDF.
Geralmente gostam de ciências, física e matemática e isso os diferenciam dos alunos que os insultam, fazendo-os sofrer até rejeição social pelos seus autores, muitas vezes  pessoas de baixo intelecto e sem interesse e educação.
Muitas vezes a sigla possui outro significado, com referência à cavidade anal, mas o significado é o mesmo.

O geek
Para mim, os menos considerados nerds, já que participam de uma geração mais recente e são mais descolados.
 Esses sim são os viciados (obcecados) em RPG, viciados em filmes, séries e super heróis; na maioria das vezes blogueiros e até hackers e/ou programadores. Adoram lojas como Linux Mall — loja que é referência em produtos nerds e hackers — e principalmente café e Mario Bros.

Então, nerd: o computador, a televisão, tecnologia; CDF: o estudioso, respira o que faz e lê; geek: colecionador e viciado.

Fonte personalizada ou própria no seu site

Postado por Autodidatt 13:11 2 comentários
Em , , , , , , , , , ,

Graças à nova versão do CSS, o CSS3, é possível desenvolver um projeto HTML com fonte personalizada, diferente ou até própria a determinando na folha de estilo utilizando a nova propriedade do CSS, o font-face. Também saberemos se é possível ou não determinar anti-alias (ou antisserrilhamento) na fonte e renderizar seus formatos para cada navegador.

Senti que falei como se o @font-face fosse uma "NOVA PROPRIEDADE DO WEB DESIGN". Mas a verdade é que ela existe desde 2007 e os navegadores/browsers só foram ter suporte para a propriedade bem depois disso, impedindo não só que designers utilizem a propriedade, mas sigam um padrão limitado de fontes. E quem é web designer sabe o que é ter que recorrer às imagens e/ou ao sIFR (Rich Accessible Typography for the Masses): técnica válida que utiliza Flash, Javascript e CSS, porém pesada e para mim, descartada.

Extensões
{Pois muitas vezes formatos são específicos.}
Algumas das mais usadas: .ttf: (TrueType) — .otf (OpenType) — .svg e .svgz (Scalable Vector Graphics) — .eot (Embed OpenType).

@font-face

{ Use tipografias em seu site que não estão instaladas no computador do visitante.}
Já pode abrir um novo documento CSS. No exemplo abaixo, o qual recomendo colar na sua folha de estilo para entender melhor, fica clara a utilização da propriedade. Vou utilizar o formato padrão, .ttf. Veja:

@font-face {
     font-family: Autodidatt;
     src: url(http://exemplo.com/fontes/Autodidatt.ttf);
 }

Agora vamos entender:

@font-face é o nome da propriedade; font-family define o nome da fonte; o atributo src (resource) aponta o endereço URL (src: url..) para o arquivo da fonte, que está entre parenteses: (http://exemplo.com/fontes/Autodidatt.ttf).

Lembrando que o nome da fonte pode ser o que você quiser.
Para utilizar essa fonte em nosso arquivo HTML, não há nada de novo. O HTML continua básico. Um exemplo, usando a fonte do código que foi usado no primeiro exemplo:
    h1 { font-family: Autodidatt, Arial; }
No caso, estou usando a minha fonte (Autodidatt) em um texto dentro de h1. E caso não funcionar — que é o caso dos usuários do Internet Explorer — ele vai exibir o texto em Arial, ou também para quando o sistema ou o navegador não ler o formato da fonte, mas isso tem solução (ao contrário dos usuários do IE). Só continuar lendo.

Acessibilidade
{Até para usar uma diferente tipografia a acessibilidade é necessária. Renderizaremos os formatos das fontes para todos os navegadores e sistemas.}
 Depois de entendermos o font-face e finalizarmos o nosso código, devemos renderizar a fonte pois nem todos navegadores lêem o mesmo formato de letra que o seu.

O código é simples:
    src: local('☺'), url('http://exemplo.com/fontes/Autodidatt.woff') format('woff'), url('http://exemplo.com/fontes/Autodidatt.ttf') format('truetype'), url('http://exemplo.com/fontes/Autodidatt.svg') format('svg');
Quem sabe ler vai entender o código. Ele só está lendo os formatos e executando as páginas, lendo todas e vendo o que vai "dar na telha". Você pode editar os códigos, adicionando novos formatos, tornando-o mais acessível.

O anti-alias é possível no CSS?
{ De uma vez por todas, o que já fez muitos voltarem a recorrer às imagens.}
Definitivamente, não. Nem "anti-aliasing", nem "font smoothing". Visitei fóruns, li artigos, me perdi ao responder para muitos, até para mim mesma. MAS, também utilizando o CSS3, achei uma solução que dá pelo menos uma "aparência" de antiserrilhamento não totalmente válida.
Usando a propriedade text-shadow consegui disfarçar o serrilhamento de uma página HTML em que eu utilizava o font-face. Segue o código pronto para inserir na folha de estilo:

    text-shadow: 0 0 1px rgba(0,0,0,0.3);

Pode-se alterar para uma cor mais cabível para a página, já que a cor não vai ser válida para todos documentos HTML do mundo. Preferi utilizar rgba(0,0,0,0.3) mas pode ser alterada para HEX sem problemas.

Segue abaixo os códigos. Os campos em vermelho indicam o que é para alterar.

Código da tipografia personalizada:

@font-face {
     font-family: NOME DA FONTE;
src: local('☺'), url('LINK DA FONTE EM .WOFF') format('woff'), url('LINK DA FONTE EM .TTF') format('truetype'), url('LINK DA FONTE EM .SVG') format('svg');

}

Código pra usar a tipografia personalizada com aparência de anti-alias:

h1 {
     font-family: NOME DA FONTE; text-shadow: 0 0 1px rgba(0,0,0,0.3);
 }

Assinar: Postagens (Atom)